UI/src/lib/components/card

Card Components

Zestaw komponentów do tworzenia kart z opcjonalnym nagłówkiem, menu i stopką.

Komponenty

• ui-card - główny kontener karty
• ui-card-title - tytuł karty (standalone komponent)
• ui-card-menu - menu/przyciski w nagłówku (standalone komponent)
• ui-card-footer - stopka karty (standalone komponent)

Użycie

Podstawowe użycie z tytułem jako Input

<ui-card title="Tytuł karty">
  <p>Zawartość karty</p>
</ui-card>

Użycie z komponentem ui-card-title

<ui-card>
  <ui-card-title>
    <h2>Niestandardowy tytuł</h2>
    <span class="badge">Nowy</span>
  </ui-card-title>
  <p>Zawartość karty</p>
</ui-card>

Pełne użycie z wszystkimi komponentami

<ui-card title="Statystyki">
  <ui-card-menu>
    <button class="btn btn-sm">Edytuj</button>
    <button class="btn btn-sm">Usuń</button>
  </ui-card-menu>
  
  <div class="stats">
    <div class="stat-item">
      <span class="value">123</span>
      <span class="label">Użytkownicy</span>
    </div>
    <div class="stat-item">
      <span class="value">456</span>
      <span class="label">Zamówienia</span>
    </div>
  </div>
  
  <ui-card-footer>
    <small class="text-muted">Ostatnia aktualizacja: dziś</small>
  </ui-card-footer>
</ui-card>

Użycie z komponentami ui-card-title i ui-card-menu

<ui-card>
  <ui-card-title>
    <div class="d-flex align-items-center">
      <i class="icon-chart"></i>
      <span>Raporty sprzedaży</span>
    </div>
  </ui-card-title>
  
  <ui-card-menu>
    <div class="stats-mini">
      <span class="text-success">+12%</span>
    </div>
    <button class="btn btn-outline-primary btn-sm">Szczegóły</button>
  </ui-card-menu>
  
  <div class="chart-container">
    <!-- wykres -->
  </div>
  
  <ui-card-footer>
    <div class="d-flex justify-content-between">
      <span>Okres: ostatnie 30 dni</span>
      <a href="#" class="text-primary">Zobacz więcej</a>
    </div>
  </ui-card-footer>
</ui-card>

API

CardComponent (ui-card)

Inputs:

Właściwość	Typ	Domyślna	Opis
title	string	undefined	Tytuł karty wyświetlany w nagłówku

Content Projection:

Selektor	Opis
ui-card-title	Komponent tytułu karty
ui-card-menu	Komponent menu w nagłówku
(default)	Główna zawartość karty
ui-card-footer	Komponent stopki karty

CardTitleComponent (ui-card-title)

Opis: Standalone komponent do wyświetlania tytułu karty z własnymi stylami.

CardMenuComponent (ui-card-menu)

Opis: Standalone komponent do wyświetlania menu/przycisków w nagłówku karty.

CardFooterComponent (ui-card-footer)

Opis: Standalone komponent do wyświetlania stopki karty z własnymi stylami.

Zmienne CSS

Komponent używa następujących zmiennych CSS z systemu motywów:

Kolory

• --ui-color-card-bg - tło karty
• --ui-color-card-border - kolor obramowania
• --ui-color-card-title - kolor tytułu
• --ui-color-card-text - kolor tekstu
• --ui-color-card-footer-bg - tło stopki

Spacing

• --ui-spacing-xs (4px) - małe odstępy
• --ui-spacing-sm (8px) - średnie odstępy
• --ui-spacing-md (16px) - standardowe padding
• --ui-spacing-lg (24px) - duże odstępy

Layout

• --ui-border-radius (8px) - zaokrąglenie rogów
• --ui-font-size-lg (18px) - rozmiar czcionki tytułu
• --ui-font-weight-semibold (600) - grubość czcionki tytułu
• --ui-card-header-min-height (40px) - minimalna wysokość nagłówka

Cienie

• --ui-shadow-card - standardowy cień karty
• --ui-shadow-card-hover - cień przy hover

Responsywność

Na urządzeniach mobilnych (max-width: 768px):

• Nagłówek karty zmienia się na układ kolumnowy
• Menu wyrównuje się do prawej strony
• Zachowane są wszystkie funkcjonalności

Przykłady stylizacji

Karta z kolorowym nagłówkiem

.custom-card {
  .ui-card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin: -16px -16px 0;
    padding: 16px;
  }
  
  .ui-card-title {
    color: white;
  }
}

Karta z ikoną

<ui-card>
  <ui-card-title>
    <div class="d-flex align-items-center gap-2">
      <i class="icon-settings"></i>
      <span>Ustawienia</span>
    </div>
  </ui-card-title>
  
  <!-- zawartość -->
</ui-card>