alexknutson / vue-triangle-separator

A simple Vue component that creates an SVG-powered triangle. Combine them to create interesting content separators!

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/

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