TabsView

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

TabsView

Widok zakładek (tabs) zgodny z komponentem Tabler/Bootstrap Tabs. Renderuje kartę z nagłówkiem zawierającym zakładki i panelami treści.

Schema

type: tabs
tabs:
  - title: Zakładka 1
    icon: home
    content: []
active: 0
fill: false

Parametry

type - Typ widoku: "tabs"
tabs - Tablica zakładek, każda z parametrami:
- title - Tytuł zakładki (string; opcjonalny jeśli podano icon)
- icon - Nazwa ikony Tabler Icons, np. pencil, cog (opcjonalny)
- content - Zawartość panelu zakładki (string, obiekt widoku lub tablica widoków)
active - Indeks aktywnej zakładki (domyślnie 0)
fill - Czy zakładki mają zajmować pełną szerokość (domyślnie false)

Przykłady użycia

Proste zakładki tekstowe

type: tabs
tabs:
  - title: Informacje
    content:
      - type: text
        content: Treść zakładki Informacje
  - title: Ustawienia
    content:
      - type: text
        content: Treść zakładki Ustawienia

Zakładki z ikonami

type: tabs
tabs:
  - title: Home
    icon: home
    content:
      type: text
      content: Witaj w domu!
  - title: Profil
    icon: user
    content:
      type: text
      content: Twój profil
  - icon: settings
    content:
      type: text
      content: Ustawienia

Zakładki pełnej szerokości z aktywną drugą zakładką

type: tabs
fill: true
active: 1
tabs:
  - title: Zamówienia
    content:
      - type: text
        content: Lista zamówień
  - title: Faktury
    content:
      - type: text
        content: Lista faktur
  - title: Raporty
    content:
      - type: button
        label: Generuj raport
        variant: primary