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:

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.

Alberto De Agostini

Licensed under MIT