Riferimento degli stili

Questa pagina elenca ogni chiave della prop style e il metodo di Styled che la imposta in Rust. I componenti Rust applicano gli stili agli elementi con metodi tipizzati che prendono il nome dalle utility di Tailwind (.p_4(), .rounded(px(12.0)), .bg(color), da nsh_core::prelude), che si traducono nelle stesse chiavi; TSX passa oggetti style (e classi). La colonna Rust indica il metodo; a quasi tutti si può passare un valore, un signal o una closure, e .style_when(…) / .style_with(…) rendono condizionale qualsiasi metodo. Le chiavi e i loro tipi provengono dalle dichiarazioni generate in .nsh/types/nsh/types.d.ts, quindi l’editor le controlla mentre scrivi. Una chiave di stile corrisponde alla proprietà CSS con lo stesso nome, esattamente come la classe che la imposta: paddingLeft è padding-left e pl-4 di CSS, boxShadow è box-shadow e shadow-md; alcune chiavi hanno nomi più semplici, usati dalle app (paddingHorizontal per padding-inline, marginStart per margin-inline-start, numberOfLines per line-clamp). I numeri sono punti, e sono disponibili anche le funzionalità CSS: grid, gradienti, box shadow, filtri, blend mode, outline, transform, transizioni e animazioni keyframe.

Per sapere come applicare gli stili, combinarli con le classi ed ereditare gli stili del testo, vedi Styling. Per la sintassi delle classi, vedi il riferimento Tailwind.

#Le cinque interfacce

Ogni interfaccia estende quella precedente:

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 accetta anche un array; le voci vengono unite da sinistra a destra e quelle falsy vengono ignorate, quindi gli stili condizionali non richiedono lo spread. In Rust, .style_when(condition, …) aggiunge stili finché la condizione è vera:

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

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

#Come si leggono le chiavi di stile

Le chiavi di stile seguono il CSS, quindi uno stile e una classe che indicano la stessa proprietà fanno la stessa cosa:

• Direzione del layout. Una view che non imposta display dispone i figli in colonna. display: "flex" è una riga a meno che flexDirection sia impostato, come in CSS e nella classe flex. flexShrink è 0 se non impostato.
• Lati fisici e logici. left, right, marginLeft, paddingRight, borderLeftWidth, borderTopLeftRadius e textAlign: "left" mantengono il proprio lato nei layout da destra a sinistra. Le chiavi start ed end (marginStart, paddingEnd, start, end, borderStartWidth, …), la famiglia borderTopStartRadius e textAlign: "start" | "end" seguono la direzione: l’inline start è a sinistra nei layout da sinistra a destra e a destra in quelli da destra a sinistra.
• Colori dei bordi. Un bordo o un outline con larghezza impostata e colore non impostato viene disegnato con il colore del testo (currentColor di CSS).
• Transform. translate, rotate e scale sono proprietà a sé stanti, e transform accetta la stringa di funzioni CSS oppure un elenco di passaggi i cui valori possono essere valori animati. Si compongono in quest’ordine: translate, rotate, scale, poi transform.

#Tipi di valore

Le stringhe con sintassi CSS (boxShadow, textShadow, backgroundImage, filter, gridTemplateColumns, …) accettano lunghezze in px e numeri semplici (entrambi in punti), pt (4/3 di punto, come in CSS) oppure rem (16 punti).

#LayoutStyle

Il layout viene calcolato in Rust (flexbox e CSS grid). Una view che non imposta display è un flex container i cui figli sono impilati in colonna; display: "flex" ne fa una riga a meno che flexDirection sia impostato, come in CSS. Gli elementi hanno come valori predefiniti flexShrink: 0, alignContent: "flex-start" (grid: "normal" di CSS), alignItems: "stretch" e nessuna dimensione minima automatica. Vedi Layout.

#Display e posizione

#Flexbox

#Grid

Imposta display: "grid" per disporre i figli in una CSS grid. Gli elenchi di track usano la sintassi CSS.

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>

#Dimensioni

#Margin

I margin accettano "auto" (assorbe lo spazio libero, come in flexbox) e valori negativi. Le chiavi fisiche (tutte tranne marginStart / marginEnd) accettano anche un EnvValue: marginBottom: "env(keyboard-inset-height)" (in Rust .mb_keyboard(), .mt_safe_area(), …).

#Padding

Le chiavi fisiche (tutte tranne paddingStart / paddingEnd) accettano anche un EnvValue: paddingTop: "env(safe-area-inset-top)", paddingBottom: "calc(env(safe-area-inset-bottom) + 16px)" (in Rust .pt_safe_area(), .pb_safe_area_plus(px(16.0)), .pb_keyboard(), …). Un padding è almeno 0.

#ViewStyle

Tutto ciò che viene disegnato da una view. Si applicano anche tutte le chiavi di LayoutStyle.

#Sfondo

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)" }} />

#Bordi

Un lato con lo spessore impostato e un colore che nessuno imposta viene disegnato con il colore del testo, il currentColor di CSS: { borderWidth: 1, color: "#2563eb" } disegna un bordo blu. Anche gli outline prendono il colore del testo allo stesso modo.

#Angoli

#Outline

Un outline viene disegnato all’esterno del bordo e non occupa spazio nel layout.

#Ombre

Una vista proietta ombre con il boxShadow di CSS: più livelli, ombre con spread e ombre inset. Le transizioni la animano (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)" }} />

#Opacità, visibilità e overflow

#Trasformazioni

Le trasformazioni sono quelle di CSS: le proprietà translate, rotate e scale e transform, composte in quest’ordine. Ciascuna è una proprietà a sé, quindi il scale di uno stile sostituisce il scale-* di una classe e mantiene il suo rotate-*, e il transform di uno stile sostituisce le funzioni di trasformazione di una classe (rotate-x-*, skew-*).

Un TransformStep è un oggetto con una sola chiave, applicato nell’ordine dell’elenco:

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)" }} />

Un valore animato pilota direttamente translate, rotate e scale, e i passi di un elenco transform:

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

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

#Filtri e blending

#Transizioni

Quando una proprietà con transizione cambia (da un nuovo stile, una classe o una variante come active:), la piattaforma la anima in modo nativo. Durante l’animazione non viene eseguito alcun 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 }}
/>

#Animazioni keyframe

Animazioni keyframe integrate, eseguite in modo nativo (animate-* di Tailwind).

Per le animazioni guidate da valori, gesti o molle, usa invece l’API di animazione di nsh.

#Puntatore e selezione

#Paint SVG

Le proprietà di paint CSS delle forme SVG, che qualsiasi elemento accetta e che gli elementi al suo interno ereditano, come in un browser. Dipingono ciò che i componenti Rust disegnano sui canvas.

#TextStyle

Gli stili di testo si applicano a <Text> e <Input>. Sono anche ereditati, come in CSS: le proprietà di testo impostate su una vista passano ai testi e agli input al suo interno, e gli span <Text> annidati ereditano dal testo genitore. Si applicano anche tutte le chiavi di ViewStyle. Vedi Testo.

#Font

#Spaziatura e allineamento

#Righe e overflow

#Decorazione

#Segnaposto, cursore e selezione

placeholderColor e caretColor appartengono a InputStyle, lo stile di <Input>; selectionColor a TextStyle, poiché anche i testi selezionabili lo accettano.

#Ombra del testo

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

Tutte le chiavi di ViewStyle, più:

objectFit si applica anche a <Video>; vedi image e video.

#Prop che sembrano stili

L’ombra material di Android è una prop della piattaforma, impostata accanto allo stile:

#Correlati

• Styling: style, class, ereditarietà e precedenza.
• Tailwind reference: ogni utility e variante supportata.
• Layout: flexbox e grid in pratica.
• view, text, image: gli elementi a cui si applicano questi stili.

width, height e flexBasis accettano anche "min-content", "max-content" e "fit-content", calcolati da Taffy.