String Answers

Einzeilige Texteingabe ohne Formatierung.

<String id="4caa49d4-5385-433e-9651-a48ebed29a9a" />

http://localhost:3000

Laden...

Label

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

http://localhost:3000

Laden...

Platzhalter

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

http://localhost:3000

Laden...

Standardwert

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

http://localhost:3000

Laden...

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.

Laden...

Textlösung

<String solution="Hello" id="a1eb0082-4eb1-4247-8448-ca971ac02238"/>

http://localhost:3000

Laden...

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

Laden...

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

Laden...

Laden...

Setzen der Eingabe-Breite

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

http://localhost:3000

Laden...

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

Laden...

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

Laden...

Laden...

Laden...

Laden...

Laden...

Laden...

Laden...

Laden...

Laden...

Laden...

Laden...

Laden...

Laden...

Laden...

Laden...

Laden...

Temporäre Komponente (nicht persistiert)

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

<String />

http://localhost:3000

Laden...

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.

unit

Einheiten wie z.B. cm, m, kg, s, etc. können angezeigt werden.

Es kann eine React.ReactNode übergeben werden, die dann anstelle des Textes angezeigt wird.

<String label="inside" stateIconsPosition="inside" />
<String label="120 cm =" solution="1.2" unit="m" inputWidth='3em' />
<String label="outside" stateIconsPosition="outside" />
<String label="none" stateIconsPosition="none" />
<String label="fullWidth" fullWidth />

http://localhost:3000

Laden...

Laden...

Laden...

Laden...

Laden...