CommandBar Sterowanie (wersja zapoznawcza)

Kontrolka używana do wprowadzania poleceń.

Uwaga

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

Kontrolka CommandBar.

Opis

CommandBar to pasek, na którym znajdują się polecenia działają na zawartości okna, panelu lub regionu nadrzędnego, który znajduje się powyżej.

Ten składnik kodu udostępnia obszar, który można zakończyć przez formant Fluent UI CommandBar, który ma być używać przycisku w aplikacjach kanwy i na stronach niestandardowych.

Właściwości

Właściwości klucza

Właściwości Opis
Items Elementy akcji do renderowania

Struktura elementów

Każdy element używa poniższego schematu do wizualizacji danych składnika.

Nazwa Opis
ItemDisplayName Nazwa wyświetlana elementu paska poleceń.
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 wartość true, jeśli opcja jest zaznaczona (np. przyciski dzielone na pasku poleceń).
ItemSplit Jeśli można kliknąć tę opcję i użyć jej jako menu rozwijanego, ustaw wartość true (prawda).
ItemIconName Ikona Fluent UI, która ma być wyświetlana (zobacz ikony Fluent UI)
ItemIconColor Kolor, w jakim ma być wyświetlana ikona (np. nazwa koloru, RGB lub wartość szesnastkowa).
ItemIconOnly Nie pokazuj etykiety tekstowej — tylko ikona.
ItemOverflow Ustawianie wartości true dla zachowania przepełnienia
ItemOverflow Wyrenderuj opcję w elementach przepełnienia.
ItemFarItem Renderuj opcję w grupie skrajnych elementów paska poleceń.
ItemHeader Renderuj element jako nagłówek sekcji. Jeśli istnieją elementy, które mają ustawione ItemParentKey na klucz tego elementu, są one dodawane w tej sekcji jako elementy pogrupowane semantycznie.
ItemTopDivider Renderuj przegrodę u góry sekcji.
ItemDivider Wyświetla element jako separator sekcji — albo, jeśli element jest nagłówkiem (ItemHeader = true), określa, czy na dole sekcji ma zostać wyświetlony separator.
ItemParentKey Renderuj opcję jako element podrzędny innej opcji.

Uwaga

  • ItemIconColor zastąpi wartość Theme komponentu i zignoruje inne kolory stanu (np. wyłączony).
  • ItemHeader i ItemDivider muszą być ustawione na true, aby były renderowane jako separator. Jeśli ustawiono wartość false (fałsz), oczekuje innych wartości i zostanie wyświetlone puste pole.

Przykład

Przykładowa formuła Power Fx dla podstawowego Items:

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"
    }
)

Właściwości stylu

Właściwości Opis
Theme Przyjmuje ciąg JSON wygenerowany za pomocą Fluent UI Theme Designer (windows.net). Pozostawienie tego pola pustego spowoduje użycie domyślnego motywu zdefiniowanego przez Power Apps. Zobacz motywy, aby uzyskać wskazówki dotyczące konfiguracji.
AccessibilityLabel Czytnik ekranu aria-label

Właściwości zdarzenia

Właściwości Opis
InputEvent Zdarzenie do wysłania do kontroli Np. SetFocus.

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 wartości false odpowiednimi wyrażeniami w języku 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
  )

Ustawianie fokusu na kontrolce

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ę.

Przykładowa formuła Power Fx:

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

Zmienna kontekstowa ctxResizableTextareaEvent zostałaby wówczas powiązana z właściwością Zdarzenie wejściowe.

Ograniczenia

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

Zobacz więcej uwag na temat ograniczeń w wyzwaniach związanych z projektowaniem składnika.

  • Last updated on