4.4 KiB

Raw Blame History

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>

4.4 KiB Raw Blame History