Referencia de estilos

Esta página enumera cada clave de la prop style y el método de Styled que la establece en Rust. Los componentes de Rust aplican estilos a los elementos con métodos tipados que llevan el nombre de las utilidades de Tailwind (.p_4(), .rounded(px(12.0)), .bg(color), de nsh_core::prelude), que se reducen a las mismas claves; TSX pasa objetos style (y clases). La columna Rust indica el método; a la mayoría de ellos se les puede pasar un valor, una señal o una clausura, y .style_when(…) / .style_with(…) hacen condicional a cualquiera de ellos. Las claves y sus tipos provienen de las declaraciones generadas en .nsh/types/nsh/types.d.ts, de modo que tu editor las comprueba mientras escribes. Una clave de estilo significa la propiedad CSS de su mismo nombre, igual que la clase que la establece: paddingLeft es padding-left y pl-4 de CSS, boxShadow es box-shadow y shadow-md; algunas claves usan nombres más simples que las apps escriben (paddingHorizontal para padding-inline, marginStart para margin-inline-start, numberOfLines para line-clamp). Los números son puntos, y las funciones de CSS también están disponibles: grid, degradados, sombras de caja, filtros, modos de mezcla, contornos, transformaciones, transiciones y animaciones con fotogramas clave.

Para saber cómo aplicar estilos, combinarlos con clases y heredar estilos de texto, consulta Estilos. Para la sintaxis de las clases, consulta la referencia de Tailwind.

#Las cinco interfaces

Cada interfaz extiende a la anterior:

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 también acepta un array; las entradas se combinan de izquierda a derecha y las entradas falsy se omiten, por lo que los estilos condicionales no necesitan spread. En Rust, .style_when(condition, …) añade estilos mientras se cumpla la condición:

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

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

#Cómo se interpretan las claves de estilo

Las claves de estilo siguen CSS, de modo que un estilo y una clase que nombran la misma propiedad hacen lo mismo:

• Dirección del diseño. Una vista que no establece display dispone a sus hijos en una columna. display: "flex" es una fila a menos que se establezca flexDirection, como en CSS y la clase flex. flexShrink es 0 salvo que se establezca.
• Lados físicos y lógicos. left, right, marginLeft, paddingRight, borderLeftWidth, borderTopLeftRadius y textAlign: "left" mantienen su lado en diseños de derecha a izquierda. Las claves de inicio y fin (marginStart, paddingEnd, start, end, borderStartWidth, …), la familia borderTopStartRadius y textAlign: "start" | "end" siguen la dirección: el inicio en línea es la izquierda en diseños de izquierda a derecha y la derecha en los de derecha a izquierda.
• Colores de borde. Un borde o un contorno cuyo grosor está establecido y cuyo color no lo está se dibuja con el color del texto (currentColor de CSS).
• Transformaciones. translate, rotate y scale son propiedades independientes, y transform acepta la cadena de funciones de CSS o una lista de pasos cuyas cantidades pueden ser valores animados. Se componen en este orden: translate, rotate, scale y después transform.

#Tipos de valor

Las cadenas con sintaxis CSS (boxShadow, textShadow, backgroundImage, filter, gridTemplateColumns, …) aceptan longitudes en px y números sin unidad (ambos en puntos), pt (4/3 de punto, como en CSS) o rem (16 puntos).

#LayoutStyle

El diseño se calcula en Rust (flexbox y CSS grid). Una vista que no establece display es un contenedor flex cuyos hijos se apilan en una columna; display: "flex" lo convierte en una fila a menos que se establezca flexDirection, como en CSS. Los elementos tienen por defecto flexShrink: 0, alignContent: "flex-start" (grids: "normal" de CSS), alignItems: "stretch" y ningún tamaño mínimo automático. Consulta Diseño.

#Display y posición

#Flexbox

#Grid

Establece display: "grid" para disponer a los hijos en un CSS grid. Las listas de pistas usan sintaxis 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>

#Tamaño

#Margin

Los márgenes aceptan "auto" (absorbe el espacio libre, como en flexbox) y valores negativos. Las claves físicas (todas excepto marginStart / marginEnd) también aceptan un EnvValue: marginBottom: "env(keyboard-inset-height)" (Rust .mb_keyboard(), .mt_safe_area(), …).

#Padding

Las claves físicas (todas excepto paddingStart / paddingEnd) también aceptan un 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(), …). Un padding es como mínimo 0.

#ViewStyle

Todo lo que dibuja una vista. También se aplican todas las claves de LayoutStyle.

#Fondo

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

#Bordes

Un lado cuyo ancho está definido y cuyo color no define nada se dibuja con el color del texto, el currentColor de CSS: { borderWidth: 1, color: "#2563eb" } dibuja un borde azul. Los contornos toman el color del texto del mismo modo.

#Esquinas

#Contorno

Un contorno se dibuja fuera del borde y no ocupa espacio en el layout.

#Sombras

Una vista proyecta sombras con el boxShadow de CSS: varias capas, sombras con spread e inset. Las transiciones la animan (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)" }} />

#Opacidad, visibilidad y desbordamiento

#Transformaciones

Las transformaciones son las de CSS: las propiedades translate, rotate y scale y transform, compuestas en ese orden. Cada una es una propiedad independiente, de modo que el scale de un estilo reemplaza el scale-* de una clase y conserva su rotate-*, y el transform de un estilo reemplaza las funciones de transformación de una clase (rotate-x-*, skew-*).

Un TransformStep es un objeto con una sola clave, aplicado en el orden de la lista:

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 valor animado controla directamente translate, rotate y scale, así como los pasos de una lista transform:

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

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

#Filtros y mezcla

#Transiciones

Cuando cambia una propiedad con transición (por un nuevo estilo, una clase o una variante como active:), la plataforma la anima de forma nativa. No se ejecuta JS durante la animación.

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

#Animaciones con keyframes

Animaciones con keyframes integradas, ejecutadas de forma nativa (animate-* de Tailwind).

Para animaciones controladas por valores, gestos o resortes, usa en su lugar la API de animación de nsh.

#Puntero y selección

#Pintura SVG

Las propiedades de pintura de CSS de las formas SVG, que acepta cualquier elemento y que heredan los elementos que contiene, como en un navegador. Pintan lo que los componentes de Rust dibujan en canvas.

#TextStyle

Los estilos de texto se aplican a <Text> y <Input>. También se heredan, como en CSS: las propiedades de texto definidas en una vista pasan a los textos y entradas que contiene, y los spans <Text> anidados heredan de su texto padre. También se aplican todas las claves de ViewStyle. Consulta Texto.

#Fuente

#Espaciado y alineación

#Líneas y desbordamiento

#Decoración

#Marcador de posición, cursor y selección

placeholderColor y caretColor pertenecen a InputStyle, el estilo de <Input>; selectionColor pertenece a TextStyle, ya que los textos seleccionables también lo aceptan.

#Sombra de texto

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

Todas las claves de ViewStyle, más:

objectFit se aplica también a <Video>; consulta image y video.

#Props que parecen estilos

La sombra de material de Android es una prop de la plataforma, que se establece junto al estilo:

#Relacionado

• Styling: style, class, herencia y precedencia.
• Tailwind reference: todas las utilidades y variantes compatibles.
• Layout: flexbox y grid en la práctica.
• view, text, image: los elementos a los que se aplican estos estilos.

width, height y flexBasis también aceptan "min-content", "max-content" y "fit-content", calculados por Taffy.