Callout

<pc-callout>

0.5.1

experimental

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.

<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>

<br />

<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>

<br />

<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>

<br />

<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>

<br />

<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>

Code

Edit

Variants

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

<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>

<br />

<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>

<br />

<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>

<br />

<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>

<br />

<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>

Code

Edit

Sizes

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

<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>

<br />

<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>

<br />

<pc-callout size="small">
    <pc-icon
        library="default"
        icon-style="solid"
        name="circle-info"
        slot="icon"
    ></pc-icon>
    Just a small tip!
</pc-callout>

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" \| "plain" \| "accent outlined" \| "filled outlined"`	`"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 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/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.3/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";