VueDiagonal is a (Vue) component that helps you create easily modern diagonal elements to make your app/website more seductive.
It comes with no dependencies and it weights 4kb before gzip.
Demo & Docs
To install the package in your application type
npm install vue-diagonal
Then, to install as a global component
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
import VueDiagonal from "vue-diagonal";
export default {
name: "AmazingComponent",
props: [myprop],
components: {
"vue-diagonal": VueDiagonal
}
}
Using in templates
<div class="my-container">
<vue-diagonal :deg="10" background="salmon">
<div>your content goes here</div>
</vue-diagonal>
</div>
๐ you've done it!
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 |
The component does not emit any events
The component has a default slot where you should put your content/text
The project is opened to contributes, suggestions and improvements. You can use the Issues section.
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
Test are not implemented yet.
Licensed under MIT