118 lines
1.7 KiB
Markdown
118 lines
1.7 KiB
Markdown
# COMPONENT_GUIDE.md
|
||
|
||
## Zweck
|
||
Dieses Dokument beschreibt die **standardisierten UI-Komponenten** für Buttons und Forms.
|
||
|
||
Ziel:
|
||
- konsistentes Look & Feel
|
||
- vorhersehbare Interaktion
|
||
- minimale Variantenvielfalt
|
||
|
||
---
|
||
|
||
## Buttons
|
||
|
||
### Grundregel
|
||
|
||
Buttons sind **Aktionen**, keine Dekoration.
|
||
|
||
Maximal **eine Primary-Action pro View**.
|
||
|
||
---
|
||
|
||
### Button-Typen
|
||
|
||
#### Primary
|
||
- wichtigste Aktion
|
||
- nutzt Akzentfarbe
|
||
|
||
```html
|
||
<button class="button primary">Speichern</button>
|
||
```
|
||
|
||
#### Secondary
|
||
- alternative Aktionen
|
||
- kein visueller Fokus
|
||
|
||
```html
|
||
<button class="button secondary">Abbrechen</button>
|
||
```
|
||
|
||
#### Danger
|
||
- destruktive Aktionen
|
||
- immer bewusst einsetzen
|
||
|
||
```html
|
||
<button class="button danger">Löschen</button>
|
||
```
|
||
|
||
---
|
||
|
||
### Disabled State
|
||
|
||
```html
|
||
<button class="button primary" disabled>Speichern</button>
|
||
```
|
||
|
||
Disabled bedeutet: Aktion derzeit nicht möglich – nicht verstecken.
|
||
|
||
---
|
||
|
||
## Forms
|
||
|
||
### Struktur
|
||
|
||
```html
|
||
<div class="form-group">
|
||
<label>Name</label>
|
||
<input type="text" />
|
||
<div class="hint">Pflichtfeld</div>
|
||
</div>
|
||
```
|
||
|
||
---
|
||
|
||
### Validierung
|
||
|
||
```html
|
||
<div class="form-group form-error">
|
||
<label>Email</label>
|
||
<input type="email" />
|
||
<div class="hint">Ungültige Adresse</div>
|
||
</div>
|
||
```
|
||
|
||
Regeln:
|
||
- Fehler sind sichtbar
|
||
- keine Farbcodes ohne Text
|
||
|
||
---
|
||
|
||
## Do / Don’t
|
||
|
||
### Do
|
||
- klare Button-Texte
|
||
- konsistente Platzierung
|
||
- sichtbare Fokus-Zustände
|
||
|
||
### Don’t
|
||
- Icons ohne Text
|
||
- mehrere Primary-Buttons
|
||
- versteckte Fehlermeldungen
|
||
|
||
---
|
||
|
||
## Erweiterbarkeit
|
||
|
||
- weitere Komponenten dürfen ergänzt werden
|
||
- bestehende Klassen nicht brechen
|
||
- Tokens bleiben die Grundlage
|
||
|
||
---
|
||
|
||
## Status
|
||
|
||
Version: **v1.0 (Baseline)**
|
||
|
||
Dieses Dokument ergänzt `DESIGN.md` und `CSS_GUIDE.md`.
|