162 lines
5.6 KiB
Plaintext
162 lines
5.6 KiB
Plaintext
---
|
|
title: Text
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/notes/notes_header.png" alt="Kopfzeile" />
|
|
</Frame>
|
|
|
|
## Texteingabe
|
|
|
|
Ermöglicht es den Benutzern, Text einzugeben und zu bearbeiten.
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="Verwendung">
|
|
|
|
```jsx
|
|
import { TextInput } from "@/ui/input/components/TextInput";
|
|
|
|
export const MyComponent = () => {
|
|
const handleChange = (text) => {
|
|
console.log("Eingabe geändert:", text);
|
|
};
|
|
|
|
const handleKeyDown = (event) => {
|
|
console.log("Taste gedrückt:", event.key);
|
|
};
|
|
|
|
return (
|
|
<TextInput
|
|
className
|
|
label="Benutzername"
|
|
onChange={handleChange}
|
|
fullWidth={false}
|
|
disableHotkeys={false}
|
|
error="Ungültiger Benutzername"
|
|
onKeyDown={handleKeyDown}
|
|
RightIcon={null}
|
|
/>
|
|
);
|
|
};
|
|
},{
|
|
```
|
|
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Eigenschaften">
|
|
|
|
|
|
| Props | Typ | Beschreibung |
|
|
| -------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | Zeichenkette | Optionaler Name für zusätzliche Stile |
|
|
| Beschriftung | Zeichenkette | Stellt die Beschriftung für das Eingabefeld dar |
|
|
| onChange | function | Die Funktion, die aufgerufen wird, wenn sich der Eingabewert ändert |
|
|
| volle Breite | boolesch | Gibt an, ob die Eingabe 100 % der Breite einnehmen soll |
|
|
| disableHotkeys | boolesch | Gibt an, ob Hotkeys für die Eingabe aktiviert sind |
|
|
| fehler | Zeichenkette | Stellt die Fehlermeldung dar, die angezeigt werden soll. Wenn vorhanden, wird auch ein Fehler-Icon auf der rechten Seite des Eingabefelds angezeigt |
|
|
| onKeyDown | Funktion | Wird aufgerufen, wenn eine Taste gedrückt gehalten wird, während das Eingabefeld fokussiert ist. Erhält ein `React.KeyboardEvent` als Argument |
|
|
| RightIcon | Icon-Komponente | Eine optionale Ikonenkomponente, die auf der rechten Seite des Eingabefelds angezeigt wird |
|
|
|
|
|
|
|
|
|
|
Die Komponente akzeptiert auch andere HTML-Eingabeelement-Eigenschaften.
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Autosize Text Input
|
|
|
|
Textkomponente, die ihre Höhe automatisch anhand des Inhalts anpasst.
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="Verwendung">
|
|
|
|
```jsx
|
|
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<AutosizeTextInput
|
|
onValidate={() => console.log("onValidate-Funktion ausgelöst")}
|
|
minRows={1}
|
|
placeholder="Kommentar schreiben"
|
|
onFocus={() => console.log("onFocus-Funktion ausgelöst")}
|
|
variant="icon"
|
|
buttonTitle
|
|
value="Aufgabe: "
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Eigenschaften">
|
|
|
|
|
|
| Props | Typ | Beschreibung |
|
|
| ----------- | ------------ | ---------------------------------------------------------------------------------------- |
|
|
| onValidate | Funktion | Die Callback-Funktion, die Sie auslösen möchten, wenn der Benutzer die Eingabe validiert |
|
|
| minRows | nummer | Die minimale Anzahl von Zeilen für den Textbereich |
|
|
| Platzhalter | Zeichenkette | Der Platzhaltertext, den Sie anzeigen möchten, wenn der Textbereich leer ist |
|
|
| onFocus | Funktion | Die Callback-Funktion, die Sie auslösen möchten, wenn der Textbereich den Fokus erlangt |
|
|
| Variante | Zeichenkette | Die Variante der Eingabe. Optionen umfassen: `Standard`, `Ikone` und `Schaltfläche` |
|
|
| buttonTitle | Zeichenkette | Der Titel für die Schaltfläche (nur für die Schaltflächenvariante anwendbar) |
|
|
| wert | Zeichenkette | Der Initialwert für den Textbereich |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Textbereich
|
|
|
|
Ermöglicht es Ihnen, mehrzeilige Texteingaben zu erstellen.
|
|
|
|
<Tabs>
|
|
<Tab title="Verwendung">
|
|
|
|
```jsx
|
|
import { TextArea } from "@/ui/input/components/TextArea";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<TextArea
|
|
disabled={false}
|
|
minRows={4}
|
|
onChange={()=>console.log('On change function fired')}
|
|
placeholder="Enter text here"
|
|
value=""
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Eigenschaften">
|
|
|
|
|
|
| Props | Typ | Beschreibung |
|
|
| ----------- | ------------ | ---------------------------------------------------------------------------- |
|
|
| deaktiviert | boolesch | Gibt an, ob der Textbereich deaktiviert ist |
|
|
| minRows | nummer | Minimale Anzahl sichtbarer Zeilen für den Textbereich. |
|
|
| onChange | Funktion | Rückruffunktion wird ausgelöst, wenn sich der Inhalt des Textbereichs ändert |
|
|
| Platzhalter | Zeichenkette | Platzhaltertext, der angezeigt wird, wenn der Textbereich leer ist |
|
|
| wert | Zeichenkette | Der aktuelle Wert des Textbereichs |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|