BadgeView

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

BadgeView

Widok odznaki (badge) oparty na komponentach Tabler UI. Obsługuje różne kolory, warianty (light, pill), rozmiary oraz akcję onClick.

Schema

type: badge
content: Aktywny
color: green
light: false
pill: false
size: md
onClick:
  action: emit
  event: badgeClicked
  data:
    status: active

Parametry

• type - Typ widoku: "badge"
• content - Tekst odznaki (wymagane) [template]
• data - Dane do zastąpienia w szablonie (opcjonalne)
• variant - Publiczna nazwa koloru odznaki (działa z variantIf); alias: color
• color - Kolor odznaki (opcjonalne, domyślnie brak = domyślny kolor Tabler) Dostępne wartości: blue, azure, indigo, purple, pink, red, orange, yellow, lime, green, teal, cyan, primary, secondary, success, danger, warning, info, dark, muted
• light - Lekka wersja koloru (używa klas -lt), domyślnie false
• pill - Odznaka z zaokrąglonymi rogami (klasa badge-pill), domyślnie false
• size - Rozmiar odznaki: sm, md (domyślnie), lg
• onClick - Akcja wykonywana po kliknięciu (opcjonalne)

Przykłady użycia

Prosta odznaka

type: badge
content: Nowe
color: primary

Odznaka w lekkim wariancie

type: badge
content: Aktywny
color: green
light: true

Odznaka pill z numerem

type: badge
content: "12"
color: red
pill: true

Mała odznaka

type: badge
content: Beta
color: azure
light: true
size: sm

Klikalna odznaka ze statusem

type: badge
content: Oczekuje
color: yellow
light: true
pill: true
onClick:
  action: emit
  event: generatePage
  data:
    module: core/orders
    page: list?status=pending

W połączeniu z innymi widokami

type: row
cols:
  - childs:
      - type: text
        content: "Status zamówienia:"
      - type: badge
        content: Wysłane
        color: green
        light: true
        pill: true

Dostępne akcje onClick

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