Udostępnij za pośrednictwem

ContextMenu kontrola

  • Artykuł

Formant używany do wprowadzania poleceń.

Uwaga

Pełna dokumentacja i kod źródłowy znajdują się w repozytorium GitHub komponentów kodu.

Formant ContextMenu.

opis

Menu kontekstowe (ContextMenu) to lista poleceń opartych na kontekście wyboru, umieszczenia kursora myszy lub fokusu klawiatury. Są one jednym z najbardziej skutecznych i wysoce używanych linii poleceń i mogą być używane w różnych miejscach.

Ten składnik kodu udostępnia obszar, który można przećwicić przez formant Fluent UI ContextualMenu, powiązany z przyciskem, który ma być używać przycisku na aplikacji kanwy i na stronach niestandardowych.

Właściwości

Właściwości kluczowe

Właściwości opis
Items Elementy akcji do renderowania. Pierwszy element jest elementem głównym.

Items Właściwości

Imię i nazwisko/nazwa opis
ItemDisplayName Wyświetlana nazwa elementu menu.
ItemKey Klucz do wskazania wybranego elementu oraz dodawania elementów dodatkowych. Klucze muszą być niepowtarzalne.
ItemEnabled Ustaw wartość false, jeśli opcja jest wyłączona.
ItemVisible Ustaw na false, jeśli opcja nie jest widoczna.
ItemChecked Ustaw na true, jeśli opcja jest zaznaczona.
ItemIconName Ikona Fluent UI, która ma być wyświetlana (zobacz ikony Fluent UI)
ItemIconColor Kolor renderowania ikony (np. nazwany, rgb lub wartość szesnastkowa).
ItemIconOnly Nie pokazuj etykiety tekstowej — tylko ikona.
ItemHeader Renderuj element jako nagłówek sekcji. Jeśli są elementy z ustawionymi ItemParentKey kluczami tego elementu, są one dodawane jako elementy pogrupowane w tej sekcji.
ItemTopDivider Renderuj przegrodę u góry sekcji.
ItemDivider Renderuj element jako dzielnik sekcji — lub jeśli element jest nagłówkiem (ItemHeader = true), a następnie kontroluje, czy ma być renderowany dzielnik u dołu sekcji.
ItemParentKey Renderuj opcję jako element podrzędny innej opcji.

Uwaga

  • ItemIconColor zastąpi wartość Motywu komponentu i zignoruje inne kolory stanu (np. wyłączony).
  • ItemHeader i ItemDivider musi być ustawiona na wartość true, aby renderować się jako dzielnik. Jeśli zostanie ustawiona wartość false (fałsz), oczekiwane są inne wartości i będzie renderowany element pusty.
  • Dodanie właściwości ItemChecked i zachowania elementów podmenu uniemożliwi zamknięcie podmenu po kliknięciu.

Przykład

Przykładowa formuła Power Fx dla Items:

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

Właściwości stylu

Właściwości opis
Theme Akceptuje ciąg JSON generowany przy użyciu Projektanta motywów interfejsu użytkownika (windows.net). Pozostawienie tego pustego będzie używać domyślnego motywu zdefiniowanego przez ustawienie Power Apps. Pozostawienie tego pustego będzie używać domyślnego motywu zdefiniowanego przez ustawienie Power Apps. Zobacz motywy, aby uzyskać wskazówki dotyczące konfiguracji.
Chevron Wyświetlanie lub ukrywanie chevronu w dół na przycisku głównym
IconColor Opcjonalny. kolor ikony na przycisku menu kontekstowego.
HoverIconColor Opcjonalny. kolor ikony po najechaniu na przycisk menu kontekstowego.
IconSize Opcjonalny. Rozmiar ikony w przycisku menu kontekstowego w pikselach.
FontSize Opcjonalny. W pikselach rozmiar tekstu na przycisku menu kontekstowego.
FontColor Opcjonalny. kolor tekstu na przycisku menu kontekstowego.
HoverFontColor Opcjonalny. kolor tekstu po najechaniu na przycisk menu kontekstowego.
FillColor Opcjonalny. kolor tła przycisku menu kontekstowego.
HoverFillColor Opcjonalny. kolor tła po najechaniu na przycisk menu kontekstowego.
TextAlignment Wyrównanie tekstu przycisku. Możliwe wartości: W środku, w lewo lub w prawo
AccessibilityLabel Czytnik ekranu aria-label

Właściwości zdarzenia

Właściwości opis
InputEvent Zdarzenie do wysłania do kontroli Np. SetFocus. Zobacz poniżej.

Zachowanie

Obsługuje SetFocus jako element InputEvent.

Skonfiguruj zachowanie „On Select”

Użyj formuły Switch() we właściwości komponentu OnSelect, aby skonfigurować określone działania dla każdego elementu, odwołując się do wybranego przez kontrolkę elementu ItemKey jako wartości przełącznika.

Zastąp odpowiednie false wartości w języku Power Fx.

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

Ustawianie fokusu formantu

Gdy zostanie wyświetlone nowe okno dialogowe, a domyślny fokus powinien znajdować się na kontrolce, konieczne będzie wyraźne ustawienie fokusa.

Aby wykonać wywołania zdarzenia wejściowego, możesz ustawić zmienną kontekstową powiązaną z właściwością Input Event z ciągiem zaczynającym się od SetFocus i następującym po nim elementem losowym, aby upewnić się, że aplikacja wykryje to jako zmianę.

Np.

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

Zmienna kontekstowa ctxResizableTextareaEvent zostanie następnie powiązana z właściwością Input Event właściwości.

Ograniczenia

Tego składnika kodu można używać tylko w aplikacjach kanwy i na stronach niestandardowych.