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

Overview

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 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>
    
    <TriangleSeparator>TriangleSeparator>
    
    <TriangleSeparator
        gradient-color-one="red"
        gradient-color-two="blue"
        should-apply-gradient
        swap
        rotate
    >TriangleSeparator>
    
    <TriangleSeparator fill-color="#420999">TriangleSeparator>
      
    <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
🙊 live2d anime figure Vuejs component.

qiokian - anime in Vue.js! ?? live2d anime figure Vuejs component. ?? Demo Link qiokian qiokian landing page ?? Project setup ?? Install dependencies

null 33 Jul 15, 2021
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

mirari 1.6k Jul 24, 2021
Imagvue is an image component for Vue.js

Imagvue Imagvue provides basic image processing props(size,blur,contrast,grayscale, etc.). Support image lazy loading. All Attributes can bind with da

Willy Hong 268 Jan 24, 2021
A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .

A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .

XiongAmao 149 Jul 23, 2021
🎨 A vue directive for the cosha library

vue-cosha Vue cosha is a simple port of the cosha library for ease of use in Vue projects. "Colorful shadows for your images. ?? " cosha lets you add

Josh King 74 Jun 25, 2021
Barcode generator for Vue.js

VueBarcode Add barcodes to your Vue application super easily with VueBarcode! Try it out! Supported barcode formats: CODE128 EAN EAN-13 EAN-8 EAN-5 EA

Johan Lindell 174 Jul 10, 2021
Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by fancybox with zoom, swipe, captions and videos supported

Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by fancybox with zoom, swipe, captions and videos supported.

Lucas Pulliese 235 Jul 26, 2021
A lightbox inspired Vue.js component.

A second version of the lightweight lightbox inspired component for Vue.js with local video support and more features coming. If you're interested, see demo.

Martin Rocek 230 Jul 24, 2021
A Wrapper of Panolens for building VR applications with Vue based on threejs

A framework for building VR applications with Vue

Mudin Ibrahim 377 Jul 25, 2021
A native Vue.js lightbox component

vlightbox Simple native Vue.js lightbox

Oliver Taylor 34 May 20, 2020
Image comparison slider. Compare images before and after. Supports React, Vue, Angular.

Image comparison slider. Compare images before and after. Supports React, Vue, Angular.

Dmitry Snisarenko 81 Jul 27, 2021
vue-dark-photo 一款基于el-dialog封装的轻便简易的图片预览组件,支持放大、缩小、下载、打印等功能。

先上效果图 vue-dark-photo 基于 element-ui2.x 开发的预览图片组件 支持 放大、缩小、复原、下载、打印等功能 支持在线预览pdf、word等文档 暂时只支持jpg、png格式的图片 继承 el-dialog 等组件的属性事件等 适合使用了element-ui的项目 Git

iDark 140 Jul 8, 2021
Image slideshow program

slideshow 가족앨범 사진들을 디스플레잉을 어떻게 할 수 있을까 고민하다가 슬라이드쇼 프로젝트를 시작하게 되었습니다. 예전에 만든 슬라이드쇼를 제대로 만들어본 경험으로 더 좋은 모습으로 만들고 했습니다. 슬라이드쇼의 목적은 브라우저 전체화면으로 사진을 한장씩 넘겨

redgoose 5 Jun 1, 2021
🌉 Vue Image Placeholder component

Vue Image Placeholder ?? Multiservice Image Placeholder Vue component Installation yarn add vue-image-placeholder Use it in your app import ImagePlace

Andrea Stagi 4 Sep 10, 2020