CommandBar control (versió preliminar)
Control utilitzat per introduir ordres.
Nota
Trobareu la documentació completa i el codi font al dipòsit de components de codi de GitHub.
Descripció
CommandBar
és una superfície que allotja les ordres que operen el contingut de la finestra, la subfinestra o la regió principal sobre la qual resideix.
Aquest component de codi proporciona un embolcall al voltant del control Fluent UI CommandBar per utilitzar-lo a aplicacions de llenç i pàgines personalitzades.
Propietats
Propietats de la clau
Propietat | Descripció |
---|---|
Items |
Els elements d'acció que s'han de representar |
Estructura d'elements
Cada element utilitza l'esquema següent per visualitzar les dades del component.
Nom | Descripció |
---|---|
ItemDisplayName |
El nom de visualització de l'element de la barra d'ordres. |
ItemKey |
La clau que s'utilitza per indicar quin element se selecciona i quan s'afegeixen subelements. Les claus han de ser úniques. |
ItemEnabled |
Es defineix com a fals si l'opció està inhabilitada. |
ItemVisible |
Es defineix com a fals si l'opció no és visible. |
ItemChecked |
Es defineix com a cert si l'opció està marcada (per exemple, botons dividits en una barra d'ordres). |
ItemSplit |
Es defineix com a cert si es pot fer clic a l'opció i utilitzar-la com a menú desplegable. |
ItemIconName |
Icona de Fluent UI que s'utilitzarà (vegeu Icones de Fluent UI) |
ItemIconColor |
El color per representar la icona (per exemple, valor de nom, rgb o hexadecimal). |
ItemIconOnly |
No es mostra l'etiqueta del text, només la icona. |
ItemOverflow |
Es defineix com a cert per al comportament desbordament |
ItemOverflow |
Es representa l'opció als elements de desbordament. |
ItemFarItem |
Es representa l'opció al grup d'elements allunyats d'una barra d'ordres. |
ItemHeader |
Es representa l'element com a capçalera de secció. Si hi ha elements que tenen el seu ItemParentKey establert en la clau d'aquest element, s'afegiran com a elements agrupats semànticament en aquesta secció. |
ItemTopDivider |
Es representa un divisor a la part superior de la secció. |
ItemDivider |
Es representa l'element com un divisor de seccions, o si l'element és una capçalera (ItemHeader = true), controla si es representa un divisor a la part inferior de la secció. |
ItemParentKey |
Es representa l'opció com a element secundari d'una altra opció. |
Nota
ItemIconColor
substituirà el valor del tema del component i ignorarà altres colors d'estat (per exemple, inhabilitat).ItemHeader
iItemDivider
s'han d'establir en cert per representar com a divisor. Si es defineix com a fals, espera altres valors i es representarà en blanc.
Exemple
Fórmula del Power Fx d'exemple per a Items
bàsic:
Table(
{
ItemKey: "new",
ItemDisplayName: "New",
ItemIconName: "Add"
},
{
ItemKey: "edit",
ItemDisplayName: "Edit",
ItemIconName: "Edit"
},{
ItemKey: "delete",
ItemDisplayName: "Delete",
ItemIconName: "Delete"
},{
ItemKey: "refresh",
ItemDisplayName: "Refresh",
ItemIconName: "refresh"
},{
ItemKey: "help",
ItemDisplayName: "Help",
ItemIconName: "help"
}
)
Propietats d'estil
Propietat | Descripció |
---|---|
Theme |
Accepta una cadena JSON generada mitjançant el Fluent UI Theme Designer (windows.net). Deixant aquest camp en blanc s'utilitzarà el tema per defecte definit per Power Apps. Per obtenir ajuda sobre com s'ha de configurar, vegeu temes. |
AccessibilityLabel |
Etiqueta aria de lector de pantalla |
Propietats de l'esdeveniment
Propietat | Descripció |
---|---|
InputEvent |
Una incidència que s'enviarà al control. Per exemple, SetFocus . |
Comportament
Admet SetFocus com un InputEvent
.
Configurar el comportament en seleccionar
Utilitzeu la fórmula Commuta () a la propietat OnSelect
del component per configurar accions específiques per a cada element fent referència a l'estat seleccionat del control ItemKey
com a valor de commutació.
Substituïu els valors false
per expressions adequades en el llenguatge Power Fx.
Switch( Self.Selected.ItemKey,
/* Action for ItemKey 'new' (e.g., Patch function) */
"new", false,
/* Action for 'edit' (e.g., Patch function) */
"edit", false,
/* Action for 'delete' (e.g., Remove function ) */
"delete", false,
/* Action for 'refresh' (e.g., Refresh function) */
"refresh", false,
/* Action for 'help' (e.g., email support with the Office 365 connector ) */
"help", false,
/* Default action */
false
)
Establir l'enfocament en el control
Quan es mostra un diàleg nou i l'enfocament per defecte hauria d'estar al control, es necessitarà un enfocament definit explícit.
Per fer crides a la incidència d'entrada, podeu definir una variable de context enllaçada amb la propietat Incidència d'entrada a una cadena que comença amb SetFocus
i va seguida d'un element aleatori per assegurar-vos que l'aplicació la detecta com un canvi.
Fórmula del Power Fx d'exemple:
UpdateContext({ ctxResizableTextareaEvent:"SetFocus" & Text(Rand()) }));
La variable de context ctxResizableTextareaEvent
s'enllaçaria amb la propietat Input Event.
Limitacions
Aquest codi del llenç només es pot utilitzar a les aplicacions del llenç i a les pàgines personalitzades.
Vegeu més notes de limitació en els desafiaments de disseny de components.
Comentaris
https://aka.ms/ContentUserFeedback.
Properament: al llarg del 2024 eliminarem gradualment GitHub Issues com a mecanisme de retroalimentació del contingut i el substituirem per un nou sistema de retroalimentació. Per obtenir més informació, consulteu:Envieu i consulteu els comentaris de