Foundation · 6 Varianten
Ebenen ohne Schatten
components/system/foundations/EbenenOhneSchatten.astro
Drei Stufen Höhe ohne Schatten: Fond, Kante, Deckel. Reihenfolge trägt, Opazität trennt.
Notizen
- System-Entscheidung: kein Schatten. Elevation-Leiter der Anfrage wird durch Fond-Tiefe, Kante und opaken Deckel ersetzt.
- Liberate, Infinite: Flächen ohne Schatten, Kante oder Fond trennt. Shadcnblocks nicht gelesen, Optik ist dort Schatten.
- Nichts davon geht nach global.css, bis Approved. z-Werte sind die bestehenden.
Props
| Name | Typ | Default | Notiz |
|---|---|---|---|
| variant | "fond" | "kante" | "deckel" | "stapel" | "sticky" | "menue" | "fond" | 01–06. |
| surface | "nacht" | "paper" | "nacht" | Pflicht-Paar. |
<EbenenOhneSchatten variant="fond" surface="nacht" />01 · Fond
Drei Tiefen in Granit
Karten-Fond. 0 Fläche, 1 granit-100/900, 2 granit-200/800.
Nacht
Stufe 0 · Fläche
Stufe 1 · Fond
Stufe 2 · Fond tief
Paper
Stufe 0 · Fläche
Stufe 1 · Fond
Stufe 2 · Fond tief
02 · Kante
Haarlinie, Kante, Deckel
Button Secondary. Stärke bleibt 1px, Farbe steigt.
Nacht
Stufe 1 · Haarlinie
Stufe 2 · Kante
Stufe 3 · Deckel invertiert
Paper
Stufe 1 · Haarlinie
Stufe 2 · Kante
Stufe 3 · Deckel invertiert
03 · Deckel
Opak über Fond
Overlay z 40. Kein Schleier, Deckel invertiert die Fläche.
Nacht
Darunter · z 0
Deckel · z 40, opak
Paper
Darunter · z 0
Deckel · z 40, opak
04 · Stapel
z 0 / 10 / 40
z-index-Leiter. Drei Ebenen ineinander.
Nacht
z 0
z 10
z 40
Paper
z 0
z 10
z 40
05 · Sticky
Spalte über Fluss
Split-Sektionen. content z 10 ohne Schatten.
Nacht
sticky · z 10
Fluss · z 0
Paper
sticky · z 10
Fluss · z 0
06 · Menü
nav, overlay, toast
Header, Shell. z 50, 40, 60 nebeneinander.
Nacht
nav · z 50
overlay · z 40, opak
toast · z 60
Paper
nav · z 50
overlay · z 40, opak
toast · z 60