Référence des styles

Cette page liste chaque clé de la prop style, ainsi que la méthode de Styled qui la définit en Rust. Les composants Rust stylent les éléments avec des méthodes typées nommées d’après les utilitaires de Tailwind (.p_4(), .rounded(px(12.0)), .bg(color), depuis nsh_core::prelude), qui se réduisent aux mêmes clés ; TSX passe des objets style (et des classes). La colonne Rust indique la méthode ; la plupart acceptent une valeur, un signal ou une closure, et .style_when(…) / .style_with(…) rendent n’importe laquelle conditionnelle. Les clés et leurs types proviennent des déclarations générées dans .nsh/types/nsh/types.d.ts, si bien que votre éditeur les vérifie pendant la saisie. Une clé de style désigne la propriété CSS du même nom, comme la classe qui la définit : paddingLeft correspond à padding-left et pl-4 en CSS, boxShadow à box-shadow et shadow-md ; quelques clés prennent des noms plus simples, ceux qu’écrivent les applications (paddingHorizontal pour padding-inline, marginStart pour margin-inline-start, numberOfLines pour line-clamp). Les nombres sont des points, et les fonctionnalités CSS sont aussi présentes : grille, dégradés, ombres portées, filtres, modes de fusion, contours, transformations, transitions et animations par keyframes.

Pour savoir comment appliquer les styles, les combiner avec des classes et hériter des styles de texte, consultez Styles. Pour la syntaxe des classes, consultez la référence Tailwind.

#Les cinq interfaces

Chaque interface étend la précédente :

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 accepte aussi un tableau ; les entrées sont fusionnées de gauche à droite et les entrées falsy sont ignorées, ce qui évite d’utiliser la décomposition (spread) pour les styles conditionnels. En Rust, .style_when(condition, …) ajoute des styles tant que la condition est vraie :

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

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

#Comment lire les clés de style

Les clés de style suivent le CSS : un style et une classe qui désignent la même propriété produisent le même effet.

• Direction de la mise en page. Une vue qui ne définit pas display dispose ses enfants en colonne. display: "flex" donne une ligne sauf si flexDirection est défini, comme en CSS et avec la classe flex. flexShrink vaut 0 sauf indication contraire.
• Côtés physiques et logiques. left, right, marginLeft, paddingRight, borderLeftWidth, borderTopLeftRadius et textAlign: "left" conservent leur côté dans les mises en page de droite à gauche. Les clés de début et de fin (marginStart, paddingEnd, start, end, borderStartWidth, …), la famille borderTopStartRadius et textAlign: "start" | "end" suivent la direction : le début en ligne est la gauche dans les mises en page de gauche à droite et la droite dans celles de droite à gauche.
• Couleurs de bordure. Une bordure ou un contour dont l’épaisseur est définie mais pas la couleur est dessiné avec la couleur du texte (currentColor en CSS).
• Transformations. translate, rotate et scale sont des propriétés à part entière, et transform accepte la chaîne de fonctions CSS ou une liste d’étapes dont les valeurs peuvent être des valeurs animées. Elles se composent dans cet ordre : translate, rotate, scale, puis transform.

#Types de valeurs

Les chaînes à syntaxe CSS (boxShadow, textShadow, backgroundImage, filter, gridTemplateColumns, …) acceptent des longueurs en px et des nombres sans unité (tous deux en points), en pt (4/3 de point, comme en CSS) ou en rem (16 points).

#LayoutStyle

La mise en page est calculée en Rust (flexbox et grille CSS). Une vue qui ne définit pas display est un conteneur flex dont les enfants s’empilent en colonne ; display: "flex" en fait une ligne sauf si flexDirection est défini, comme en CSS. Par défaut, les éléments ont flexShrink: 0, alignContent: "flex-start" (grilles : "normal" du CSS), alignItems: "stretch", et aucune taille minimale automatique. Voir Mise en page.

#Affichage et position

#Flexbox

#Grille

Définissez display: "grid" pour disposer les enfants dans une grille CSS. Les listes de pistes utilisent la syntaxe 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>

#Taille

#Marges

Les marges acceptent "auto" (absorbe l’espace libre, comme en flexbox) et les valeurs négatives. Les clés physiques (toutes sauf marginStart / marginEnd) acceptent aussi un EnvValue : marginBottom: "env(keyboard-inset-height)" (en Rust .mb_keyboard(), .mt_safe_area(), …).

#Padding

Les clés physiques (toutes sauf paddingStart / paddingEnd) acceptent aussi un EnvValue : paddingTop: "env(safe-area-inset-top)", paddingBottom: "calc(env(safe-area-inset-bottom) + 16px)" (en Rust .pt_safe_area(), .pb_safe_area_plus(px(16.0)), .pb_keyboard(), …). Un padding vaut au minimum 0.

#ViewStyle

Tout ce qui est dessiné par une vue. Toutes les clés de LayoutStyle s’appliquent aussi.

#Arrière-plan

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

#Bordures

Un côté dont l’épaisseur est définie et dont la couleur n’est définie par rien est dessiné avec la couleur du texte, le currentColor de CSS : { borderWidth: 1, color: "#2563eb" } dessine une bordure bleue. Les contours prennent la couleur du texte de la même façon.

#Coins

#Contour

Un contour est dessiné à l’extérieur de la bordure et ne prend aucune place dans la mise en page.

#Ombres

Une vue projette des ombres avec le boxShadow de CSS : plusieurs couches, ombres avec étalement et ombres internes. Les transitions l’animent (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é et débordement

#Transformations

Les transformations sont celles de CSS : les propriétés translate, rotate et scale puis transform, composées dans cet ordre. Chacune est une propriété à part entière, donc le scale d’un style remplace le scale-* d’une classe et conserve son rotate-*, et le transform d’un style remplace les fonctions de transformation d’une classe (rotate-x-*, skew-*).

Une TransformStep est un objet à une seule clé, appliquée dans l’ordre de la 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)" }} />

Une valeur animée pilote directement translate, rotate et scale, ainsi que les étapes d’une liste transform :

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

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

#Filtres et fusion

#Transitions

Lorsqu’une propriété dotée d’une transition change (à partir d’un nouveau style, d’une classe ou d’une variante telle que active:), la plateforme l’anime nativement. Aucun JS ne s’exécute pendant l’animation.

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

#Animations par images clés

Animations par images clés intégrées, exécutées nativement (animate-* de Tailwind).

Pour les animations pilotées par des valeurs, des gestes ou des ressorts, utilisez plutôt l’API d’animation de nsh.

#Pointeur et sélection

#Peinture SVG

Les propriétés de peinture CSS des formes SVG, que tout élément accepte et dont héritent les éléments qu’il contient, comme dans un navigateur. Elles peignent ce que les composants Rust dessinent sur des canevas.

#TextStyle

Les styles de texte s’appliquent à <Text> et <Input>. Ils sont aussi hérités, comme en CSS : les propriétés de texte définies sur une vue passent aux textes et aux champs de saisie qu’elle contient, et les spans <Text> imbriqués héritent de leur texte parent. Toutes les clés de ViewStyle s’appliquent aussi. Voir Texte.

#Police

#Espacement et alignement

#Lignes et débordement

#Décoration

#Placeholder, curseur et sélection

placeholderColor et caretColor appartiennent à InputStyle, le style de <Input> ; selectionColor appartient à TextStyle, car les textes sélectionnables l’acceptent aussi.

#Ombre du texte

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

Toutes les clés de ViewStyle, plus :

objectFit s’applique aussi à <Video> ; voir image et video.

#Props qui ressemblent à des styles

L’ombre Material d’Android est une prop de plateforme, définie à côté du style :

#Voir aussi

• Styling : style, class, héritage et priorité.
• Tailwind reference : tous les utilitaires et variantes pris en charge.
• Layout : flexbox et grid en pratique.
• view, text, image : les éléments auxquels ces styles s’appliquent.

width, height et flexBasis acceptent également "min-content", "max-content" et "fit-content", calculés par Taffy.