Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 19 additions & 13 deletions src/content/reference/react-dom/components/option.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
---
title: "<option>"
translationStatus: ai-draft
---

<Note>

Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/reference/react-dom/components/option.md).

</Note>

<Intro>

The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) lets you render an option inside a [`<select>`](/reference/react-dom/components/select) box.
Il [componente browser integrato `<option>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/option) ti permette di renderizzare un'opzione dentro una casella [`<select>`](/reference/react-dom/components/select).

```js
<select>
Expand All @@ -23,7 +30,7 @@ The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/

### `<option>` {/*option*/}

The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) lets you render an option inside a [`<select>`](/reference/react-dom/components/select) box.
Il [componente browser integrato `<option>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/option) ti permette di renderizzare un'opzione dentro una casella [`<select>`](/reference/react-dom/components/select).

```js
<select>
Expand All @@ -32,31 +39,31 @@ The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/
</select>
```

[See more examples below.](#usage)
[Vedi altri esempi sotto.](#usage)

#### Props {/*props*/}

`<option>` supports all [common element props.](/reference/react-dom/components/common#common-props)
`<option>` supporta tutte le [props comuni degli elementi.](/reference/react-dom/components/common#common-props)

Additionally, `<option>` supports these props:
Inoltre, `<option>` supporta queste props:

* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#disabled): A boolean. If `true`, the option will not be selectable and will appear dimmed.
* [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#label): A string. Specifies the meaning of the option. If not specified, the text inside the option is used.
* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#value): The value to be used [when submitting the parent `<select>` in a form](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form) if this option is selected.
* [`disabled`](https://developer.mozilla.org/it/docs/Web/HTML/Element/option#disabled): Un booleano. Se `true`, l'opzione non sarà selezionabile e apparirà attenuata.
* [`label`](https://developer.mozilla.org/it/docs/Web/HTML/Element/option#label): Una stringa. Specifica il significato dell'opzione. Se non specificato, viene usato il testo dentro l'opzione.
* [`value`](https://developer.mozilla.org/it/docs/Web/HTML/Element/option#value): Il valore da usare [quando si invia il `<select>` padre in un form](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form) se questa opzione è selezionata.

#### Caveats {/*caveats*/}

* React does not support the `selected` attribute on `<option>`. Instead, pass this option's `value` to the parent [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option) for an uncontrolled select box, or [`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable) for a controlled select.
* React non supporta l'attributo `selected` su `<option>`. Passa invece il `value` di questa opzione al [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option) padre per un select non controllato, oppure al [`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable) padre per un select controllato.

---

## Usage {/*usage*/}

### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
### Visualizzare una casella di selezione con opzioni {/*displaying-a-select-box-with-options*/}

Render a `<select>` with a list of `<option>` components inside to display a select box. Give each `<option>` a `value` representing the data to be submitted with the form.
Renderizza un `<select>` con un elenco di componenti `<option>` al suo interno per visualizzare una casella select. Assegna a ogni `<option>` un `value` che rappresenta i dati da inviare con il form.

[Read more about displaying a `<select>` with a list of `<option>` components.](/reference/react-dom/components/select)
[Leggi di più sulla visualizzazione di un `<select>` con un elenco di componenti `<option>`.](/reference/react-dom/components/select)

<Sandpack>

Expand All @@ -80,4 +87,3 @@ select { margin: 5px; }
```

</Sandpack>

27 changes: 17 additions & 10 deletions src/content/reference/react-dom/components/progress.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
---
title: "<progress>"
translationStatus: ai-draft
---

<Note>

Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/reference/react-dom/components/progress.md).

</Note>

<Intro>

The [built-in browser `<progress>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) lets you render a progress indicator.
Il [componente browser integrato `<progress>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/progress) ti permette di renderizzare un indicatore di progresso.

```js
<progress value={0.5} />
Expand All @@ -20,32 +27,32 @@ The [built-in browser `<progress>` component](https://developer.mozilla.org/en-U

### `<progress>` {/*progress*/}

To display a progress indicator, render the [built-in browser `<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) component.
Per visualizzare un indicatore di progresso, renderizza il [componente browser integrato `<progress>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/progress).

```js
<progress value={0.5} />
```

[See more examples below.](#usage)
[Vedi altri esempi sotto.](#usage)

#### Props {/*props*/}

`<progress>` supports all [common element props.](/reference/react-dom/components/common#common-props)
`<progress>` supporta tutte le [props comuni degli elementi.](/reference/react-dom/components/common#common-props)

Additionally, `<progress>` supports these props:
Inoltre, `<progress>` supporta queste props:

* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max): A number. Specifies the maximum `value`. Defaults to `1`.
* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value): A number between `0` and `max`, or `null` for indeterminate progress. Specifies how much was done.
* [`max`](https://developer.mozilla.org/it/docs/Web/HTML/Element/progress#max): Un numero. Specifica il `value` massimo. Predefinito: `1`.
* [`value`](https://developer.mozilla.org/it/docs/Web/HTML/Element/progress#value): Un numero compreso tra `0` e `max`, oppure `null` per un progresso indeterminato. Specifica quanto è stato completato.

---

## Usage {/*usage*/}

### Controlling a progress indicator {/*controlling-a-progress-indicator*/}
### Controllare un indicatore di progresso {/*controlling-a-progress-indicator*/}

To display a progress indicator, render a `<progress>` component. You can pass a number `value` between `0` and the `max` value you specify. If you don't pass a `max` value, it will assumed to be `1` by default.
Per visualizzare un indicatore di progresso, renderizza un componente `<progress>`. Puoi passare un numero `value` compreso tra `0` e il valore di `max` che specifichi. Se non passi un valore `max`, viene assunto `1` per impostazione predefinita.

If the operation is not ongoing, pass `value={null}` to put the progress indicator into an indeterminate state.
Se l'operazione non è in corso, passa `value={null}` per mettere l'indicatore di progresso in uno stato indeterminato.

<Sandpack>

Expand Down
Loading