https://github.com/polydile/dile-tabs
Web Component to create a tabs interface, based on LitElement
https://github.com/polydile/dile-tabs
Last synced: 12 months ago
JSON representation
Web Component to create a tabs interface, based on LitElement
- Host: GitHub
- URL: https://github.com/polydile/dile-tabs
- Owner: Polydile
- License: mit
- Archived: true
- Created: 2019-07-14T14:29:03.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-02-19T18:20:52.000Z (over 1 year ago)
- Last Synced: 2025-07-07T09:19:56.179Z (12 months ago)
- Language: JavaScript
- Homepage: https://dile-tabs.polydile.com/
- Size: 2.47 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Moved!
**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/).
# \
Web Component to implement a tabs interface. Based on LitElement
Go to [DEMOS page](https://dile-tabs.polydile.com/)
## Installation
```bash
npm i dile-tabs
```
## Usage
`````` is a component you may use to select one of several posible values. It shows to the user creating a tabs interface.
To use the component you need include (or import) the component script, and then use a markup based on two tags. First of them is ``````, which is the entire set of tabs. The second component is `````` (in singular), which is one of the tabs of the interface.
```html
import 'dile-tabs/dile-tabs.js';
One
Two
Three
Four
```
## Properties
The component has the properties bellow:
### selected:
This 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...).
### attrForSelected:
This property tells the `````` 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```.
The next example show how to use the attrForSelected property
```html
Users
Posts
Articles
FAQ
Contact
```
## Events
### dile-tabs-selected-changed:
When ```selected``` property changes by a user interaction inside the `````` component, it dispatch the ```dile-tabs-selected-changed``` custom event. You will recive the new selected value in the ```detail``` event object property.
## CSS custom properties
You can customize the tabs using the CSS custom properties bellow.
Custom property | Description | Default
----------------|-------------|---------
--dile-tab-text-color | The tab text color | #666
--dile-tab-background-color | The tab background color | Transparent
--dile-tab-selected-text-color | The tab text color | #fff
--dile-tab-selected-background-color | The tab background color | #039be5;
--dile-label-padding | Content padding of the tab | 8px 12px 6px 12px
--dile-tab-selected-line-height | Defines selected tab line height | 5px
--dile-tab-selected-line-color | Defines selected tab line color | #0070c0
--dile-tab-border-radius | Tab top-left & top-right border radius | 4px
--dile-tab-border | Unselected tab border | none
--dile-tab-selected-border | Selected tab border | none
--dile-tab-font-weight | Tab font weight | normal
--dile-tab-text-transform | Tab text transform | uppercase