Condividi tramite

Controllo ContextMenu

  • Articolo

Un comando utilizzato per immettere comandi.

Nota

Documentazione e codice sorgente sono disponibili nel repository dei componenti del codice GitHub.

comando ContextMenu.

Description

Un menu contestuale (ContextMenu) è un elenco di comandi basati sul contesto della selezione, sul passaggio del mouse o sullo stato attivo della tastiera. Sono una delle superfici di comando più efficaci e molto utilizzate e possono essere utilizzate in vari luoghi.

Questo componente di codice fornisce un wrapper attorno al controllo menu contestuale dell'interfaccia utente Fluent associato a un pulsante per l'utilizzo in app canvas e pagine personalizzate.

Proprietà

Proprietà chiave

Proprietà Descrizione
Items Gli elementi dell'azione di cui eseguire il rendering. Il primo elemento è considerato l'elemento radice.

Proprietà Items

Name Descrizione
ItemDisplayName Nome visualizzato dell'elemento di menu.
ItemKey Il tasto da utilizzare per indicare quale elemento è selezionato e quando si aggiungono elementi secondari. I tasti devono essere univoci.
ItemEnabled Impostare su false se l'opzione è disabilitata.
ItemVisible Imposta su falsa se l'opzione non è visibile.
ItemChecked Imposta su Vero se l'opzione è selezionata.
ItemIconName L'icona dell'interfaccia utente Fluent da utilizzare (vedi Icone dell'interfaccia utente Fluent)
ItemIconColor Il colore per il rendering dell'icona (ad esempio, con nome, valore RGB o esadecimale).
ItemIconOnly Non mostrare l'etichetta di testo - solo l'icona.
ItemHeader Esegui il rendering dell'elemento come intestazione di una sezione. Se ci sono oggetti che hanno il loro ItemParentKey impostato sulla chiave di questo elemento, vengono aggiunti come elementi raggruppati semanticamente in questa sezione.
ItemTopDivider Esegui il rendering di un divisore nella parte superiore della sezione.
ItemDivider Esegui il rendering dell'elemento come divisore di sezione o, se l'elemento è un'intestazione (ItemHeader = true), controlla se eseguire il rendering di un divisore nella parte inferiore della sezione.
ItemParentKey Esegui il rendering dell'opzione come elemento figlio di un'altra opzione.

Nota

  • ItemIconColor sovrascriverà il valore del tema del componente e ignorerà altri colori di stato (ad esempio, disabilitato).
  • ItemHeader e ItemDivider deve essere impostato su true per eseguire il rendering come divisore. Se impostato su false, aspetta altri valori e verrà visualizzato in bianco.
  • L'aggiunta della ItemCheckedproprietà e del comportamento delle voci del menu secondario impedirà la chiusura del menu secondario al clic.

Esempio

Formula Power Fx di esempio per Items:

  Table(
      {
          ItemKey: "File",
          ItemIconName: "save",
          ItemDisplayName: "Save",
          ItemOverflow:true
      },
       {
          ItemKey: "Delete",
          ItemIconName: "Delete",
          ItemDisplayName: "Delete",
          ItemOverflow:true
      }
  )

Proprietà di stile

Proprietà Descrizione
Theme Accetta una stringa JSON generata utilizzando la finestra di progettazione del tema dell'interfaccia utente Fluent (windows.net). Lasciare questo vuoto comporterà l'utilizzo del tema predefinito definito da Power Apps. Lasciare questo vuoto comporterà l'utilizzo del tema predefinito definito da Power Apps. Vedi la creazione di temi per istruzioni su come eseguire la configurazione.
Chevron Mostra o nascondi il freccia in basso sul pulsante radice
IconColor (Facoltativo). Il colore dell'icona sul pulsante del menu di scelta rapida.
HoverIconColor (Facoltativo). Il colore dell'icona quando si passa con il mouse sul pulsante del menu di scelta rapida.
IconSize (Facoltativo). In pixel, la dimensione dell'icona sul pulsante del menu contestuale.
FontSize (Facoltativo). In pixel, la dimensione del testo sul pulsante del menu contestuale.
FontColor (Facoltativo). Il colore del testo sul pulsante del menu di scelta rapida.
HoverFontColor (Facoltativo). Il colore del testo quando si passa con il mouse sul pulsante del menu di scelta rapida.
FillColor (Facoltativo). Il colore di sfondo sul pulsante del menu di scelta rapida.
HoverFillColor (Facoltativo). Il colore di sfondo quando si passa con il mouse sul pulsante del menu di scelta rapida.
TextAlignment L'allineamento del testo del pulsante. Valori possibili: Centro, Sinistra o Destra
AccessibilityLabel Etichetta aria per utilità per la lettura dello schermo

Proprietà dell'evento

Proprietà Descrizione
InputEvent Evento da inviare al controllo. Ad esempio, SetFocus. Vedere di seguito.

Comportamento

Supporta SetFocus come un InputEvent.

Configura il comportamento "In caso di selezione"

Usa la formula Switch() nella proprietà del componente OnSelect per configurare azioni specifiche per ciascun elemento facendo riferimento al comando ItemKey selezionato come valore di switch.

Sostituisci i valori false con espressioni appropriate nel linguaggio Power Fx.

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 1 */
    "File", false,
    
    /* Action for ItemKey 2 */
    "Delete", false,
  
    /* Default action */
        false
  )

Impostazione dello stato attivo sul controllo

Quando viene visualizzata una nuova finestra di dialogo e lo stato attivo predefinito dovrebbe essere sul controllo, sarà necessario uno stato attivo impostato esplicito.

Per effettuare chiamate all'evento di input, puoi impostare una variabile di contesto associata alla proprietà Evento di input su una stringa che inizia con SetFocus e seguito da un elemento casuale per garantire che l'app lo rilevi come una modifica.

Ad esempio,

UpdateContext({ctxResizableTextareaEvent:"SetFocus" & Text(Rand())}));

La variabile di contesto ctxResizableTextareaEvent verrebbe quindi associata alla proprietà Input Event.

Limiti

Questo componente di codice può essere usato solo nelle app canvas e nelle pagine personalizzate.