Vue-triangle-separator NPM

vue-triangle-separator

Quickly add full-bleed SVG-powered triangle separators to your page.

Demo & Examples

Live demo - https://alexknutson.github.io/vue-triangle-separator/

npm npm npm bundle size

Install

 npm install vue-triangle-separator

Usage

Import & Register the component

import { TriangleSeparator } from "vue-triangle-separator";

export default {
    components: {
        TriangleSeparator
    }
}

In your template, try one of the following...

<template>
    <!-- The bare minimum -->
    <TriangleSeparator></TriangleSeparator>
    <!-- For a gradient-filled triangle -->
    <TriangleSeparator
        gradient-color-one="red"
        gradient-color-two="blue"
        should-apply-gradient
        swap
        rotate
    ></TriangleSeparator>
    <!-- or a solid fill color -->
    <TriangleSeparator fill-color="#420999"></TriangleSeparator>
    <!-- maybe a bigger triangle? -->  
    <TriangleSeparator :size="250"></TriangleSeparator>
</template>

Props

Name	Details	Example
size	default: `120`	Example
swap	default: `false`	Example
rotate	default: `false`	Example
pull-up	default: `false`	Example
fill-color	default: `rgb(38 60 89)`	Example
gradientColorOne	default: `red`	Example
gradientColorTwo	default: `blue`	Example
zIndexOverride	default: `1`	Example
disableHeight	default: `false`	Example
shouldApplyGradient	default: `false`	Example