162 lines
5.4 KiB
Plaintext
162 lines
5.4 KiB
Plaintext
---
|
|
title: Testo
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/notes/notes_header.png" alt="Intestazione" />
|
|
</Frame>
|
|
|
|
## Input Testo
|
|
|
|
Consente agli utenti di inserire e modificare il testo.
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="Utilizzo">
|
|
|
|
```jsx
|
|
import { TextInput } from "@/ui/input/components/TextInput";
|
|
|
|
export const MyComponent = () => {
|
|
const handleChange = (text) => {
|
|
console.log("Input changed:", text);
|
|
};
|
|
|
|
const handleKeyDown = (event) => {
|
|
console.log("Key pressed:", event.key);
|
|
};
|
|
|
|
return (
|
|
<TextInput
|
|
className
|
|
label="Username"
|
|
onChange={handleChange}
|
|
fullWidth={false}
|
|
disableHotkeys={false}
|
|
error="Invalid username"
|
|
onKeyDown={handleKeyDown}
|
|
RightIcon={null}
|
|
/>
|
|
);
|
|
};
|
|
|
|
```
|
|
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Proprietà">
|
|
|
|
|
|
| Props | Tipo | Descrizione |
|
|
| -------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
| nomeClasse | stringa | Nome opzionale per lo stile aggiuntivo |
|
|
| etichetta | stringa | Rappresenta l'etichetta per l'input |
|
|
| cambiaDiStato | funzione | La funzione chiamata quando cambia il valore dell'input |
|
|
| larghezzaCompleta | booleano | Indica se l'input deve occupare il 100% della larghezza |
|
|
| disattivaTastiRapidi | booleano | Indica se i tasti rapidi sono abilitati per l'input |
|
|
| errore | stringa | Rappresenta il messaggio di errore da visualizzare. Quando fornito, aggiunge anche un'icona di errore sul lato destro dell'input |
|
|
| premiTasto | funzione | Chiamato quando un tasto viene premuto mentre il campo di input è attivo. Riceve un `React.KeyboardEvent` come argomento |
|
|
| IconaDestra | IconaComponente | Un componente icona opzionale visualizzato sul lato destro dell'input |
|
|
|
|
|
|
|
|
|
|
Il componente accetta anche altre proprietà dell'elemento di input HTML.
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Input Testo Autosize
|
|
|
|
Componente di input testo che regola automaticamente la sua altezza in base al contenuto.
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="Utilizzo">
|
|
|
|
```jsx
|
|
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<AutosizeTextInput
|
|
onValidate={() => console.log("onValidate function fired")}
|
|
minRows={1}
|
|
placeholder="Write a comment"
|
|
onFocus={() => console.log("onFocus function fired")}
|
|
variant="icon"
|
|
buttonTitle
|
|
value="Task: "
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Proprietà">
|
|
|
|
|
|
| Props | Tipo | Descrizione |
|
|
| -------------- | -------- | ------------------------------------------------------------------------------------- |
|
|
| suValida | funzione | La funzione di callback che si vuole attivare quando l'utente valida l'input |
|
|
| righeMinime | numero | Il numero minimo di righe per l'area di testo |
|
|
| segnaposto | stringa | Il testo segnaposto che si vuole visualizzare quando l'area di testo è vuota |
|
|
| suFocus | funzione | La funzione di callback che si vuole attivare quando l'area di testo ottiene il focus |
|
|
| variante | stringa | La variante dell'input. Le opzioni includono: `predefinito`, `icona` e `pulsante` |
|
|
| titoloPulsante | stringa | Il titolo per il pulsante (applicabile solo per la variante pulsante) |
|
|
| valore | stringa | Il valore iniziale per l'area di testo |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Area di Testo
|
|
|
|
Consente di creare input di testo multilinea.
|
|
|
|
<Tabs>
|
|
<Tab title="Utilizzo">
|
|
|
|
```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="Proprietà">
|
|
|
|
|
|
| Props | Tipo | Descrizione |
|
|
| ------------- | -------- | --------------------------------------------------------------------------- |
|
|
| disabilitato | booleano | Indica se l'area di testo è disabilitata |
|
|
| righeMinime | numero | Numero minimo di righe visibili per l'area di testo. |
|
|
| cambiaDiStato | funzione | Funzione di callback attivata quando il contenuto dell'area di testo cambia |
|
|
| segnaposto | stringa | Il testo segnaposto visualizzato quando l'area di testo è vuota |
|
|
| valore | stringa | Il valore corrente dell'area di testo |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|