tuix-paper
Das Flächen-Primitiv für Hintergrund, Elevation und Eckenrundung.
tuix-paper ist die Karte hinter allem anderen. Es besitzt die Flächenfarbe,
damit Hell und Dunkel konsistent bleiben; der Inhalt kommt in den Default-Slot.
Ein eigenes Padding bringt es nicht mit.
Elevation
Im hellen Modus ist die Fläche weiss und die Elevation ein Schatten; im dunklen Modus gibt es keinen Schatten, die Elevation ist eine hellere Fläche. Ein Wechsel des Themes in der Seitenleiste zeigt beides.
| Wert | Attribut | Schatten (hell) | Hintergrund (dunkel) |
|---|---|---|---|
PaperElevation.VARIANT_0 | 0 | keiner | #121212 |
PaperElevation.VARIANT_1 | 1 | 0 1px 4px | rgb(23 23 26) |
PaperElevation.VARIANT_2 | 2 | 0 2px 8px | rgb(26 26 31) |
PaperElevation.VARIANT_3 | 3 | 0 4px 16px | rgb(29 29 36) |
PaperElevation.VARIANT_4 | 4 | 0 7px 24px | rgb(33 33 40) |
Die Schattenfarbe ist Palette.SHADOW (rgba(66, 79, 101, 0.16)).
Eckenrundung
BorderRadiusPaper ist eine Bequemlichkeit, keine Einschränkung: der Wert wird
unverändert auf border-radius gesetzt, das Attribut nimmt also jeden
CSS-Wert: border-radius="12px" und border-radius="50%" funktionieren beide
in reinem HTML. Die Property ist allerdings mit dem Enum typisiert: in
TypeScript (auch in der Prop borderRadius des React-Wrappers) kompilieren nur
die vier Einträge unten.
| Wert | Attribut |
|---|---|
BorderRadiusPaper.NONE | 0px |
BorderRadiusPaper.SOFT | 4px |
BorderRadiusPaper.MEDIUM | 10px |
BorderRadiusPaper.STRONG | 20px |
API
Properties
| Property | Attribut | Typ | Standard | Beschreibung |
|---|---|---|---|---|
elevation | elevation | PaperElevation | 1 | Schattentiefe im hellen, Flächenfarbe im dunklen Modus |
borderRadius | border-radius | BorderRadiusPaper | 0px | Eckenrundung; das Attribut nimmt jeden CSS-Wert |
dark | dark | boolean | false | Dunkle Palette |
Slots
| Slot | Inhalt |
|---|---|
| default | Der Karteninhalt. tuix-paper setzt kein Padding; das gehört zum Inhalt |
Hinweise
tuix-toast und tuix-modal bauen auf tuix-paper mit Elevation 4 und 4px
Rundung auf, dem Hausstil für alles Schwebende.