{"id":17617401,"url":"https://github.com/alexknutson/vue-triangle-separator","last_synced_at":"2025-03-30T00:41:18.383Z","repository":{"id":143060801,"uuid":"289632339","full_name":"alexknutson/vue-triangle-separator","owner":"alexknutson","description":"A simple Vue component that creates an SVG-powered triangle. Combine them to create interesting content separators!","archived":false,"fork":false,"pushed_at":"2021-12-28T22:13:12.000Z","size":1873,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T01:35:18.334Z","etag":null,"topics":["separator","svg","triangle","vue","vue-component","vue-components","vuejs"],"latest_commit_sha":null,"homepage":"https://alexknutson.github.io/vue-triangle-separator/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexknutson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-23T06:49:52.000Z","updated_at":"2021-12-28T22:13:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"f4794575-2525-4f8f-88c2-3f19d701b4de","html_url":"https://github.com/alexknutson/vue-triangle-separator","commit_stats":{"total_commits":45,"total_committers":1,"mean_commits":45.0,"dds":0.0,"last_synced_commit":"f126b99d3129c2dc08bb2e74eb290e919a16ad3b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexknutson%2Fvue-triangle-separator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexknutson%2Fvue-triangle-separator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexknutson%2Fvue-triangle-separator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexknutson%2Fvue-triangle-separator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexknutson","download_url":"https://codeload.github.com/alexknutson/vue-triangle-separator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246262492,"owners_count":20749170,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["separator","svg","triangle","vue","vue-component","vue-components","vuejs"],"created_at":"2024-10-22T19:13:30.369Z","updated_at":"2025-03-30T00:41:18.360Z","avatar_url":"https://github.com/alexknutson.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-triangle-separator\nQuickly add full-bleed SVG-powered triangle separators to your page.\n\n## Demo \u0026 Examples\nLive demo - https://alexknutson.github.io/vue-triangle-separator/\n\n![npm](https://img.shields.io/npm/v/vue-triangle-separator) ![npm](https://img.shields.io/npm/dt/vue-triangle-separator) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-triangle-separator) ![npm bundle size](https://img.shields.io/bundlephobia/min/vue-triangle-separator)\n\n## Install\n```bash\n npm install vue-triangle-separator\n ```\n\n## Usage\nImport \u0026 Register the component\n```javascript\nimport { TriangleSeparator } from \"vue-triangle-separator\";\n\nexport default {\n    components: {\n        TriangleSeparator\n    }\n}\n```\n\nIn your template, try one of the following...\n\n```html\n\u003ctemplate\u003e\n    \u003c!-- The bare minimum --\u003e\n    \u003cTriangleSeparator\u003e\u003c/TriangleSeparator\u003e\n    \u003c!-- For a gradient-filled triangle --\u003e\n    \u003cTriangleSeparator\n        gradient-color-one=\"red\"\n        gradient-color-two=\"blue\"\n        should-apply-gradient\n        swap\n        rotate\n    \u003e\u003c/TriangleSeparator\u003e\n    \u003c!-- or a solid fill color --\u003e\n    \u003cTriangleSeparator fill-color=\"#420999\"\u003e\u003c/TriangleSeparator\u003e\n    \u003c!-- maybe a bigger triangle? --\u003e  \n    \u003cTriangleSeparator :size=\"250\"\u003e\u003c/TriangleSeparator\u003e\n\u003c/template\u003e\n```\n\n### Props\n| Name | Details | Example |\n| ---- | --- | ---- |\n| size | default: `120` | [Example](https://alexknutson.github.io/vue-triangle-separator#size) |\n| swap | default: `false` | [Example](https://alexknutson.github.io/vue-triangle-separator#swap-disabled) |\n| rotate | default: `false` | [Example](https://alexknutson.github.io/vue-triangle-separator#rotate-enabled) |\n| pull-up | default: `false` | [Example](https://alexknutson.github.io/vue-triangle-separator#pull-up-enabled) |\n| fill-color | default: `rgb(38 60 89)` | [Example](https://alexknutson.github.io/vue-triangle-separator#fill-color) |\n| gradientColorOne | default: `red` | [Example](https://alexknutson.github.io/vue-triangle-separator#swap-rotate-and-gradient) |\n| gradientColorTwo | default: `blue` | [Example](https://alexknutson.github.io/vue-triangle-separator#swap-rotate-and-gradient) |\n| zIndexOverride | default: `1` | [Example](https://alexknutson.github.io/vue-triangle-separator#swap-disabled) |\n| disableHeight | default: `false` | [Example](https://alexknutson.github.io/vue-triangle-separator#disable-height) |\n| shouldApplyGradient | default: `false` | [Example](https://alexknutson.github.io/vue-triangle-separator#swap-rotate-and-gradient)|\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexknutson%2Fvue-triangle-separator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexknutson%2Fvue-triangle-separator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexknutson%2Fvue-triangle-separator/lists"}