npm install vue-diagonal!logo
npm install vue-diagonal
`
Then, to install as a global component
` javascript
import Vue from "vue";
import VueDiagonal from "vue-diagonal";
Vue.component("vue-diagonal", VueDiagonal)
`
Or you can register locally in one of your components as follows
` javascript
import VueDiagonal from "vue-diagonal";
export default {
name: "AmazingComponent",
props: [myprop],
components: {
"vue-diagonal": VueDiagonal
}
}
`
Using in templates
` html
your content goes here
`
š you've done it!
Parameters
Component props:
| Name | Type | Mandatory | Default | Example | Description |
|:-------------|:------:|:---------:|:-------:|:---------:|:------------------------|
| deg | Number | true | - | 10 | the inclination, in deg |
| max-width | String | false | "100%" | "250px" | the css value of the width to set on the element |
| background | String | true | - | "#3c3c3c" | the background css rule to apply, this is what we are going to make it obliquos by skewing it |
| space-before | String | false | false | true | If true it will ad extra space before. Without this if you have "normal" elements before the diagonal component, it may overlap |
| space-after | String | false | false | false | As before, but add extra space at bottom |
Events
The component does not emit any events
Slots
The component has a default slot where you should put your content/text
Contributing
The project is opened to contributes, suggestions and improvements. You can use the Issues section.
$3
Fork the project, open it up and type
`
npm install
`
To run the example page, it will open a dev server listening to localhost:8080 (usually), type:
`
npm run dev
`
To build for production
`
npm run build
`
To prepare for pubblication (build both docs and project)
`
npm run prepublish
``