mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
8121faa1d4
* keep header styles with repositioned description text * `animated-image` move description to component * code style * `avatar` add summary from docs * `badge` add summary from docs * `breadcrumb` add summary from docs * `button` add summary from docs * lead sentence is now part of the header * `button-group` add summary from docs * `card` add summary from docs * `checkbox` add summary from docs * `color-picker` add summary from docs * `details` add summary from docs * `dialog` add summary from docs * `divider` add summary from docs * `drawer` add summary from docs * `dropdown` add summary from docs * `format-bytes` add summary from docs * `format-date` add summary from docs * `format-number` add summary from docs * `icon` add summary from docs * `icon-button` add summary from docs * `image-comparer` add summary from docs * `include` add summary from docs * `input` add summary from docs * `menu` add summary from docs * `menu-item` add summary from docs * `menu-label` add summary from docs * `popup` add summary from docs * `progressbar` add summary from docs * `progress-ring` add summary from docs * `radio` add summary from docs * `radio-button` add summary from docs * `range` add summary from docs * `rating` add summary from docs * `relative-time` add summary from docs * `select` add summary from docs * `skeleton` add summary from docs * `spinner` add summary from docs * `split-panel` add summary from docs * `switch` add summary from docs * `tab-group` add summary from docs * `tag` add summary from docs * `textarea` add summary from docs * `tooltip` add summary from docs * `visually-hidden` add summary from docs * `animation` add summary from docs * `breadcrumb-item` add summary from docs * `mutation-observer` add summary from docs * `radio-group` add summary from docs * `resize-observer` add summary from docs * `tab` add summary from docs * `tab-panel` add summary from docs * `tree` add summary from docs * `tree-item` add summary from docs * remove `title` for further usage of `Sl` classnames in docs * revert: use markdown parser for component summary
2.9 KiB
2.9 KiB
Tag
[component-header:sl-tag]
<sl-tag variant="primary">Primary</sl-tag>
<sl-tag variant="success">Success</sl-tag>
<sl-tag variant="neutral">Neutral</sl-tag>
<sl-tag variant="warning">Warning</sl-tag>
<sl-tag variant="danger">Danger</sl-tag>
import { SlTag } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlTag variant="primary">Primary</SlTag>
<SlTag variant="success">Success</SlTag>
<SlTag variant="neutral">Neutral</SlTag>
<SlTag variant="warning">Warning</SlTag>
<SlTag variant="danger">Danger</SlTag>
</>
);
Examples
Sizes
Use the size attribute to change a tab's size.
<sl-tag size="small">Small</sl-tag>
<sl-tag size="medium">Medium</sl-tag>
<sl-tag size="large">Large</sl-tag>
import { SlTag } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlTag size="small">Small</SlTag>
<SlTag size="medium">Medium</SlTag>
<SlTag size="large">Large</SlTag>
</>
);
Pill
Use the pill attribute to give tabs rounded edges.
<sl-tag size="small" pill>Small</sl-tag>
<sl-tag size="medium" pill>Medium</sl-tag>
<sl-tag size="large" pill>Large</sl-tag>
import { SlTag } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlTag size="small" pill>
Small
</SlTag>
<SlTag size="medium" pill>
Medium
</SlTag>
<SlTag size="large" pill>
Large
</SlTag>
</>
);
Removable
Use the removable attribute to add a remove button to the tag.
<div class="tags-removable">
<sl-tag size="small" removable>Small</sl-tag>
<sl-tag size="medium" removable>Medium</sl-tag>
<sl-tag size="large" removable>Large</sl-tag>
</div>
<script>
const div = document.querySelector('.tags-removable');
div.addEventListener('sl-remove', event => {
const tag = event.target;
tag.style.opacity = '0';
setTimeout(() => (tag.style.opacity = '1'), 2000);
});
</script>
<style>
.tags-removable sl-tag {
transition: var(--sl-transition-medium) opacity;
}
</style>
import { SlTag } from '@shoelace-style/shoelace/dist/react';
const css = `
.tags-removable sl-tag {
transition: var(--sl-transition-medium) opacity;
}
`;
const App = () => {
function handleRemove(event) {
const tag = event.target;
tag.style.opacity = '0';
setTimeout(() => (tag.style.opacity = '1'), 2000);
}
return (
<>
<div className="tags-removable">
<SlTag size="small" removable onSlRemove={handleRemove}>
Small
</SlTag>
<SlTag size="medium" removable onSlRemove={handleRemove}>
Medium
</SlTag>
<SlTag size="large" removable onSlRemove={handleRemove}>
Large
</SlTag>
</div>
<style>{css}</style>
</>
);
};
[component-metadata:sl-tag]