> 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/pages.md).
# Páginas
Una aplicación puede constar de una o varias páginas. Una página puede tener un nombre y una URL concretos. Puede definir una URL que acepte una o varias variables en la URL para definir una página dinámica.
## Creación de una nueva página
En el editor de aplicaciones, haga clic en el botón Create App Page.
Botón Create App Page
Una vez creada la página, aparecerá en la pestaña de páginas.
Pestaña Páginas
Para actualizar el contenido de una página, haga clic en el botón Edit Code.
Editar página de aplicación
Por ejemplo, podría añadir un botón a su página.
```powershell
New-UDPage -Name 'Users' -Url '/users' -Content {
New-UDButton -Text 'What page is this?' -OnClick {
Show-UDToast $UDPage
}
} -AutoInclude
```
Las páginas se añaden automáticamente a las aplicaciones con el parámetro `-AutoInclude`. Simplemente llame a New-UDApp en la raíz del fichero PS1 de su aplicación.
```powershell
New-UDApp
```
## Página básica
Una página básica se puede definir mediante el cmdlet `New-UDPage`. Podría navegar a esta página visitando la URL `/app` de su dashboard.
```powershell
$Pages = @()
$Pages += New-UDPage -Name 'App' -Content {
New-UDTypography -Text 'App'
}
New-UDApp -Title 'Pages' -Pages $Pages
```
## Aplicación con varias páginas
Las aplicaciones pueden tener varias páginas, y esas páginas se pueden definir pasando una matriz de UDPages a `New-UDApp`
```powershell
$Pages = @()
$Pages += New-UDPage -Name 'App One' -Content {
New-UDTypography -Text 'App Two'
}
$Pages += New-UDPage -Name 'App Two' -Content {
New-UDTypography -Text 'App Two'
}
New-UDApp -Title 'Pages' -Pages $Pages
```
Puede que desee organizar su aplicación en varios ficheros PS1. Puede hacerlo mediante páginas.
```powershell
$UDScriptRoot = $PSScriptRoot
$Pages = @()
$Pages += New-UDPage -Name 'App One' -Content {
. "$UDScriptRoot\db1.ps1"
}
$Pages += New-UDPage -Name 'App Two' -Content {
. "$UDScriptRoot\db2.ps1"
}
New-UDApp -Title 'Pages' -Pages $Pages
```
## Página con una URL personalizada
Una página puede tener una URL personalizada mediante el parámetro `-Url`. Podría navegar a esta página visitando la URL `/db` de su aplicación.
```powershell
$Pages = @()
$Pages += New-UDPage -Name 'App' -Url '/db' -Content {
New-UDTypography -Text 'App'
}
New-UDApp -Title 'Pages' -Pages $Pages
```
## Página con variables en la URL
Puede definir una página con variables en la URL para crear páginas que se adapten en función de esa URL.
```powershell
$Pages = @()
$Pages += New-UDPage -Name 'Dashboard' -Url '/db/:user' -Content {
New-UDTypography -Text 'Dashboard for user: $User'
}
New-UDApp -Title 'Pages' -Pages $Pages
```
### Parámetros de cadena de consulta
Los parámetros de cadena de consulta se pasan a las páginas y otros extremos como una variable de tabla hash llamada `$Query`.
Por ejemplo, si visitara una página con el siguiente parámetro de cadena de consulta: `http://localhost:5000/dashboard/Page1?test=123`
Tendría acceso a este valor mediante la siguiente sintaxis:
```powershell
$Query.test
$Query['test']
```
## Acceso basado en roles
{% hint style="info" %}
Esta función requiere una [licencia](/powershell-universal/es/licensing.md).
{% endhint %}
Puede impedir que los usuarios accedan a las páginas en función de su rol mediante el parámetro `-Role` de las páginas. Puede configurar los roles y las políticas de roles en la [página Seguridad](/powershell-universal/es/seguridad/security.md#policy-assignment).
```powershell
$Pages = @()
$Pages += New-UDPage -Name 'Administrators' -Content {
New-UDTypography -Text 'Dashboard for user: $User'
} -Role 'Administrator'
$Pages += New-UDPage -Name 'Operators' -Content {
New-UDTypography -Text 'Dashboard for user: $User'
} -Role 'Operator'
New-UDApp -Title 'Pages' -Pages $Pages
```
## Encabezado
Las siguientes opciones están disponibles para personalizar el encabezado.
### Posición
Utilice el parámetro `-HeaderPosition` para ajustar el comportamiento del encabezado.
* absolute\fixed: permanece en la parte superior de la página, incluso al desplazarse
* relative: permanece en la parte superior de la página. No es visible al desplazarse.
```powershell
New-UDPage -HeaderPosition fixed -Content {
New-UDElement -tag div -Attributes @{
style = @{
height = '150vh'
}
}
}
```
### Colores
Puede ajustar los colores del encabezado especificando los parámetros `-HeaderColor` y `-HeaderBackgroundColor`. Estos colores anularán los colores del tema.
```powershell
New-UDPage -Name 'Home' -Content {
} -HeaderColor 'black' -HeaderBackgroundColor 'white'
```
## Navegación
Puede personalizar la navegación de una página mediante los parámetros `-Navigation` y `-NavigationLayout`. La navegación se define mediante el componente [Lista](/powershell-universal/es/aplicaciones/components/data-display/list.md#list). Los diseños de navegación son permanentes o temporales.
### Navegación personalizada
La navegación personalizada se puede definir con una lista. Los elementos de la lista pueden incluir elementos secundarios para crear secciones desplegables en la navegación.
```powershell
$Navigation = @(
New-UDListItem -Label "Home"
New-UDListItem -Label "Getting Started" -Children {
New-UDListItem -Label "Installation" -Href '/Installation'
New-UDListItem -Label "Usage" -Href '/Usage'
New-UDListItem -Label "FAQs" -Href '/faqs'
New-UDListItem -Label "System Requirements" -Href'/requirements'
New-UDListItem -Label "Purchasing" -Href '/purchasing'
}
)
$Pages = @()
$Pages += New-UDPage -Name 'Installation' -Content {
New-UDTypography -Text "Installation"
}
$Pages += New-UDPage -Name 'Usage' -Content {
New-UDTypography -Text "Usage"
}
New-UDApp -Title "Hello, World!" -Pages $Pages -NavigationLayout permanent -Navigation $Navigation
```
### Navegación dinámica
La navegación dinámica se puede utilizar para ejecutar scripts durante la carga de la página con el fin de determinar qué componentes de navegación mostrar en función de variables como el usuario, la dirección IP o los roles.
Puede generar navegación dinámica mediante el parámetro `-LoadNavigation`. El valor del parámetro debe ser un bloque de script que se ejecute al cargar la navegación.
```powershell
$Navigation = {
New-UDListItem -Label "Home - $(Get-Date)"
New-UDListItem -Label "Getting Started" -Children {
New-UDListItem -Label "Installation" -Href '/installation'
New-UDListItem -Label "Usage" -Href '/usage'
New-UDListItem -Label "FAQs" -Href '/faqs'
New-UDListItem -Label "System Requirements" -Href'/requirements'
New-UDListItem -Label "Purchasing" -Href '/purchasing'
}
}
$Pages = @()
$Pages += New-UDPage -Name 'Test' -Content {
New-UDTypography -Text "Hello"
} -NavigationLayout permanent -LoadNavigation $Navigation
$Pages += New-UDPage -Name 'Test2' -Content {
New-UDTypography -Text "Hello"
} -NavigationLayout permanent -LoadNavigation $Navigation
New-UDApp -Title "Hello, World!" -Pages $Pages
```
### Acceso basado en roles
Puede utilizar la navegación dinámica para crear un menú de navegación que aproveche los roles. Utilice `Protect-UDSection` para limitar quién tiene acceso a determinados elementos de menú. Asegúrese de incluir también el mismo rol en la página.
```powershell
$Navigation = {
New-UDListItem -Label "Home" -Href '/Home'
Protect-UDSection -Role "Administrator" -Content {
New-UDListItem -Label "Admins" -Href '/Admins'
}
}
$Pages = @()
$Pages += New-UDPage -Name 'Home' -Content {
New-UDTypography -Text "Hello"
} -NavigationLayout permanent -LoadNavigation $Navigation
$Pages += New-UDPage -Name 'Admins' -Content {
New-UDTypography -Text "Hello"
} -NavigationLayout permanent -LoadNavigation $Navigation -Roles "Administrator"
New-UDApp -Title "Hello, World!" -Pages $Pages
```
Si desea comprobar los roles dentro de las páginas, también puede utilizar el operador `-In` y la variable `$Roles`.
```powershell
New-UDPage -Name 'Home' -Content {
if ("Administrator" -in $Roles)
{
New-UDTypography -Text "I am an administrator"
} else {
New-UDTypography -Text "I am NOT an administrator"
}
}
```
### Diseños
El diseño permanente crea un cajón de navegación estático en el lado izquierdo de la página. El usuario no puede ocultarlo.
```powershell
$Pages = @()
$Pages += New-UDPage -Name 'Test' -Content {
New-UDTypography -Text "Hello"
} -NavigationLayout permanent
$Pages += New-UDPage -Name 'Test2' -Content {
New-UDTypography -Text "Hello"
} -NavigationLayout permanent
New-UDApp -Title "Hello, World!" -Pages $Pages
```
El diseño temporal crea un cajón de navegación que se puede abrir mediante un menú de hamburguesa situado en la esquina superior izquierda. Esta es la configuración predeterminada.
```powershell
$Pages = @()
$Pages += New-UDPage -Name 'Test' -Content {
New-UDTypography -Text "Hello"
} -NavigationLayout temporary
$Pages += New-UDPage -Name 'Test2' -Content {
New-UDTypography -Text "Hello"
} -NavigationLayout temporary
New-UDApp -Title "Hello, World!" -Pages $Pages
```
### Navegación horizontal
Navegación horizontal
Puede utilizar `New-UDAppBar` con una página en blanco para crear navegación horizontal.
```powershell
New-UDApp -Title 'PowerShell Universal' -Pages @(
New-UDPage -Name 'Page' -Content {
New-UDAppBar -Children {
New-UDTypography -Text "Title" -Variant h4 -Style @{
marginRight = "50px"
}
New-UDMenu -Variant text -Text "Settings" -Children {
New-UDMenuItem -Text 'Item 1' -OnClick { Invoke-UDRedirect "/item1" }
New-UDMenuItem -Text 'Item 2' -OnClick { Invoke-UDRedirect "/item1" }
New-UDMenuItem -Text 'Item 3' -OnClick { Invoke-UDRedirect "/item1" }
}
New-UDMenu -Variant text -Text "Options" -Children {
New-UDMenuItem -Text 'Item 1' -OnClick { Invoke-UDRedirect "/item1" }
New-UDMenuItem -Text 'Item 2' -OnClick { Invoke-UDRedirect "/item1" }
New-UDMenuItem -Text 'Item 3' -OnClick { Invoke-UDRedirect "/item1" }
}
New-UDMenu -Variant text -Text "Tools" -Children {
New-UDMenuItem -Text 'Item 1' -OnClick { Invoke-UDRedirect "/item1" }
New-UDMenuItem -Text 'Item 2' -OnClick { Invoke-UDRedirect "/item1" }
New-UDMenuItem -Text 'Item 3' -OnClick { Invoke-UDRedirect "/item1" }
}
} -DisableThemeToggle
} -Blank
)
```
## Logotipo
Puede mostrar un logotipo en la barra de navegación mediante el parámetro `-Logo`.
En primer lugar, configure una [carpeta publicada](/powershell-universal/es/plataforma/published-folders.md) para alojar su logotipo.
Ahora, al crear su página, puede especificar la ruta al logotipo.
```powershell
New-UDPage -Name 'Home' -Logo '/assets/favicon.png' -Content {
}
```
El logotipo se mostrará en la esquina superior izquierda.
Para personalizar el estilo de su logotipo, puede utilizar una [hoja de estilos en cascada](/powershell-universal/es/aplicaciones/themes/cascading-style-sheets.md) y apuntar al ID de elemento `ud-logo`.
## Contenido del encabezado
Puede definir contenido personalizado para incluirlo en el encabezado mediante el parámetro `-HeaderContent`.
```powershell
$Page = New-UDPage -Name 'Home' -Content {
} -HeaderContent {
New-UDButton -Icon (New-UDIcon -Icon Users) -Text 'User'
}
New-UDApp -Title "Dashboard" -Pages $Page
```
## Título de página dinámico
Los títulos de página son estáticos de forma predeterminada, pero puede anular este comportamiento mediante `-LoadTitle`. Se llamará cuando se cargue la página. Esto resulta útil al definir páginas en dashboards multilingües.
```powershell
New-UDPage -Name "Home" -LoadTitle { "Current Time" + (Get-Date) } -Content { }
```
## Páginas estáticas
Las páginas estáticas permiten un mejor rendimiento al no ejecutar PowerShell para cargar el contenido de la página. Esto puede resultar útil al mostrar datos que no requieren la ejecución dinámica de PowerShell. El contenido de la página se construye cuando se inicia el dashboard.
Las páginas estáticas no tienen acceso a los datos específicos del usuario. Esto incluye variables como:
* $Headers
* $User
* $Roles
Aún puede incluir regiones dinámicas dentro de las páginas. Estas regiones dinámicas tendrán acceso a los datos del usuario. Al recargar el ejemplo siguiente se actualizarán la fecha y la hora indicadas en la página.
```powershell
New-UDPage -Name 'Static Page' -Content {
New-UDDynamic -Content {
New-UDTypography (Get-Date)
}
} -Static
```
## API
[New-UDPage](/powershell-universal/es/comandos-de-powershell/new-udpage.md)
---
# 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/pages.md?ask=&goal=
```
`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.