Zum Hauptinhalt springen Seitenleiste
Zum Inhaltsverzeichnis springen

    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.

    Edit

    Variants#

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

    Edit

    Rounded badges#

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

    Edit

    Pulsating badges#

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

    Edit

    Properties#

    NameDescriptionReflectsDefault
    appearanceThe badge’s appearance.
    Type: "primary" | "success" | "neutral" | "warning" | "danger"    		 "primary"
    variantThe badge’s variant.
    Type: "accent" | "filled" | "outlined"    		 "accent"
    roundedGives the badge a rounded rectangle shape.
    Type: boolean    		 false
    pulseMakes the badge pulsate to draw attention.
    Type: boolean    		 false
    updateComplete A read‐only promise that resolves when the component has finished updating. ‐

    Learn more about attributes and properties.

    Slots#

    NameDescription
    (default)The badge’s content.

    Learn more about using slots.

    Parts#

    NameDescription
    baseThe component’s base wrapper.

    Learn more about customising CSS parts.

    Importing#

    If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.

    CDN (script tag) CDN (import) npm (import)

    To manually import this component from the CDN, copy this code snippet and paste it in your HTML. 

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

    To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file. 

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

    To manually import this component from npm, copy this code snippet and paste it in your JavaScript file. 

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

    Wir würden uns freuen, von dir zu hören. Bitte kontaktiere uns bei Fragen oder Anliegen, die du hast.

    Du kannst uns per E‐Mail unter placer.coc.reports+contact@gmail.com erreichen.

    Wir freuen uns darauf, von dir zu hören!

    Alles klar!     Gefährliche Lande

    Ui! Du bist in die gefährlichen Lande von Placer Toolkit geraten. Version 0 ist veraltet und entspricht nicht den EU‐Datenschutzstandards, einschließlich DSGVO.

    Willst du die neuesten Kräfte, Sicherheit und Compliance? Bleib bei der aktuellen Version von Placer Toolkit!

    Ups! Aufladen!