Callout

<pc-callout>

0.5.1

Experimentell

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

Callouts are used to display important messages inline.

<pc-callout>    <pc-icon        library="default"        icon-style="solid"        name="circle-info"        slot="icon"    ></pc-icon>    This is a standard callout. You can customise its content and even the icon.</pc-callout>

Code

Edit

Demos

Appearances

Set the appearance attribute to change the callout’s appearance.

<div class="pc-stack">    <pc-callout appearance="primary">        <pc-icon            library="default"            icon-style="solid"            name="circle-info"            slot="icon"        ></pc-icon>        <strong>This is super informative</strong><br />        You can tell by how pretty the callout is.    </pc-callout>    <pc-callout appearance="success">        <pc-icon            library="default"            icon-style="solid"            name="circle-check"            slot="icon"        ></pc-icon>        <strong>Your changes have been saved</strong><br />        You can safely exit the app now.    </pc-callout>    <pc-callout appearance="neutral">        <pc-icon            library="default"            icon-style="solid"            name="gear"            slot="icon"        ></pc-icon>        <strong>Your settings have been updated</strong><br />        Settings will take effect on next login.    </pc-callout>    <pc-callout appearance="warning">        <pc-icon            library="default"            icon-style="solid"            name="triangle-exclamation"            slot="icon"        ></pc-icon>        <strong>Your session has ended</strong><br />        Please login again to continue.    </pc-callout>    <pc-callout appearance="danger">        <pc-icon            library="default"            icon-style="solid"            name="circle-exclamation"            slot="icon"        ></pc-icon>        <strong>Your account has been deleted</strong><br />        We’re very sorry to see you go!    </pc-callout></div>

Code

Edit

Variants

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

<div class="pc-stack">    <pc-callout appearance="primary" variant="accent">        <pc-icon            library="default"            icon-style="solid"            name="square-check"            slot="icon"        ></pc-icon>        This <strong>accent</strong> callout draws attention.    </pc-callout>    <pc-callout appearance="primary" variant="filled outlined">        <pc-icon            library="default"            icon-style="solid"            name="fill-drip"            slot="icon"        ></pc-icon>        This callout is both <strong>filled</strong> and <strong>outlined</strong>.    </pc-callout>    <pc-callout appearance="primary" variant="filled">        <pc-icon            library="default"            icon-style="solid"            name="fill"            slot="icon"        ></pc-icon>        This callout is only <strong>filled</strong>.    </pc-callout>    <pc-callout appearance="primary" variant="outlined">        <pc-icon            library="default"            icon-style="solid"            name="lines-leaning"            slot="icon"        ></pc-icon>        Here’s an <strong>outlined</strong> callout.    </pc-callout>    <pc-callout appearance="primary" variant="plain">        <pc-icon            library="default"            icon-style="solid"            name="font"            slot="icon"        ></pc-icon>        No bells and whistles on this <strong>plain</strong> callout.    </pc-callout></div>

Code

Edit

Sizes

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

<div class="pc-stack">    <pc-callout size="large">        <pc-icon            library="default"            icon-style="solid"            name="circle-info"            slot="icon"        ></pc-icon>        This is meant to be <strong>very</strong> emphasised.    </pc-callout>    <pc-callout size="medium">        <pc-icon            library="default"            icon-style="solid"            name="circle-info"            slot="icon"        ></pc-icon>        This is a normal‐sized callout.    </pc-callout>    <pc-callout size="small">        <pc-icon            library="default"            icon-style="solid"            name="circle-info"            slot="icon"        ></pc-icon>        Just a small tip!    </pc-callout></div>

Code

Edit

No icons

Icons are optional. Simply omit the icon slot if you don’t want them.

<pc-callout appearance="primary">    Nothing fancy here, just a simple callout.</pc-callout>

Code

Edit

Eigenschaften

Name	Beschreibung	Standard
`appearance`	The callout’s appearance. Typ: `"primary" \| "success" \| "neutral" \| "warning" \| "danger"`	`"primary"`
`variant`	The callout’s variant. Typ: `"accent" \| "filled" \| "outlined" \| "filled outlined" \| "plain"`	`"filled outlined"`
`size`	The callout’s size. Typ: `"small" \| "medium" \| "large"`	`"medium"`
`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 callout’s content.
`icon`	An informational icon.

Erfahre mehr über die Benutzung von Slots.

Parts

Name	Beschreibung
`base`	The component’s base wrapper.
`icon`	The callout’s icon.
`message`	The callout’s content.

Erfahre mehr über das Anpassen von CSS‐Parts.

Importieren

Wenn du den Auto‐Loader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du dich für „Cherry‐Picking“ entschieden hast, 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.6/cdn/components/callout/callout.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.6/cdn/components/callout/callout.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/callout/callout.js";