https://github.com/polydile/dile-tag
Web Component for a customized tag text, based on LitElement.
https://github.com/polydile/dile-tag
litelement tag webcomponents
Last synced: about 2 months ago
JSON representation
Web Component for a customized tag text, based on LitElement.
- Host: GitHub
- URL: https://github.com/polydile/dile-tag
- Owner: Polydile
- License: mit
- Created: 2020-04-18T16:21:05.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T03:46:15.000Z (over 3 years ago)
- Last Synced: 2025-10-08T10:52:35.660Z (8 months ago)
- Topics: litelement, tag, webcomponents
- Language: JavaScript
- Homepage:
- Size: 2.38 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# \
Web Component for a customized tag text, based on LitElement.
More details: [Go to DEMO page](https://dile-tag.polydile.com)
## Installation
```bash
npm i dile-tag
```
## Usage
```html
import 'dile-tag/dile-tag.js';
```
## Properties
- label: The label tag
- icon: The icon tag
- round: Customize round tag
- shadow: Customize shadow tag
- upper: Customize uppercase text tag
- allowClose: Allow add a button close in tag
## Styling
Custom property | Description | Default
----------------|-------------|---------
--dile-tag-text-color | Main Text Color | #000
--dile-tag-background | Main Background Color | #ddd
--dile-tag-padding | Main Padding Block | 0.5rem
## Events
### closed
Fires whenever click in button close
```javascript
dileTag.addEventListener('closed', () => console.log('closed'));
```
## Run the project
### 1. Install dependencies
```npm i```
### 2. Run server
```npm start```
### 3. Run storybook
```npm run storybook```