Zum Hauptinhalt springen Seitenleiste
Auf dieser Seite
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
(Standard)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, 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/button/button.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/button/button.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/button/button.js";

Wir würden uns freuen, von dir zu hören. Kontaktiere uns bitte 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!

Unsere Website ist zu 100 % frei von Cookies! Wir legen großen Wert auf deine Privatsphäre und speichern daher keinerlei Cookies oder persönliche Informationen über dich.

Dein Browserverlauf bleibt sauber und deine Daten sind geschützt, ganz im Einklang mit modernen Datenschutzstandards wie der DSGVO. Genieße deinen Besuch ganz ohne digitale Cookies! 🍪🚫

Weitere Informationen findest du in unserer Datenschutzerklärung.

Alles klar!