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
(default)	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, 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/callout/callout.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/callout/callout.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/callout/callout.js";