DropdownView

Źródło: views/DropdownView.js

DropdownView

Widok rozwijanego menu (dropdown) opartego na komponentach Tabler/Bootstrap. Obsługuje elementy menu z ikonami, badge'ami, nagłówkami, dividerami oraz akcje onClick na poszczególnych pozycjach.

Parametry przycisku

• type - Typ widoku: "dropdown"
• id - Identyfikator widoku (opcjonalne)
• label - Tekst na przycisku rozwijającym menu
• variant - Wariant Tabler: primary, secondary, success, danger, warning, info (domyślnie: primary)
• outline - Czy przycisk ma być typu outline (opcjonalne)
• size - Rozmiar przycisku: sm, md, lg (opcjonalne)
• icon - Ikona Tabler na przycisku (opcjonalne)
• disabled - Czy przycisk jest wyłączony (opcjonalne)
• className - Dodatkowe klasy CSS na wrapper (opcjonalne)
• arrow - Czy menu ma strzałkę wskazującą na przycisk (opcjonalne)
• dark - Czy menu ma ciemne tło (opcjonalne)

Typy elementów items

item – zwykły element menu

• label - Tekst elementu
• icon - Ikona Tabler (opcjonalne)
• badge - Obiekt badge: { label: "12", color: "primary" } (opcjonalne)
• active - Czy element jest aktywny (opcjonalne)
• disabled - Czy element jest wyłączony (opcjonalne)
• onClick - Akcja po kliknięciu (opcjonalne) – obsługuje wszystkie akcje z ActionHandler

header – nagłówek sekcji

• label - Tekst nagłówka

divider – separator

Brak dodatkowych parametrów.

Dostępne akcje onClick

Pole onClick w elementach menu obsługuje wszystkie akcje zdefiniowane w ActionHandler. Pełna dokumentacja: Dostępne Akcje (ActionHandler)

Przykłady użycia

Proste menu

type: dropdown
label: Akcje
variant: primary
items:
  - type: item
    label: Edytuj
    icon: pencil
    onClick:
      action: openModal
      target: editModal
  - type: item
    label: Kopiuj
    icon: copy
    onClick:
      action: emit
      event: copy
  - type: divider
  - type: item
    label: Usuń
    icon: trash
    onClick:
      action: confirm
      type: danger
      title: Usunąć?
      onYes:
        action: callMethod
        module: core/items
        method: delete

Menu z nagłówkami i badge'ami

type: dropdown
label: Filtruj
variant: secondary
outline: true
icon: filter
arrow: true
items:
  - type: header
    label: Status
  - type: item
    label: Aktywne
    badge:
      label: "5"
      color: green
  - type: item
    label: Archiwalne
    badge:
      label: "23"
      color: secondary
  - type: divider
  - type: header
    label: Priorytet
  - type: item
    label: Wysoki
    active: true
  - type: item
    label: Niski