187 lines
4.4 KiB
Markdown
187 lines
4.4 KiB
Markdown
# 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
|
|
|
|
```html
|
|
<ui-card title="Tytuł karty">
|
|
<p>Zawartość karty</p>
|
|
</ui-card>
|
|
```
|
|
|
|
### Użycie z komponentem ui-card-title
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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
|
|
|
|
```scss
|
|
.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ą
|
|
|
|
```html
|
|
<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>
|
|
```
|