Udostępnij przez

Nav kontrola

Formant nawigacyjny.

Uwaga

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

Kontrolka Nav.

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.

Właściwości Items

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.

  • Last updated on