js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 11:09:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix clearable tags demo

Browse Source
This commit is contained in:
Cory LaViska
2020-07-20 16:20:58 -04:00
parent 61f06ca148
commit 27f2f0d769
1 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/components/tag.md
View File

@@ -39,9 +39,27 @@ Use the `pill` prop to give tabs rounded edges.
Use the `clearable` attribute to add a clear button to the tag.
```html preview
<sl-tag size="small" clearable>Small</sl-tag>
<sl-tag size="medium" clearable>Medium</sl-tag>
<sl-tag size="large" clearable>Large</sl-tag>
<div class="tags-clearable">
<sl-tag size="small" clearable>Small</sl-tag>
<sl-tag size="medium" clearable>Medium</sl-tag>
<sl-tag size="large" clearable>Large</sl-tag>
</div>
<script>
const div = document.querySelector('.tags-clearable');
div.addEventListener('slClear', event => {
const tag = event.target;
tag.style.opacity = '0';
setTimeout(() => tag.style.opacity = '1', 2000);
});
</script>
<style>
.tags-clearable sl-tag {
transition: var(--sl-transition-medium) opacity;
}
</style>
```
[component-metadata:sl-tag]