Badge

<pc-badge>

0.1.0

experimental

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

Badges are used to draw attention and display statuses or counts.

<pc-badge>Badge</pc-badge>

Code

Edit

Demos#

Appearances#

Use the appearance attribute to set the badge’s appearance.

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

Code

Edit

Variants#

Use the variant attribute to set the badge’s variant.

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

Code

Edit

Rounded badges#

Use the rounded attribute to give the badge a rounded rectangle shape.

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

Code

Edit

Pulsating badges#

Use the pulse attribute to draw attention to the badge with a subtle animation.

<div class="badge-pulse">
    <pc-badge appearance="primary" pulse>1</pc-badge>
    <pc-badge appearance="success" pulse>1</pc-badge>
    <pc-badge appearance="neutral" pulse>1</pc-badge>
    <pc-badge appearance="warning" pulse>1</pc-badge>
    <pc-badge appearance="danger" pulse>1</pc-badge>
</div>

<style>
    .badge-pulse pc-badge:not(:last-of-type) {
        margin-inline-end: var(--pc-spacing-l);
    }
</style>

Code

Edit

Eigenschaften#

Name	Beschreibung	Standard
`appearance`	The badge’s appearance. Typ: `"primary" \| "success" \| "neutral" \| "warning" \| "danger"`	`"primary"`
`variant`	The badge’s variant. Typ: `"accent" \| "filled" \| "outlined"`	`"accent"`
`rounded`	Gives the badge a rounded rectangle shape. Typ: `boolean`	`false`
`pulse`	Makes the badge pulsate to draw attention. 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
(default)	The badge’s content.

Erfahre mehr über die Benutzung von Slots.

Parts#

Name	Beschreibung
`base`	The component’s base wrapper.

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, kopiere dieses Code‐Snippet und füge es in dein HTML ein.

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

Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

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

Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

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