Vue-diagonal NPM

vue-diagonal

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

How to install and use

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!

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