tuix-input

Ein Element deckt vier Feldtypen ab. Das Label schwebt über den Wert, sobald das Feld Inhalt oder Fokus hat, und die Zeile darunter trägt ein Status-Icon.

Komponenten werden geladen…

Typen

Komponenten werden geladen…

Das Passwortfeld bringt sein Auge zum Ein- und Ausblenden selbst mit, ohne Property und ohne Event.

Komponenten werden geladen…

Eine Textarea mit maxlength zeigt zusätzlich einen Zeichenzähler.

Wert	Attribut	Rendert
`InputType.TEXT`	`text`	Ein einzeiliges Feld, mit `iconRight`, falls gesetzt
`InputType.SEARCH`	`search`	Ein einzeiliges Feld mit vorangestelltem Such-Icon
`InputType.PASSWORD`	`password`	Ein maskiertes Feld mit eingebautem Auge
`InputType.TEXT_AREA`	`textarea`	Ein mehrzeiliges Feld, mit Zähler bei gesetztem `maxlength`

Beschreibung und Status

descriptionType wählt Icon und Farbe der Hilfszeile und färbt das Feld selbst ein. Mit allem ausser text erscheinen Icon und eine Standard-Beschriftung auch dann, wenn description leer ist.

Komponenten werden geladen…

Wert	Attribut	Icon	Farbe
`DescriptionType.TEXT`	`text`	keins	Gedämpft; nur sichtbar, wenn `description` gesetzt ist
`DescriptionType.WARNING`	`warning`	`triangle-exclamation`	`VALIDATION`
`DescriptionType.ERROR`	`error`	`circle-x`	`ERROR`
`DescriptionType.SUCCESS`	`success`	`circle-check`	`SUCCESS`
`DescriptionType.LOADING`	`loading`	`loader`	`PRIMARY_300`

Zustände

Komponenten werden geladen…

Events

Eine Eingabe im Feld zeigt, was die Handler bekommen:

Komponenten werden geladen…

input.addEventListener('on-change', (event) => setValue(event.detail.value))

Die Komponente besitzt ihren Wert nicht. on-change meldet, was getippt wurde; der Wert ändert sich nur, wenn die Anwendung ihn nach value zurückschreibt.

API

Properties

Property	Attribut	Typ	Standard	Beschreibung
`value`	`value`	`string`	`''`	Der Feldwert
`title`	`title`	`string`	`''`	Schwebendes Label
`placeholder`	`placeholder`	`string`	`''`	Platzhaltertext
`type`	`type`	`InputType`	`text`	`text`, `search`, `password` oder `textarea`
`iconRight`	`iconright`	`IconName`	Keine	Icon rechts, nur bei `text`
`maxlength`	`maxlength`	`number`	Keine	Zeichenlimit. In der Textarea zusätzlich ein Zähler
`description`	`description`	`string`	Keine	Hilfetext unter dem Feld
`descriptionType`	`descriptiontype`	`DescriptionType`	`text`	Welchen Status die Hilfszeile zeigt
`disabled`	`disabled`	`boolean`	`false`	Blockiert Eingabe und Events
`readonly`	`readonly`	`boolean`	`false`	Wert sichtbar, aber nicht änderbar
`autofocus`	`autofocus`	`boolean`	`false`	Fokussiert das Feld nach dem Rendern, ausser bei disabled oder readonly
`dark`	`dark`	`boolean`	`false`	Dunkle Palette

Events

Event	Detail	Wann
`on-change`	`{ value: string }`	Bei jedem Tastendruck (das native `input`)
`on-blur`	`{ value: string }`	Das Feld verliert den Fokus
`on-click`	Keine	Das Feld wird geklickt und ist nicht disabled

Hinweise

iconRight wird nur bei text gezeichnet. Ein password-Feld setzt an diese Stelle sein eigenes Auge und ignoriert iconRight, hält den Platz dafür aber weiterhin frei; search und textarea ignorieren es ganz.
title ist zugleich das globale HTML-Attribut: in reinem HTML gesetzt, zeigt der Browser zusätzlich seinen nativen Tooltip. Frameworks, die es als Property setzen, auch der React-Wrapper, tun das nicht.
Das schwebende Label braucht einen placeholder am Feld; die Komponente setzt ersatzweise ein Leerzeichen, damit die Animation stimmt.
Der Zähler der Textarea liest value.length und stimmt deshalb auch, wenn der Wert von aussen gesetzt wird.
Das Host-Element ist inline: es braucht einen Container mit Breite, wie in jedem Beispiel oben.

tuix-input

Auf dieser Seite