AvatarView

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

AvatarView

Widok awatara oparty na komponentach Tabler UI (avatar). Obsługuje obraz tła, inicjały, ikonę SVG, kolory, rozmiary, kształty, status (badge) oraz akcję onClick.

Schema

type: avatar
image: /static/avatars/002f.jpg
initials: JL
icon: "<svg>...</svg>"
color: green
size: md
shape: circle
status:
  color: success
onClick:
  action: emit
  event: avatarClicked
  data:
    userId: 123

Parametry

• type - Typ widoku: "avatar"
• image - URL obrazu tła awatara (opcjonalne) [template]
• initials - Inicjały do wyświetlenia, gdy brak obrazu (opcjonalne) [template]
• icon - HTML/SVG ikony do wyświetlenia wewnątrz awatara (opcjonalne)
• color - Kolor tła (light) dla inicjałów: blue, azure, indigo, purple, pink, red, orange, yellow, lime, green, teal, cyan, primary, secondary, success, danger, warning, info, dark (stosuje klasę bg-{color}-lt)
• size - Rozmiar: xs, sm, md (domyślnie), lg, xl
• shape - Kształt: default (domyślnie), rounded, circle, square, rounded-3
• status - Obiekt opisujący wskaźnik statusu:
  • color - Kolor badge'a: success, danger, warning, info, gray, itp.
  • content - Opcjonalna treść (np. liczba wiadomości)
• onClick - Akcja wykonywana po kliknięciu (opcjonalne)

Przykłady użycia

Awatar z obrazem

type: avatar
image: /static/avatars/002f.jpg

Awatar z inicjałami i kolorem

type: avatar
initials: JK
color: green

Awatar z ikoną

type: avatar
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>'

Awatar okrągły, duży, ze statusem online

type: avatar
image: /static/avatars/015m.jpg
size: lg
shape: circle
status:
  color: success

Awatar ze wskaźnikiem liczby wiadomości

type: avatar
initials: SA
color: primary
status:
  color: gray
  content: "5"

Klikalny awatar użytkownika

type: avatar
image: "/static/avatars/{{avatar}}"
shape: circle
onClick:
  action: emit
  event: generatePage
  data:
    module: core/users
    page: profile/123

Dostępne akcje onClick

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

Uwagi

• Priorytet zawartości: image > icon > initials
• Gdy podany jest image, zostaje ustawiony jako background-image
• Pole icon jest wstawiane jako HTML (np. inline SVG z Tabler Icons)