> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/es/aplicaciones/components.md).

# Componentes

Explore la biblioteca de componentes de PowerShell Universal, incluidos accesibilidad, visualización de datos, visualización, entradas, navegación, diseño y controladores de eventos.

Una aplicación de Universal se compone de componentes. Al crear una aplicación, llame a cmdlets de PowerShell dentro del script de la aplicación para crear componentes.

```powershell
New-UDApp -Title 'Dashboard' -Content {
    New-UDTypography -Text 'Hello, world!'
}
```

## Tipos de componentes

Hay más de 50 componentes que puede utilizar en las aplicaciones. Las categorías habituales incluyen visualización de datos, visualización gráfica de datos, comentarios, entradas, navegación, diseño, utilidades y superficies.

* **Visualización de datos**: alertas, tablas y cronologías.
* **Visualización gráfica de datos**: gráficos y mapas.
* **Comentarios**: modales e indicadores de progreso.
* **Entradas**: botones, formularios, cuadros de texto e interruptores.
* **Navegación**: menús, steppers y pestañas.
* **Diseño**: cuadrículas y pilas.
* **Utilidades**: componentes dinámicos, de elemento y HTML.
* **Superficies**: tarjetas y paneles de expansión.

## Accesibilidad y atributos ARIA

Utilice el parámetro compartido `-Aria` para añadir atributos ARIA a los componentes interactivos compatibles. El parámetro acepta un bloque de script que contiene uno o varios comandos `New-UDAriaAttribute`. PowerShell Universal aplica los atributos resultantes al elemento interactivo o de entrada.

```powershell
New-UDTextbox -Id 'HardWords' -Label 'Nougat Croissant Valet' -Aria {
    New-UDAriaAttribute -Label -Value 'noo-gah Krwah-sahn val-ay'
    New-UDAriaAttribute -LabelledBy -Value 'hardWordsLabel'
}
```

Este ejemplo representa `aria-label="noo-gah Krwah-sahn val-ay"` y `aria-labelledby="hardWordsLabel"` en la entrada del cuadro de texto. Utilice los atributos ARIA para proporcionar un nombre accesible, conectar las instrucciones y el texto de error, y expresar el estado del control cuando su contenido visible no lo haga ya.

### Atributos compatibles

`New-UDAriaAttribute` admite los siguientes asistentes:

| Asistente                    | Atributo representado |
| ---------------------------- | --------------------- |
| `-Label`                     | `aria-label`          |
| `-LabelledBy` o `-LabeledBy` | `aria-labelledby`     |
| `-DescribedBy`               | `aria-describedby`    |
| `-Description`               | `aria-description`    |
| `-Controls`                  | `aria-controls`       |
| `-Expanded`                  | `aria-expanded`       |
| `-HasPopup`                  | `aria-haspopup`       |
| `-Hidden`                    | `aria-hidden`         |
| `-Invalid`                   | `aria-invalid`        |
| `-Required`                  | `aria-required`       |
| `-Role`                      | `role`                |

Utilice valores válidos para el atributo ARIA que seleccione. Dé preferencia a las etiquetas y la semántica nativas cuando sean suficientes; ARIA las complementa y no debe sustituir a las etiquetas visibles ni al comportamiento estándar de los formularios.

### Componentes compatibles

Los siguientes componentes admiten `-Aria`:

* `New-UDAutocomplete`
* `New-UDButton` y `New-UDIconButton`
* `New-UDCheckbox`
* `New-UDSelect`
* `New-UDRadioGroup` y `New-UDRadio`
* `New-UDSwitch`
* `New-UDSlider`
* `New-UDLink`
* `New-UDDatePicker` y `New-UDTimePicker`
* `New-UDRating`
* `New-UDFloatingActionButton`
* `New-UDUpload`
* `New-UDToggleButtonGroup` y `New-UDToggleButton`
* `New-UDTextbox`

En los cuadros de texto, los valores explícitos de `-Attributes` tienen prioridad cuando el mismo atributo también se define mediante `-Aria`.

## Controladores de eventos

Muchos componentes proporcionan controladores de eventos para funciones interactivas como clics, validación y representación. Los controladores de eventos utilizan bloques de script de PowerShell.

```powershell
New-UDButton -Text 'Click me!' -OnClick {
    Show-UDToast -Message 'Clicked!'
}
```

Dentro de los controladores de eventos, puede ejecutar cualquier comando válido de PowerShell, incluidos comandos de módulos ajenos a PowerShell Universal como ActiveDirectory o Microsoft.Graph.

### Datos del evento

Los controladores de eventos pueden proporcionar datos como `$EventData`. El valor depende del componente: el cambio de un cuadro de texto devuelve su valor, mientras que el envío de un formulario devuelve un objeto con los valores del formulario.

```powershell
New-UDTextbox -OnChange {
    Show-UDToast -Message $EventData
}

New-UDForm -Content {
    New-UDTextbox -Id 'UserName'
} -OnSubmit {
    Show-UDToast -Message $EventData.UserName
}
```

Utilice `$Body` cuando necesite la cadena JSON sin procesar proporcionada al controlador de eventos. Algunos controles también proporcionan `$PSUItem` con el ID del elemento, el tipo, el ID del evento, el nombre del evento, los datos del evento y la ubicación.

### Ámbito

PowerShell Universal pone a disposición de los controladores de eventos las variables que están en el ámbito, pero cada controlador se ejecuta en su propio runspace. No dependa del ámbito `$Global:` o `$Script:` para compartir el estado entre controladores; utilice ámbitos personalizados en su lugar.

Evite heredar `$EventData` en controladores de eventos anidados, ya que el controlador anidado lo sustituye. Almacene el valor externo necesario en una variable antes de crear el componente anidado.

```powershell
New-UDTable -Columns @(
    New-UDTableColumn -Property 'Name' -OnRender {
        $Name = $EventData.Name
        New-UDButton -Text $Name -OnClick {
            Show-UDToast -Message $Name
        }
    }
) -Data $Data
```

#### Véase también

* [Devolutions Academy - Añadir tablas de datos](https://academy.devolutions.net/student/page/3466031-adding-data-tables?curriculum_activity_id=5612258\&path_id=3465905\&sid=1b852f65-706e-452f-a2b6-96b76149ddb2\&sid_i=0)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.devolutions.net/powershell-universal/es/aplicaciones/components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.