Zum Hauptinhalt springen

String Answers

Einzeilige Texteingabe ohne Formatierung.

<String id="4caa49d4-5385-433e-9651-a48ebed29a9a" />
http://localhost:3000

Label​

<String label="Aufgabe 1" id="0c63f1d6-fbd7-42f5-a553-4e3716355083"/>
http://localhost:3000

Platzhalter​

<String placeholder="Eine Zahl" id="4612436b-b10e-4e6d-9a40-ea04f701bf87" />
http://localhost:3000

Standardwert​

<String default="Hello World" id="1218a15f-094d-44e9-b5e1-51108d5532a1"/>
http://localhost:3000

Lösung​

Es können auch Lösungen hinterlegt werden um die Eingabe zu überprüfen. Durch einen Klick auf den Button (alternativ mit ctrl + bzw. cmd + ) wird die Eingabe überprüft.

Textlösung​

<String solution="Hello" id="a1eb0082-4eb1-4247-8448-ca971ac02238"/>
http://localhost:3000
Beachte Exakte Ăśbereinstimmung

Hier muss alles exakt ĂĽbereinstimmen - inkl. Gross- und Kleinschreibung, Leerzeichen, etc.

Lösung vorbereiten​

Die eingebene Lösung wird vor der Überprüfung vorbereitet. Dies kann z.B. genutzt werden um alle Zeichen zu entfernen, die nicht Buchstaben sind.

<String solution="Hello World" sanitizer={(val) => val.toLowerCase().replace(/[^a-zA-Z]/g, '')} id="cd49abd7-e957-49b5-b262-600f98c96b5d" />
http://localhost:3000
Beachte

Nun funktioniert auch die Eingabe HELLO WORLD! oder hello world. oder h e l l o w o r l d.

Aussehen verändern​

Setzen der Label-Breite​

Wenn mehrere Eingaben ĂĽbereinander sind und alle die gleiche Label-Breite haben sollen, kann dies mit labelWidth erreicht werden.

<String label="Ein Label" labelWidth="12em" id="7e4f1eb8-0fdf-49aa-a8e0-fcb78b454826" />
<String label="Ein seeeehr langes Label" labelWidth="12em" id="ecd0290c-dc12-442c-8a16-3c1e052e92b7" />
http://localhost:3000

Setzen der Eingabe-Breite​

<String label="Lieblingsbuchstabe?" inputWidth="3em" id="30641746-7524-4a1b-b09f-ab19cc993a22" />
http://localhost:3000

Label selber stylen​

Eigene Label-Komponenten können als children übergeben werden.

<String id="006725b9-1256-4221-ae3e-a57baa6a6660" type="tel">
    <span style={{paddingRight: '1.5em'}}>
        :mdi[phone] Telefonnummer
    </span>
</String>
http://localhost:3000

Text-Typen​

Es sind alle HTML5-Input-Typen möglich.

<String type="checkbox" label="checkbox"  />
<String type="color" label="color" default="#3396c7" />
<String type="date" label="date"  />
<String type="datetime-local" label="datetime-local" />
<String type="email" label="email" />
<String type="month" label="month" />
<String type="number" label="number" />
<String type="password" label="password" />
<String type="radio" label="radio" />
<String type="range" label="range" />
<String type="search" label="search" />
<String type="tel" label="tel" />
<String type="text" label="text" />
<String type="time" label="time" />
<String type="url" label="url" />
<String type="week" label="week" />
http://localhost:3000

Temporäre Komponente (nicht persistiert)​

Ohne id wird der Zustand nicht gespeichert, was mit einem markiert wird.

<String />
http://localhost:3000

Weitere Attribute​

hideWarning
Versteckt die Warnung , dass es sich um eine temporäre Komponente handelt.
hideApiState
Versteckt den API-Status (Icon das angezeigt wird beim Speichern).
inline
Verwendet anstatt eines Block-Elements (<div></div> mit display: flex) ein Inline-Element (<span></span> mit display: inline-flex).
stateIconsPosition
inside das Sync-Icon wird innerhalb des Inputs angezeigt (standard fĂĽr text, email, tel und url)
outside rechts neben dem Input (standard fĂĽr alle anderen Felder)
none Icon wird nicht angezeigt
fullWidth
FĂĽllt die gesamte Breite des Containers aus.
<String label="inside" stateIconsPosition="inside" />
<String label="outside" stateIconsPosition="outside" />
<String label="none" stateIconsPosition="none" />
<String label="fullWidth" fullWidth />
http://localhost:3000
CC 4.0