Tag

<pc-tag>

0.5.1

experimental

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

Tags are used as labels to organise things or to indicate a selection.

<pc-tag>Tag</pc-tag>

Code

Edit

Appearances

Use the appearance attribute to change the tag’s appearance.

<pc-tag appearance="primary">Primary</pc-tag>
<pc-tag appearance="success">Success</pc-tag>
<pc-tag appearance="neutral">Neutral</pc-tag>
<pc-tag appearance="warning">Warning</pc-tag>
<pc-tag appearance="danger">Danger</pc-tag>

Code

Edit

Variants

Use the variant attribute to change the tag’s variant.

<div style="margin-block-end: var(--pc-spacing-m)">
    <pc-tag appearance="primary" variant="accent">Accent</pc-tag>
    <pc-tag appearance="primary" variant="filled outlined">F + O</pc-tag>
    <pc-tag appearance="primary" variant="filled">Filled</pc-tag>
    <pc-tag appearance="primary" variant="outlined">Outlined</pc-tag>
</div>
<div style="margin-block-end: var(--pc-spacing-m)">
    <pc-tag appearance="success" variant="accent">Accent</pc-tag>
    <pc-tag appearance="success" variant="filled outlined">F + O</pc-tag>
    <pc-tag appearance="success" variant="filled">Filled</pc-tag>
    <pc-tag appearance="success" variant="outlined">Outlined</pc-tag>
</div>
<div style="margin-block-end: var(--pc-spacing-m)">
    <pc-tag appearance="neutral" variant="accent">Accent</pc-tag>
    <pc-tag appearance="neutral" variant="filled outlined">F + O</pc-tag>
    <pc-tag appearance="neutral" variant="filled">Filled</pc-tag>
    <pc-tag appearance="neutral" variant="outlined">Outlined</pc-tag>
</div>
<div style="margin-block-end: var(--pc-spacing-m)">
    <pc-tag appearance="warning" variant="accent">Accent</pc-tag>
    <pc-tag appearance="warning" variant="filled outlined">F + O</pc-tag>
    <pc-tag appearance="warning" variant="filled">Filled</pc-tag>
    <pc-tag appearance="warning" variant="outlined">Outlined</pc-tag>
</div>
<div>
    <pc-tag appearance="danger" variant="accent">Accent</pc-tag>
    <pc-tag appearance="danger" variant="filled outlined">F + O</pc-tag>
    <pc-tag appearance="danger" variant="filled">Filled</pc-tag>
    <pc-tag appearance="danger" variant="outlined">Outlined</pc-tag>
</div>

Code

Edit

Sizes

Use the size attribute to change the tag’s size.

<pc-tag size="small">Small</pc-tag>
<pc-tag size="medium">Medium</pc-tag>
<pc-tag size="large">Large</pc-tag>

Code

Edit

Pill

Use the pill attribute to give tags a pill‐shaped look.

<pc-tag size="small" pill>Small</pc-tag>
<pc-tag size="medium" pill>Medium</pc-tag>
<pc-tag size="large" pill>Large</pc-tag>

Code

Edit

Removable

Use the removable attribute to add a remove button to the tag.

<div class="tags-removable">
    <pc-tag size="small" removable>Small</pc-tag>
    <pc-tag size="medium" removable>Medium</pc-tag>
    <pc-tag size="large" removable>Large</pc-tag>
</div>

<script>
    const tags = document.querySelector(".tags-removable");

    tags.addEventListener("pc-remove", (event) => {
        const tag = event.target;
        tag.style.opacity = "0";
        setTimeout(() => {
            tag.style.opacity = "1";
        }, 2000);
    });
</script>

<style>
    .tags-removable pc-tag {
        transition: opacity var(--pc-transition-fast) ease-in-out;
    }
</style>

Code

Edit

Eigenschaften

Name	Beschreibung	Standard
`appearance`	The tag’s appearance. Typ: `"primary" \| "success" \| "neutral" \| "warning" \| "danger"`	`"neutral"`
`variant`	The tag’s variant. Typ: `"accent" \| "filled" \| "outlined" \| "filled outlined"`	`"filled outlined"`
`size`	The tag’s size. Typ: `"small" \| "medium" \| "large"`	`"medium"`
`pill`	Draws a pill‐style tag. Typ: `boolean`	`false`
`removable`	Adds a remove button to the tag. Typ: `boolean`	`false`
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.	‐

Erfahre mehr über Attribute und Eigenschaften.

Slots

Name	Beschreibung
(Standard)	The tag’s content.

Erfahre mehr über die Benutzung von Slots.

Events

Name	Beschreibung	Event‐Detail
`pc-remove`	Emitted when the remove button is pressed.	‐

Erfahre mehr über Events.

Parts

Name	Beschreibung
`content`	The tag’s content.
`remove-button`	The tag’s remove button, a `<pc-button>`.
`remove-button-base`	The remove button’s base part.

Erfahre mehr über das Anpassen von CSS‐Parts.

Importieren

Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/tag/tag.js"></script> 

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/tag/tag.js"; 

Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

import "placer-toolkit/dist/components/tag/tag.js";

Abhängigkeiten

Diese Komponente importiert automatisch folgende Komponenten:

Button