Skip to content

albertodeago/vue-diagonal

Repository files navigation

logo

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

Build and Deploy

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

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.

Project setup

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.

Author and License

Alberto De Agostini

Licensed under MIT