{"id":14990473,"url":"https://github.com/vanillawc/wc-arrow","last_synced_at":"2025-04-12T02:23:25.895Z","repository":{"id":101920765,"uuid":"274485624","full_name":"vanillawc/wc-arrow","owner":"vanillawc","description":"A web component for creating custom arrow HTML elements.","archived":false,"fork":false,"pushed_at":"2021-05-16T17:56:40.000Z","size":34,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T22:03:47.361Z","etag":null,"topics":["arrow","custom-elements","html","javascript","vanilla-web-component","web-components"],"latest_commit_sha":null,"homepage":"http://135.181.40.67/wc-arrow/","language":null,"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/vanillawc.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-06-23T18:57:40.000Z","updated_at":"2024-11-24T02:27:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"d324af9a-4102-46b8-bf0a-4f1f3099afc6","html_url":"https://github.com/vanillawc/wc-arrow","commit_stats":{"total_commits":21,"total_committers":3,"mean_commits":7.0,"dds":"0.47619047619047616","last_synced_commit":"d4c0c79f6d91e6eeeb8d06cd99352c90d0eb9330"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanillawc%2Fwc-arrow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanillawc%2Fwc-arrow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanillawc%2Fwc-arrow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanillawc%2Fwc-arrow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vanillawc","download_url":"https://codeload.github.com/vanillawc/wc-arrow/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248145855,"owners_count":21055219,"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":["arrow","custom-elements","html","javascript","vanilla-web-component","web-components"],"created_at":"2024-09-24T14:20:11.753Z","updated_at":"2025-04-12T02:23:25.874Z","avatar_url":"https://github.com/vanillawc.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/vanillawc/wc-arrow/releases\"\u003e\u003cimg src=\"https://badgen.net/github/tag/vanillawc/wc-arrow\" alt=\"GitHub Releases\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vanillawc/wc-arrow\"\u003e\u003cimg src=\"https://badgen.net/npm/v/@vanillawc/wc-arrow\" alt=\"NPM Releases\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=@vanillawc/wc-arrow\"\u003e\u003cimg src=\"https://badgen.net/bundlephobia/minzip/@vanillawc/wc-arrow\" alt=\"Bundlephobia\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/vanillawc/wc-arrow/actions\"\u003e\u003cimg src=\"https://github.com/vanillawc/wc-arrow/workflows/Latest/badge.svg\" alt=\"Latest Status\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/vanillawc/wc-arrow/actions\"\u003e\u003cimg src=\"https://github.com/vanillawc/wc-arrow/workflows/Release/badge.svg\" alt=\"Release Status\"\u003e\u003c/a\u003e\n\n  \u003ca href=\"https://discord.gg/aSWYgtybzV\"\u003e\u003cimg alt=\"Discord\" src=\"https://img.shields.io/discord/723296249121603604?color=%23738ADB\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n# wc-arrow\nA web component for creating custom arrow HTML elements.\n\nComponent custom attributes and CSS style together enable forming of various arrow figures.\n\nWc-arrow is a standalone vanilla JS web component that does not use shadow DOM.\n\nLive demo available [here.](http://135.181.40.67/wc-arrow/)\n\n## Including the component to an HTML file\n\n1. Import polyfill, this is not needed for modern browsers:\n\n    ```html\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.4.1/custom-elements.min.js\"\u003e\u003c/script\u003e\n    ```\n\n2. Import custom element:\n\n    ```html\n    \u003cscript defer src='wc-arrow.min.js'\u003e\u003c/script\u003e\n    ```\n\n3. Start using it!\n\n    ```html\n       \u003cwc-arrow\n         l=150 w=150 tail-w=40 peak-coll=50\u003e\n       \u003c/wc-arrow\u003e  \n    ```\n\n## Including the component from NPM\n\n1. Install and import polyfill, this is not needed for modern browsers:\n\n   See https://www.npmjs.com/package/@webcomponents/custom-elements\n\n2. Install wc-arrow NPM package:\n\n    ```console\n    npm i @vanillawc/wc-arrow\n    ```\n\n3. Import custom element:\n\n    ```javascript\n    import '@vanillawc/wc-arrow'\n    ```\n\n4. Start using it:\n\n   ```javascript\n   var arrow = document.createElement('wc-arrow')\n   arrow.setAttribute(\"l\", \"150\")\n   arrow.setAttribute(\"w\", \"150\")\n   arrow.setAttribute(\"tail-w\", \"40\")\n   arrow.setAttribute(\"peak-coll\", \"50\")\n   document.body.appendChild(menu)\n   ```\n## Display style\n\nElement display style can be set to flex, inline-flex or none.\n\nWhen the element renders itself, it sets its display style to flex, if the style is not flex, inline-flex or none.\n\n## Attributes\n\n### l\n\nDefines arrow length in pixels.\n\nHTML example:\n\n```html\n\u003cwc-arrow l=100 w=100\u003e \u003c/wc-arrow\u003e\n```\n\n### w\n\nDefines arrow width in pixels.\n\nHTML example:\n\n```html\n\u003cwc-arrow l=100 w=100\u003e \u003c/wc-arrow\u003e\n```\n\n### tail-l\n\nPercentage value that defines arrow tail length in relation to arrow length.\n\nValue must be a number between 0 and 100.\n\nDefault value is 50.\n\nHTML example:\n\n```html\n\u003cwc-arrow l=100 w=100 tail-l=20\u003e \u003c/wc-arrow\u003e\n```\n\n### tail-w\n\nPercentage value that defines arrow tail width in relation to arrow width.\n\nValue must be a number between 0 and 100.\n\nDefault value is 50.\n\nHTML example:\n\n```html\n\u003cwc-arrow l=100 w=100 tail-w=20\u003e \u003c/wc-arrow\u003e\n```\n\n### peak-l\n\nLength of arrow peak in pixels.\n\nIf this attribute is defined, tail-l attribute has no effect.\n\nHTML example:\n\n```html\n\u003cwc-arrow l=100 w=100 peak-l=20\u003e \u003c/wc-arrow\u003e\n```\n\n### rot\n\nArrow rotation in degrees.\n\nThis attribute rotates only the arrow within the custom element.\n\nTo rotate both the arrow and the element, transform style definition must be applied to the custom element.\n\nValue must be a number between -360 and 360.\n\nDefault value is 0.\n\nHTML example:\n\n```html\n\u003cwc-arrow l=100 w=100 rot=-90\u003e \u003c/wc-arrow\u003e\n```\n\n### tail-cont\n\nDefines tail contraction with a proportional value from 0 to 100.\n\n0 = no contraction at all\n\n100 = complete contraction\n\nDefault value is 0.\n\nHTML example:\n\n```html\n\u003cwc-arrow l=100 w=100 tail-cont=20\u003e \u003c/wc-arrow\u003e\n```\n\n### peak-coll\n\nDefines peak collapse with a proportional value from 0 to 100.\n\n0 = no collapse at all\n\n100 = complete collapse\n\nDefault value is 0.\n\nHTML example:\n\n```html\n\u003cwc-arrow l=100 w=100 peak-coll=20\u003e \u003c/wc-arrow\u003e\n```\n\n### unclosed\n\nDefines whether the arrow rear stroke is visible or not.\n\nBy default the rear stroke is visible.\n\nHTML example for setting the stroke invisible:\n\n```html\n\u003cwc-arrow l=100 w=100 unclosed\u003e \u003c/wc-arrow\u003e\n```\n Attribute can be disabled by assigning a string \"false\" as its value.\n\n### scale\n\nDefines the arrow scale.\n\nDefault value is 1.\n\nScaling is applied only to the arrow.\n\nTo scale both the arrow and the element, transform style definition must be applied to the custom element.\n\nHTML example:\n\n```html\n\u003cwc-arrow l=100 w=100 scale=0.5\u003e \u003c/wc-arrow\u003e\n```\n## Essential CSS properties\n\nstroke-width\n\nstroke\n\nfill\n\nbackground-color\n\nstroke-linejoin\n\nborder-radius\n\ntransform: rotate\n\ntransform: scale\n\nheight\n\nwidth\n\nTake a look at [live demo](http://135.181.40.67/wc-arrow/) to see how custom attributes and CSS properties are used together.\n\n## Usage example\n\nTake a look at file arrow.html in examples folder\n\n## License\n\nCopyright (c) 2020 Jussi Utunen\n\nLicensed under the MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanillawc%2Fwc-arrow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvanillawc%2Fwc-arrow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanillawc%2Fwc-arrow/lists"}