Nav kontrola

Formant nawigacyjny.

Uwaga

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

opis

Okienko nawigacji (Nav) zawiera łącza do głównych obszarów aplikacji lub witryny.

Składnik kodu Nav umożliwia używanie składnika interfejsu użytkownika Fluent Nav z aplikacji kanwy i niestandardowych stron.

Uwaga

Źródłowy kod składnika i więcej informacji dostępnych w repozytorium GitHub komponentów kodu.

Właściwości

Właściwości klucza

Właściwości	opis
Selected key	Klucz do wybrania. To zdarzenie zostanie zaktualizowane za pomocą zdarzenia OnChange, gdy użytkownik wchodzi z formantem.
Items	Wymagane. Tabela źródło danych elementów do renderowania.
Fields	Wymagane. Pola zawarte w zestawie danych.

Items Właściwości

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

Imię i nazwisko/nazwa	opis
ItemDisplayName	Wyświetlana nazwa polecenia/karty/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
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
ItemParentKey	Renderuj opcję jako element podrzędny innej opcji
ItemExpanded	Ustaw wartość false lub true (jeśli grupa powinna zostać zwiniętą lub rozwiniętą odpowiednio).

Przykład:

Table(
  {
      ItemKey: "1",
      ItemDisplayName: "Home with Icon & Custom color",
      ItemIconName: "Home",
      ItemIconColor: "Green"
  },
  {
      ItemKey: "2",
      ItemDisplayName: "Documents",
      ItemExpanded: true
  },
  {
      ItemKey: "3",
      ItemDisplayName: "Contents"
  },
  {
      ItemKey: "4",
      ItemDisplayName: "Item Invisible",
      ItemVisible: false
  },
  {
      ItemKey: "5",
      ItemDisplayName: "Quick Reference Guide",
      ItemParentKey: "3",
      ItemIconName: "Document"
  }
)

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. Zobacz motywy, aby uzyskać wskazówki dotyczące konfiguracji.
AccessibilityLabel	Czytnik ekranu aria-label
CollapseByDefault	Ustaw na Prawda lub Fałsz (wł. lub wył.), aby wszystkie grupy Nav pozostały odpowiednio zwinięte lub rozwinięte. Właściwość rozwijania poziomu poszczególnych elementów jest respektowana.

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 */
    "1", false,

    /* Action for ItemKey 2 */
    "2", false,

    /* Action for ItemKey 3 */
    "3", false,

    /* Action for ItemKey 4 */
    "4", false,

    /* Action for ItemKey 5 */
    "5", 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.