cumulus-fab
Varianten
| Property | Optionen | Default |
|---|---|---|
State | Default, Pressed, Hover, Focus | Default |
isCondensed | Yes, No | Yes |
Design Tokens
| Variant | CSS Property | Token |
|---|---|---|
| State=Default, isCondensed=No | background | Brand/Cumulus/Strong |
| State=Default, isCondensed=No | background | Brand/Cumulus/Contrast |
| State=Default, isCondensed=No | border-color | Brand/Cumulus/Contrast |
| State=Default, isCondensed=No | box-shadow | High/Ambient/Blur |
| State=Default, isCondensed=No | padding-bottom | Padding/md (default) |
| State=Default, isCondensed=No | padding-top | Padding/md (default) |
| State=Default, isCondensed=Yes | background | Brand/Cumulus/Strong |
| State=Default, isCondensed=Yes | border-color | Brand/Cumulus/Contrast |
| State=Default, isCondensed=Yes | box-shadow | High/Ambient/Blur |
| State=Default, isCondensed=Yes | padding-bottom | Padding/md (default) |
| State=Default, isCondensed=Yes | padding-left | Padding/md (default) |
| State=Default, isCondensed=Yes | padding-right | Padding/md (default) |
| State=Default, isCondensed=Yes | padding-top | Padding/md (default) |
| State=Focus, isCondensed=No | background | Brand/Cumulus 3,0/main |
| State=Focus, isCondensed=No | background | Brand/Cumulus/Contrast |
| State=Focus, isCondensed=No | border-color | Brand/Cumulus/Contrast |
| State=Focus, isCondensed=No | box-shadow | High/Ambient/Blur |
| State=Focus, isCondensed=No | padding-bottom | Padding/md (default) |
| State=Focus, isCondensed=No | padding-top | Padding/md (default) |
| State=Focus, isCondensed=Yes | background | Brand/Cumulus 3,0/main |
| State=Focus, isCondensed=Yes | border-color | Brand/Cumulus/Contrast |
| State=Focus, isCondensed=Yes | box-shadow | High/Ambient/Blur |
| State=Focus, isCondensed=Yes | padding-bottom | Padding/md (default) |
| State=Focus, isCondensed=Yes | padding-left | Padding/md (default) |
| State=Focus, isCondensed=Yes | padding-right | Padding/md (default) |
| State=Focus, isCondensed=Yes | padding-top | Padding/md (default) |
| State=Hover, isCondensed=No | background | Brand/Cumulus 3,0/strong |
| State=Hover, isCondensed=No | background | Brand/Cumulus/Contrast |
| State=Hover, isCondensed=No | border-color | Brand/Cumulus/Contrast |
| State=Hover, isCondensed=No | box-shadow | High/Ambient/Blur |
| State=Hover, isCondensed=No | padding-bottom | Padding/md (default) |
| State=Hover, isCondensed=No | padding-top | Padding/md (default) |
| State=Hover, isCondensed=Yes | background | Brand/Cumulus 3,0/strong |
| State=Hover, isCondensed=Yes | border-color | Brand/Cumulus/Contrast |
| State=Hover, isCondensed=Yes | box-shadow | High/Ambient/Blur |
| State=Hover, isCondensed=Yes | padding-bottom | Padding/md (default) |
| State=Hover, isCondensed=Yes | padding-left | Padding/md (default) |
| State=Hover, isCondensed=Yes | padding-right | Padding/md (default) |
| State=Hover, isCondensed=Yes | padding-top | Padding/md (default) |
| State=Pressed, isCondensed=No | background | Brand/Cumulus 3,0/strong |
| State=Pressed, isCondensed=No | background | Brand/Cumulus/Contrast |
| State=Pressed, isCondensed=No | border-color | Brand/Cumulus/Contrast |
| State=Pressed, isCondensed=No | box-shadow | High/Ambient/Blur |
| State=Pressed, isCondensed=No | padding-bottom | Padding/md (default) |
| State=Pressed, isCondensed=No | padding-top | Padding/md (default) |
| State=Pressed, isCondensed=Yes | background | Brand/Cumulus 3,0/strong |
| State=Pressed, isCondensed=Yes | border-color | Brand/Cumulus/Contrast |
| State=Pressed, isCondensed=Yes | box-shadow | High/Ambient/Blur |
| State=Pressed, isCondensed=Yes | padding-bottom | Padding/md (default) |
| State=Pressed, isCondensed=Yes | padding-left | Padding/md (default) |
| State=Pressed, isCondensed=Yes | padding-right | Padding/md (default) |
| State=Pressed, isCondensed=Yes | padding-top | Padding/md (default) |
Beschreibung
Do / Don't
- ✅
- ❌
Angular Usage
html
<!-- Beispiel-Code einfügen -->typescript
// Input-Beispiel falls relevant