Zum Hauptinhalt springen Seitenleiste
Zum Inhaltsverzeichnis springen

    Button

    <pc-button> 0.1.0 experimental

    Buttons repräsentieren Aktionen, die dem/der Nutzer:in zur Verfügung stehen.

    <pc-button>Button</pc-button>
    Code Edit

    Demos#

    Erscheinungsbild#

    Verwende das appearance‐Attribut, um das Erscheinungsbild des Buttons festzulegen.

    Edit

    Varianten#

    Verwende das variant‐Attribut, um die Variante des Buttons festzulegen.

    Edit

    Größen#

    Verwende das size‐Attribut, um die Größe des Buttons zu ändern.

    Edit

    Pillenform#

    Verwende das pill‐Attribut, um Buttons ein abgerundetes, pillenförmiges Aussehen zu verleihen.

    Edit

    Oft ist es hilfreich, einen Button zu haben, der wie ein Link funktioniert. Das ist möglich, indem du das href‐Attribut setzt, wodurch die Komponente unter der Haube als <a> gerendert wird. Dadurch erhältst du das gesamte Standard‐Link‐Verhalten des Browsers (z. B. Ctrl oder Shift + ) und kannst zudem die Attribute target und download nutzen.

    Edit

    Wenn ein target gesetzt ist, erhält der Link aus Sicherheitsgründen automatisch rel="noreferrer noopener".

    Icon‐Buttons#

    Wenn nur ein Icon in den Standard‐Slot eingefügt wird, wird der Button zu einem Icon‐Button. In diesem Fall ist es wichtig, dem Icon ein Label für Nutzer:innen mit assistiven Technologien zu geben. Icon‐Buttons können jedes Erscheinungsbild und jede Variante nutzen.

    Edit

    Benutzerdefinierte Breite#

    Wie erwartet können Buttons eine benutzerdefinierte Breite erhalten, indem Inline‐Styles an die Komponente übergeben werden (oder eine CSS‐Klasse verwendet wird). Das ist nützlich, um Buttons auf kleineren Bildschirmen über die volle Breite ihres Containers zu strecken.

    Edit

    Präfixe und Suffixe#

    Verwende die Slots prefix und suffix, um Icons hinzuzufügen.

    Edit

    Deaktiviert#

    Verwende das disabled‐Attribut, um einen Button zu deaktivieren.

    Edit

    Eigene Styles#

    Dieses Beispiel zeigt, wie du Buttons mit einer benutzerdefinierten Klasse stylen kannst. Dies ist der empfohlene Ansatz, wenn du zusätzliche Erscheinungsbilder hinzufügen möchtest. Um ein bestehendes Erscheinungsbild anzupassen, ändere den Selektor so, dass er das appearance‐Attribut des Buttons anspricht anstatt einer Klasse (z. B. pc-button[appearance="primary"]).

    Edit

    Eigenschaften#

    NameBeschreibungReflektiertStandard
    appearanceThe button’s appearance.
    Typ: "primary" | "success" | "neutral" | "warning" | "danger" | "text"    		 "neutral"
    variantThe button’s variant.
    Typ: "accent" | "filled" | "outlined" | "plain"    		 "accent"
    sizeThe button’s size.
    Typ: "small" | "medium" | "large"    		 "medium"
    disabledDisables the button.
    Typ: boolean    		 false
    pillDraws a pill‐style button.
    Typ: boolean    		 false
    typeThe type of button. Note that the default value is button instead of submit, which is opposite of how native <button> elements behave. When the type is submit, the button will submit the surrounding form.
    Typ: "button" | "submit" | "reset"    		 "button"
    nameThe name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
    Typ: string    		 ""
    valueThe value of the button, submitted as a pair with the button’s name as part of the form data, but only when this button is the submitter. This attribute is ignored when the href attribute is present.
    Typ: string    		 ""
    hrefWhen set, the underlying button will be rendered as an <a> with this href instead of a <button>.
    Typ: string    		 ""
    targetTells the browser where to open the link. It should only be used when the href attribute is present.
    Typ: "_blank" | "_parent" | "_self" | "_top" | undefined    		 ‐
    relWhen using the href attribute, this attribute will map to the underlying link’s rel attribute. Unlike regular links, the default set for this attribute is noreferrer noopener to prevent security exploits. However, if you’re using target to point to a specific tab or window, this will prevent that from working properly. You can remove or change the default value by setting the attribute to an empty string or a value of your choice, respectively.
    Typ: string    		 "noreferrer noopener"
    downloadTells the browser to download the linked file as this file name. Only used when the href attribute is present.
    Typ: string | undefined    		 ‐
    formThis is the “form owner” to associate the button with. If omitted, the closest containing form will be used instead. The value of this attribute must be an id of a form in the same document or shadow root as the button.
    Typ: string | undefined    		 ‐
    formAction
    formaction    		Used to override the form owner’s action attribute.
    Typ: string | undefined    		 ‐
    formEnctype
    formenctype    		Used to override the form owner’s enctype attribute.
    Typ: "application/x-www-form-url-encoded" | "multipart/form-data" | "text/plain" | undefined    		 ‐
    formMethod
    formmethod    		Used to override the form owner’s method attribute.
    Typ: "GET" | "POST" | undefined    		 ‐
    formNoValidate
    formnovalidate    		Used to override the form owner’s novalidate attribute.
    Typ: boolean | undefined    		 ‐
    formTarget
    formtarget    		Used to override the form owner’s target attribute.
    Typ: "_self" | "_blank" | "_parent" | "_top" | string | undefined    		 ‐
    validityGets the validity state object. ‐
    validationMessageGets the validation message. ‐
    updateComplete Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde. ‐

    Erfahre mehr über Attribute und Eigenschaften.

    Slots#

    NameBeschreibung
    (default)The button’s label.
    prefixA presentational prefix icon or similar element.
    suffixA presentational suffix icon or similar element.

    Erfahre mehr über die Benutzung von Slots.

    Methoden#

    NameBeschreibungArgumente
    click()Simulates a click on the button.‐
    focus()Focuses the button.options: FocusOptions
    blur()Unfocuses the button (i.e., blurs it).‐
    checkValidity()Checks for validity but doesn’t show a validation message. Returns true when valid and false when invalid.‐
    getForm()Gets the associated form if one exists.‐
    reportValidity()Checks for validity and shows the browser’s validation message if the control is invalid.‐
    setCustomValidity()Sets a custom validation message. Pass an empty string to restore validity.message: string

    Erfahre mehr über Methoden.

    Events#

    NameBeschreibungEvent‐Detail
    pc-focusEmitted when the button gains focus.‐
    pc-blurEmitted when the button loses focus (i.e., is blurred).‐
    pc-invalidEmitted when the form control has been checked for validity and its constraints aren’t satisfied.‐

    Erfahre mehr über Events.

    Parts#

    NameBeschreibung
    baseThe component’s base wrapper.
    prefixThe container that wraps the prefix.
    labelThe button’s label.
    suffixThe container that wraps the suffix.

    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/button/button.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/button/button.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/button/button.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!