/dile-tag

Web Component for a customized tag text, based on LitElement.

Primary LanguageJavaScriptMIT LicenseMIT

<dile-tag>

Web Component for a customized tag text, based on LitElement.

More details: Go to DEMO page

Installation

npm i dile-tag

Usage

<script type="module">
  import 'dile-tag/dile-tag.js';
</script>

<dile-tag label="My fisrt tag" round shadow></dile-tag>

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

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