https://github.com/alexknutson/vue-triangle-separator
A simple Vue component that creates an SVG-powered triangle. Combine them to create interesting content separators!
https://github.com/alexknutson/vue-triangle-separator
separator svg triangle vue vue-component vue-components vuejs
Last synced: about 2 months ago
JSON representation
A simple Vue component that creates an SVG-powered triangle. Combine them to create interesting content separators!
- Host: GitHub
- URL: https://github.com/alexknutson/vue-triangle-separator
- Owner: alexknutson
- License: mit
- Created: 2020-08-23T06:49:52.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-12-28T22:13:12.000Z (over 3 years ago)
- Last Synced: 2025-03-18T01:35:18.334Z (2 months ago)
- Topics: separator, svg, triangle, vue, vue-component, vue-components, vuejs
- Language: Vue
- Homepage: https://alexknutson.github.io/vue-triangle-separator/
- Size: 1.79 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```bash
npm install vue-triangle-separator
```
## Usage
Import & Register the component
```javascript
import { TriangleSeparator } from "vue-triangle-separator";
export default {
components: {
TriangleSeparator
}
}
```
In your template, try one of the following...
```html
```
### Props
| Name | Details | Example |
| ---- | --- | ---- |
| size | default: `120` | [Example](https://alexknutson.github.io/vue-triangle-separator#size) |
| swap | default: `false` | [Example](https://alexknutson.github.io/vue-triangle-separator#swap-disabled) |
| rotate | default: `false` | [Example](https://alexknutson.github.io/vue-triangle-separator#rotate-enabled) |
| pull-up | default: `false` | [Example](https://alexknutson.github.io/vue-triangle-separator#pull-up-enabled) |
| fill-color | default: `rgb(38 60 89)` | [Example](https://alexknutson.github.io/vue-triangle-separator#fill-color) |
| gradientColorOne | default: `red` | [Example](https://alexknutson.github.io/vue-triangle-separator#swap-rotate-and-gradient) |
| gradientColorTwo | default: `blue` | [Example](https://alexknutson.github.io/vue-triangle-separator#swap-rotate-and-gradient) |
| zIndexOverride | default: `1` | [Example](https://alexknutson.github.io/vue-triangle-separator#swap-disabled) |
| disableHeight | default: `false` | [Example](https://alexknutson.github.io/vue-triangle-separator#disable-height) |
| shouldApplyGradient | default: `false` | [Example](https://alexknutson.github.io/vue-triangle-separator#swap-rotate-and-gradient)|