Stilreferenz

Diese Seite listet jeden Key der style-Prop auf, dazu die Methode von Styled, die ihn in Rust setzt. Rust-Komponenten stylen Elemente mit typisierten Methoden, die nach Tailwinds Utilities benannt sind (.p_4(), .rounded(px(12.0)), .bg(color), aus nsh_core::prelude) und auf dieselben Keys abgebildet werden; TSX übergibt style-Objekte (und Klassen). Die Rust-Spalte nennt die Methode; die meisten Methoden akzeptieren einen Wert, ein Signal oder eine Closure, und .style_when(…) / .style_with(…) machen jede davon bedingt. Die Keys und ihre Typen stammen aus den generierten Deklarationen in .nsh/types/nsh/types.d.ts, sodass dein Editor sie beim Tippen prüft. Ein Style-Key steht für die CSS-Eigenschaft gleichen Namens, genau wie die Klasse, die sie setzt: paddingLeft ist CSS’ padding-left und pl-4, boxShadow ist box-shadow und shadow-md; einige Keys haben schlichtere Namen, wie Apps sie schreiben (paddingHorizontal für padding-inline, marginStart für margin-inline-start, numberOfLines für line-clamp). Zahlen sind Punkte, und auch die CSS-Features sind vorhanden: Grid, Verläufe, Box-Shadows, Filter, Blend-Modes, Outlines, Transforms, Transitions und Keyframe-Animationen.

Wie du Styles anwendest, mit Klassen kombinierst und Textstile vererbst, steht unter Styling. Die Klassensyntax findest du in der Tailwind-Referenz.

#Die fünf Interfaces

Jedes Interface erweitert das vorherige:

use nsh_core::prelude::*;

fn card() -> View {
    view().p_4().rounded(px(12.0)).bg(white()).shadow([BoxShadow {
        offset_y: px(4.0),
        blur: px(12.0),
        color: rgba(0x00000014).into(),
        ..BoxShadow::default()
    }])
}

fn title(label: &str) -> Text {
    text(label.to_string()).text_size(px(17.0)).font_weight(FontWeight::SEMIBOLD).text_color(rgb(0x111111))
}

card().child(title("Hello"))

import type { ViewStyle, TextStyle } from "nsh";
import { Text, View } from "nsh";

const card: ViewStyle = {
  padding: 16,
  borderRadius: 12,
  backgroundColor: "#fff",
  boxShadow: "0 4px 12px rgb(0 0 0 / 0.08)",
};

const title: TextStyle = { fontSize: 17, fontWeight: "600", color: "#111" };

<View style={card}>
  <Text style={title}>Hello</Text>
</View>;

style akzeptiert auch ein Array; die Einträge werden von links nach rechts zusammengeführt, und falsy-Einträge werden übersprungen, sodass bedingte Styles kein Spreading brauchen. In Rust fügt .style_when(condition, …) Styles hinzu, solange die Bedingung zutrifft:

card().style_when(selected, |s| s.border_color(rgb(0x2563eb)).border(px(2.0)))

<View style={[card, selected() && { borderColor: "#2563eb", borderWidth: 2 }]} />

#Wie Style-Keys zu lesen sind

Style-Keys folgen CSS, daher bewirken ein Style und eine Klasse, die dieselbe Eigenschaft benennen, dasselbe:

• Layout-Richtung. Eine View ohne display ordnet ihre Kinder in einer Spalte an. display: "flex" ergibt eine Zeile, sofern nicht flexDirection gesetzt ist, wie in CSS und bei der Klasse flex. flexShrink ist 0, sofern nicht anders gesetzt.
• Physische und logische Seiten. left, right, marginLeft, paddingRight, borderLeftWidth, borderTopLeftRadius und textAlign: "left" behalten ihre Seite auch in Right-to-Left-Layouts. Die Start- und End-Keys (marginStart, paddingEnd, start, end, borderStartWidth, …), die borderTopStartRadius-Familie und textAlign: "start" | "end" folgen der Richtung: Inline-Start ist in Left-to-Right-Layouts links und in Right-to-Left-Layouts rechts.
• Rahmenfarben. Ein Rahmen oder eine Outline, deren Breite gesetzt ist, deren Farbe aber nicht, wird in der Textfarbe gezeichnet (CSS’ currentColor).
• Transforms. translate, rotate und scale sind eigene Eigenschaften, und transform akzeptiert CSS’ String aus Funktionen oder eine Liste von Schritten, deren Beträge animierte Werte sein können. Sie werden in dieser Reihenfolge angewendet: translate, rotate, scale, dann transform.

#Werttypen

Strings mit CSS-Syntax (boxShadow, textShadow, backgroundImage, filter, gridTemplateColumns, …) akzeptieren Längen in px und als reine Zahlen (beides Punkte), pt (4/3 Punkt, wie in CSS) oder rem (16 Punkte).

#LayoutStyle

Das Layout wird in Rust berechnet (Flexbox und CSS Grid). Eine View ohne display ist ein Flex-Container, dessen Kinder in einer Spalte gestapelt werden; display: "flex" macht daraus eine Zeile, sofern nicht flexDirection gesetzt ist, wie in CSS. Elemente haben standardmäßig flexShrink: 0, alignContent: "flex-start" (Grids: CSS’ "normal"), alignItems: "stretch" und keine automatische Mindestgröße. Siehe Layout.

#Display und Position

#Flexbox

#Grid

Setze display: "grid", um Kinder in einem CSS Grid anzuordnen. Track-Listen verwenden CSS-Syntax.

view()
    .grid()
    .grid_template_columns("repeat(3, 1fr)")
    .gap_2()
    .child(view().col_span(2).h(px(60.0)).bg(rgb(0xc7d2fe)))
    .child(view().h(px(60.0)).bg(rgb(0xa5b4fc)))

<View style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
  <View style={{ gridColumn: "span 2", height: 60, backgroundColor: "#c7d2fe" }} />
  <View style={{ height: 60, backgroundColor: "#a5b4fc" }} />
</View>

#Größe

#Margin

Margins akzeptieren "auto" (nimmt freien Platz auf, wie in Flexbox) und negative Werte. Die physischen Keys (alle außer marginStart / marginEnd) akzeptieren auch eine EnvValue: marginBottom: "env(keyboard-inset-height)" (Rust .mb_keyboard(), .mt_safe_area(), …).

#Padding

Die physischen Keys (alle außer paddingStart / paddingEnd) akzeptieren auch eine EnvValue: paddingTop: "env(safe-area-inset-top)", paddingBottom: "calc(env(safe-area-inset-bottom) + 16px)" (Rust .pt_safe_area(), .pb_safe_area_plus(px(16.0)), .pb_keyboard(), …). Ein Padding ist mindestens 0.

#ViewStyle

Alles, was eine View zeichnet. Alle Keys von LayoutStyle gelten ebenfalls.

#Hintergrund

view().h(px(120.0)).rounded(px(16.0)).bg_linear(deg(135.0)).gradient_from(rgb(0x6366f1)).gradient_to(rgb(0xec4899))

<View style={{ height: 120, borderRadius: 16, backgroundImage: "linear-gradient(135deg, #6366f1, #ec4899)" }} />

#Rahmen

Eine Seite, deren Breite gesetzt ist und deren Farbe nichts festlegt, wird in der Textfarbe gezeichnet, CSS’ currentColor: { borderWidth: 1, color: "#2563eb" } zeichnet einen blauen Rahmen. Konturen übernehmen die Textfarbe auf dieselbe Weise.

#Ecken

#Kontur

Eine Kontur wird außerhalb des Rahmens gezeichnet und beansprucht im Layout keinen Platz.

#Schatten

Eine View wirft Schatten mit CSS’ boxShadow: mehrere Ebenen, Spread- und Inset-Schatten. Transitions animieren sie (transitionProperty: "boxShadow").

view().p_4().rounded(px(12.0)).bg(white()).shadow([
    BoxShadow { offset_y: px(1.0), blur: px(2.0), color: rgba(0x0000000f).into(), ..BoxShadow::default() },
    BoxShadow { offset_y: px(8.0), blur: px(24.0), spread: px(-4.0), color: rgba(0x0000001f).into(), ..BoxShadow::default() },
])

<View style={{ padding: 16, borderRadius: 12, backgroundColor: "#fff",
  boxShadow: "0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.12)" }} />

#Deckkraft, Sichtbarkeit und Overflow

#Transforms

Transforms entsprechen denen von CSS: die Eigenschaften translate, rotate und scale sowie transform, in dieser Reihenfolge zusammengesetzt. Jede ist eine eigene Eigenschaft, sodass das scale eines Styles das scale-* einer Klasse ersetzt und dessen rotate-* beibehält, und das transform eines Styles die Transform-Funktionen einer Klasse ersetzt (rotate-x-*, skew-*).

Ein TransformStep ist ein Objekt mit einem Schlüssel, angewendet in der Reihenfolge der Liste:

view().perspective(px(600.0)).child(view().rotate_y(deg(20.0)).scale(0.95))

<View style={{ transform: "perspective(600px) rotateY(20deg) scale(0.95)" }} />

Ein animierter Wert steuert translate, rotate und scale direkt sowie die Schritte einer transform-Liste:

const x = createAnimatedValue(0);
const angle = createAnimatedValue(0);

<View style={{ translate: [x, 0], rotate: angle }} />
<View style={{ transform: [{ perspective: 800 }, { rotateY: angle }] }} />

#Filter und Blending

#Transitions

Ändert sich eine Eigenschaft mit Transition (durch einen neuen Style, eine Klasse oder eine Variante wie active:), animiert die Plattform sie nativ. Während der Animation läuft kein JS.

view()
    .on_press(move || open.update(|o| *o = !*o))
    .h(move || px(if open.get() { 160.0 } else { 56.0 }))
    .opacity(move || if open.get() { 1.0 } else { 0.8 })
    .transition()
    .duration(200.0)

<View
  onPress={() => open.set(!open())}
  style={{ height: open() ? 160 : 56, opacity: open() ? 1 : 0.8,
    transitionProperty: "opacity, transform", transitionDuration: 200 }}
/>

#Keyframe-Animationen

Eingebaute Keyframe-Animationen, nativ ausgeführt (Tailwinds animate-*).

Für Animationen, die von Werten, Gesten oder Springs gesteuert werden, verwende stattdessen die Animations-API von nsh.

#Zeiger und Auswahl

#SVG-Paint

CSS’ Paint-Eigenschaften von SVG-Formen, die jedes Element annimmt und die die darin enthaltenen Elemente erben, wie in einem Browser. Sie malen, was Rust-Komponenten auf Canvases zeichnen.

#TextStyle

Text-Styles gelten für <Text> und <Input>. Sie werden außerdem vererbt, wie in CSS: Text-Eigenschaften, die auf einer View gesetzt sind, gehen an die Texte und Eingaben darin über, und verschachtelte <Text>-Spans erben von ihrem übergeordneten Text. Alle Schlüssel von ViewStyle gelten ebenfalls. Siehe Text.

#Schrift

#Abstände und Ausrichtung

#Zeilen und Überlauf

#Dekoration

#Platzhalter, Cursor und Auswahl

placeholderColor und caretColor gehören zu InputStyle, dem Stil von <Input>; selectionColor zu TextStyle, da auch auswählbare Texte ihn übernehmen.

#Textschatten

text("Title").text_shadow([TextShadow {
    offset_y: px(1.0),
    radius: px(2.0),
    color: rgba(0x0000004d).into(),
    ..TextShadow::default()
}])

<Text style={{ textShadow: "0 1px 2px rgb(0 0 0 / 0.3)" }}>Title</Text>

#ImageStyle

Alle Schlüssel von ViewStyle sowie:

objectFit gilt auch für <Video>; siehe image und video.

#Props, die wie Stile aussehen

Der Material-Schatten von Android ist eine plattformspezifische Prop, die neben dem Stil gesetzt wird:

#Verwandte Themen

• Styling: style, class, Vererbung und Rangfolge.
• Tailwind-Referenz: alle unterstützten Utilities und Varianten.
• Layout: Flexbox und Grid in der Praxis.
• view, text, image: die Elemente, auf die diese Stile angewendet werden.

width, height und flexBasis akzeptieren auch "min-content", "max-content" und "fit-content", berechnet von Taffy.