{"id":21721632,"url":"https://github.com/polydile/dile-tabs","last_synced_at":"2025-07-18T17:30:38.923Z","repository":{"id":35015820,"uuid":"196846376","full_name":"Polydile/dile-tabs","owner":"Polydile","description":"Web Component to create a tabs interface, based on LitElement","archived":true,"fork":false,"pushed_at":"2025-02-19T18:20:52.000Z","size":2593,"stargazers_count":5,"open_issues_count":22,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-07T09:19:56.179Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://dile-tabs.polydile.com/","language":"JavaScript","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/Polydile.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}},"created_at":"2019-07-14T14:29:03.000Z","updated_at":"2025-02-19T18:21:08.000Z","dependencies_parsed_at":"2023-01-15T12:04:26.040Z","dependency_job_id":null,"html_url":"https://github.com/Polydile/dile-tabs","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/Polydile/dile-tabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Polydile","download_url":"https://codeload.github.com/Polydile/dile-tabs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-tabs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265801585,"owners_count":23830438,"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":[],"created_at":"2024-11-26T02:18:08.474Z","updated_at":"2025-07-18T17:30:38.892Z","avatar_url":"https://github.com/Polydile.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Moved!\n\n**This package has moved** and is now available at [@dile/ui](https://github.com/Polydile/dile-components). Please update your dependencies. This repository is no longer maintained. You can read the documentation at [Dile Components](https://dile-components.com/).\n\n# \\\u003cdile-tabs\u003e\n\nWeb Component to implement a tabs interface. Based on LitElement\n\nGo to [DEMOS page](https://dile-tabs.polydile.com/)\n\n## Installation\n\n```bash\nnpm i dile-tabs\n```\n\n## Usage\n\n```\u003cdile-tabs\u003e``` is a component you may use to select one of several posible values. It shows to the user creating a tabs interface.\n\nTo use the  component you need include (or import) the component script, and then use a markup based on two tags. First of them is ```\u003cdile-tabs\u003e```, which is the entire set of tabs. The second component is ```\u003cdile-tab\u003e``` (in singular), which is one of the tabs of the interface.\n\n\n```html\n\u003cscript type=\"module\"\u003e\n  import 'dile-tabs/dile-tabs.js';\n\u003c/script\u003e\n\n\u003cdile-tabs selected=\"2\"\u003e\n    \u003cdile-tab\u003eOne\u003c/dile-tab\u003e\n    \u003cdile-tab\u003eTwo\u003c/dile-tab\u003e\n    \u003cdile-tab\u003eThree\u003c/dile-tab\u003e\n    \u003cdile-tab\u003eFour\u003c/dile-tab\u003e\n  \u003c/dile-tabs\u003e\n```\n\n## Properties\n\nThe component has the properties bellow:\n\n### selected:\n\nThis property sets the currently selected tab of the interface. By default the selected value need to be an integer, specifying th index of the selected tab (starting at 0 for the first tab, 1 for the second...).\n\n### attrForSelected:\n\nThis property tells the ```\u003cdile-tabs\u003e``` component which attribute need to match the ```selected``` property to set the active tab. By default ```atrrForSelected``` is ```undefined```. In that case the ```selected``` property should be an integer and match to the index of the tab. If you set ```atrrForSelected``` with a value, then the ```selected``` property will be matched with the value of the attribute named in ```attrForSelected```.\n\nThe next example show how to use the attrForSelected property\n\n```html\n\u003cdile-tabs selected=\"posts\" attrForSelected=\"name\"\u003e\n  \u003cdile-tab name=\"users\"\u003eUsers\u003c/dile-tab\u003e\n  \u003cdile-tab name=\"posts\"\u003ePosts\u003c/dile-tab\u003e\n  \u003cdile-tab name=\"articles\"\u003eArticles\u003c/dile-tab\u003e\n  \u003cdile-tab name=\"faq\"\u003eFAQ\u003c/dile-tab\u003e\n  \u003cdile-tab name=\"contact\"\u003eContact\u003c/dile-tab\u003e\n\u003c/dile-tabs\u003e\n```\n\n## Events\n\n### dile-tabs-selected-changed:\n\nWhen ```selected``` property changes by a user interaction inside the ```\u003cdile-tabs\u003e``` component, it dispatch the ```dile-tabs-selected-changed``` custom event. You will recive the new selected value in the ```detail``` event object property.\n\n## CSS custom properties\n\nYou can customize the tabs using the CSS custom properties bellow.\n\nCustom property | Description | Default\n----------------|-------------|---------\n--dile-tab-text-color | The tab text color | #666\n--dile-tab-background-color | The tab background color | Transparent\n--dile-tab-selected-text-color | The tab text color | #fff\n--dile-tab-selected-background-color | The tab background color | #039be5;\n--dile-label-padding | Content padding of the tab | 8px 12px 6px 12px\n--dile-tab-selected-line-height | Defines selected tab line height | 5px\n--dile-tab-selected-line-color | Defines selected tab line color | #0070c0\n--dile-tab-border-radius | Tab top-left \u0026 top-right border radius | 4px\n--dile-tab-border | Unselected tab border | none\n--dile-tab-selected-border | Selected tab border | none\n--dile-tab-font-weight | Tab font weight | normal\n--dile-tab-text-transform | Tab text transform | uppercase\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolydile%2Fdile-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolydile%2Fdile-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolydile%2Fdile-tabs/lists"}