Breadcrumb control
Un control utilizado para proporcionar navegación.
Nota
La documentación completa y el código fuente se encuentran en el repositorio de componentes de código GitHub.
Description
Breadcrumb
Los controles deben usarse como ayuda de navegación en su aplicación o sitio. Indican la ubicación de la página actual dentro de una jerarquía y ayudan al usuario a comprender su lugar en esa jerarquía. Una ruta de navegación también proporciona acceso con un solo clic a niveles más altos de esa jerarquía.
Este componente de código proporciona un envoltorio alrededor del control Breadcrumb de Fluent UI para su uso en aplicaciones de lienzo y páginas personalizadas.
Propiedades
Propiedades importantes
Property | Descripción |
---|---|
SelectedKey |
Esto denota la clave seleccionada. Esto se actualizará a través del evento OnChange cuando el usuario interactúa con el control. |
Items |
Los elementos de acción para renderizar |
Items
propiedades
Cada elemento utiliza el siguiente esquema para visualizar datos en el componente.
Name | Descripción |
---|---|
ItemDisplayName |
El nombre para mostrar del elemento de ruta de navegación |
ItemKey |
La tecla que se debe utilizar al indicar qué elemento está seleccionado y al agregar subelementos. Las teclas deben ser únicas. |
ItemClickable |
Establézcalo en falso en caso de que no se pueda hacer clic en el elemento de ruta de navegación específico. |
Fórmula Power Fx de ejemplo:
Table(
{
ItemKey: "1",
ItemDisplayName: "General",
ItemClickable: true
},
{
ItemKey: "2",
ItemDisplayName: "Document",
ItemClickable: true
}
)
Propiedades de estilo
Name | Descripción |
---|---|
Theme |
Acepta una cadena JSON que se genera usando Diseñador de temas de Fluent UI (windows.net). Si deja esto en blanco, usará el tema predeterminado definido por Power Apps. Para obtener ayuda sobre cómo configurarlo vea Tematización. |
AccessibilityLabel |
aria-label para lectores de pantalla |
MaxDisplayedItems |
El número máximo de rutas de navegación que se mostrarán antes de la fusión. Si es cero, se procesarán todas las migas de pan. |
OverflowIndex |
Índice opcional donde se colapsarán los elementos de desbordamiento. De forma predeterminada, se establece como cero. |
Propiedades de evento
Name | Descripción |
---|---|
InputEvent |
Evento para enviar al control. por ejemplo, SetFocus . Consulte a continuación. |
Behavior
Soporta SetFocus como un InputEvent
.
Configure el comportamiento "Al seleccionar"
Use la fórmula Cambiar() en la propiedad OnSelect
del componente para configurar acciones específicas para cada elemento haciendo referencia al ItemKey
seleccionado del control como el valor del interruptor.
Cambie los valores false
con expresiones adecuadas en el lenguaje Power Fx.
Dado que este control se utiliza para la navegación, una acción lógica es utilizar funciones de navegación (lo ideal es hacerlo en una pantalla correspondiente con los datos relacionados cargados).
Switch( Self.Selected.ItemKey,
/* Action for ItemKey 1 */
"1", false,
/* Action for ItemKey 2 */
"2", false,
/* Default action */
false
)
Establecer el foco en el control
Cuando se muestra un nuevo cuadro de diálogo y el enfoque predeterminado debe estar en el control, se necesitará un enfoque establecido explícito.
Para realizar llamadas al evento de entrada, puede establecer una variable de contexto vinculada a la propiedad Evento de entrada en una cadena que comience con SetFocus
seguido de un elemento aleatorio para garantizar que la aplicación lo detecte como un cambio.
Fórmula Power Fx de ejemplo:
UpdateContext({ ctxResizableTextareaEvent:"SetFocus" & Text(Rand()) }));
La variable de contexto ctxResizableTextareaEvent
entonces se vincularía a la propiedad Input Event.
Limitaciones
Este componente de código solo se puede usar en aplicaciones de lienzo y páginas personalizadas.