Compartir a través de

Control Breadcrumb

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.

Control de ruta de navegación.

Descripción

Los controles de Breadcrumb deben usarse como una ayuda para la 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

Propiedades Items

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 de Power Fx de ejemplo:

Table(
    {
        ItemKey: "1",
        ItemDisplayName: "General",
        ItemClickable: true
    },
    {
        ItemKey: "2",
        ItemDisplayName: "Document",
        ItemClickable: true
    }
)

Propiedades de estilo

Nombre 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

Nombre 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 de 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.

  • Last updated on