Referência de estilos

Esta página lista todas as chaves da prop style e o método de Styled que a define em Rust. Os componentes Rust estilizam elementos com métodos tipados, nomeados a partir dos utilitários do Tailwind (.p_4(), .rounded(px(12.0)), .bg(color), de nsh_core::prelude), que são convertidos nas mesmas chaves; o TSX passa objetos style (e classes). A coluna Rust indica o método; a maioria deles aceita um valor, um signal ou uma closure, e .style_when(…) / .style_with(…) tornam qualquer um deles condicional. As chaves e seus tipos vêm das declarações geradas em .nsh/types/nsh/types.d.ts, então seu editor os verifica enquanto você digita. Uma chave de estilo corresponde à propriedade CSS de mesmo nome, igual à classe que a define: paddingLeft é o padding-left e o pl-4 do CSS, boxShadow é box-shadow e shadow-md; algumas chaves usam nomes mais simples, que os apps costumam escrever (paddingHorizontal para padding-inline, marginStart para margin-inline-start, numberOfLines para line-clamp). Os números são pontos, e os recursos do CSS também estão disponíveis: grid, gradientes, sombras de caixa, filtros, modos de mesclagem, contornos, transformações, transições e animações com keyframes.

Para saber como aplicar estilos, combiná-los com classes e herdar estilos de texto, consulte Styling. Para a sintaxe das classes, consulte a referência do Tailwind.

#As cinco interfaces

Cada interface estende a 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 também aceita um array; as entradas são mescladas da esquerda para a direita e as entradas falsy são ignoradas, então estilos condicionais não precisam de spread. Em Rust, .style_when(condition, …) adiciona estilos enquanto a condição for verdadeira:

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

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

#Como as chaves de estilo funcionam

As chaves de estilo seguem o CSS, então um estilo e uma classe que nomeiam a mesma propriedade fazem a mesma coisa:

• Direção do layout. Uma view que não define display organiza seus filhos em coluna. display: "flex" é uma linha, a menos que flexDirection esteja definido, como no CSS e na classe flex. flexShrink é 0, a menos que seja definido.
• Lados físicos e lógicos. left, right, marginLeft, paddingRight, borderLeftWidth, borderTopLeftRadius e textAlign: "left" mantêm o seu lado em layouts da direita para a esquerda. As chaves de início e fim (marginStart, paddingEnd, start, end, borderStartWidth, …), a família borderTopStartRadius e textAlign: "start" | "end" seguem a direção: o início inline é a esquerda em layouts da esquerda para a direita e a direita nos da direita para a esquerda.
• Cores de borda. Uma borda ou um contorno cuja largura está definida e cuja cor não está é desenhado na cor do texto (o currentColor do CSS).
• Transformações. translate, rotate e scale são propriedades independentes, e transform aceita a string de funções do CSS ou uma lista de passos cujas quantidades podem ser valores animados. Elas se compõem nesta ordem: translate, rotate, scale e, por fim, transform.

#Tipos de valor

Strings com sintaxe CSS (boxShadow, textShadow, backgroundImage, filter, gridTemplateColumns, …) aceitam comprimentos em px e números simples (ambos em pontos), pt (4/3 de ponto, como no CSS) ou rem (16 pontos).

#LayoutStyle

O layout é calculado em Rust (flexbox e CSS grid). Uma view que não define display é um contêiner flex cujos filhos se empilham em coluna; display: "flex" o torna uma linha, a menos que flexDirection esteja definido, como no CSS. Os elementos têm como padrão flexShrink: 0, alignContent: "flex-start" (grids: o "normal" do CSS), alignItems: "stretch" e nenhum tamanho mínimo automático. Consulte Layout.

#Display e posição

#Flexbox

#Grid

Defina display: "grid" para organizar os filhos em um CSS grid. As listas de trilhas usam a sintaxe do 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>

#Tamanho

#Margin

As margens aceitam "auto" (absorve o espaço livre, como no flexbox) e valores negativos. As chaves físicas (todas, exceto marginStart / marginEnd) também aceitam um EnvValue: marginBottom: "env(keyboard-inset-height)" (em Rust, .mb_keyboard(), .mt_safe_area(), …).

#Padding

As chaves físicas (todas, exceto paddingStart / paddingEnd) também aceitam um EnvValue: paddingTop: "env(safe-area-inset-top)", paddingBottom: "calc(env(safe-area-inset-bottom) + 16px)" (em Rust, .pt_safe_area(), .pb_safe_area_plus(px(16.0)), .pb_keyboard(), …). Um padding é no mínimo 0.

#ViewStyle

Tudo o que é desenhado por uma view. Todas as chaves de LayoutStyle também se aplicam.

#Background

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

#Bordas

Um lado cuja largura está definida e cuja cor nada define é desenhado na cor do texto, o currentColor do CSS: { borderWidth: 1, color: "#2563eb" } desenha uma borda azul. Os contornos (outlines) usam a cor do texto da mesma forma.

#Cantos

#Contorno

Um contorno é desenhado fora da borda e não ocupa espaço no layout.

#Sombras

Uma view projeta sombras com o boxShadow do CSS: várias camadas, spread e sombras internas (inset). As transições a animam (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)" }} />

#Opacidade, visibilidade e overflow

#Transformações

As transformações são as do CSS: as propriedades translate, rotate e scale e transform, compostas nessa ordem. Cada uma é uma propriedade própria, então o scale de um style substitui o scale-* de uma classe e mantém o rotate-* dela, e o transform de um style substitui as funções de transformação de uma classe (rotate-x-*, skew-*).

Um TransformStep é um objeto com uma chave, aplicado na ordem da 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)" }} />

Um valor animado controla translate, rotate e scale diretamente, bem como os passos de uma 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 e blending

#Transições

Quando uma propriedade com transição muda (por um novo style, uma classe ou uma variante como active:), a plataforma a anima nativamente. Nenhum JS é executado durante a animação.

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

#Animações de keyframes

Animações de keyframes integradas, executadas nativamente (animate-* do Tailwind).

Para animações controladas por valores, gestos ou springs, use a API de animação do nsh.

#Ponteiro e seleção

#Pintura SVG

As propriedades de pintura do CSS para formas SVG, que qualquer elemento aceita e que os elementos dentro dele herdam, como em um navegador. Elas pintam o que componentes Rust desenham em canvases.

#TextStyle

Os estilos de texto se aplicam a <Text> e <Input>. Eles também são herdados, como no CSS: propriedades de texto definidas em uma view passam para os textos e inputs dentro dela, e spans <Text> aninhados herdam do texto pai. Todas as chaves de ViewStyle também se aplicam. Veja Texto.

#Fonte

#Espaçamento e alinhamento

#Linhas e overflow

#Decoração

#Placeholder, cursor e seleção

placeholderColor e caretColor pertencem a InputStyle, o estilo de <Input>; selectionColor pertence a TextStyle, já que textos selecionáveis também o aceitam.

#Sombra do 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 as chaves de ViewStyle, mais:

objectFit também se aplica a <Video>; veja image e video.

#Props que parecem estilos

A sombra material do Android é uma prop da plataforma, definida ao lado do estilo:

#Relacionados

• Styling: style, class, herança e precedência.
• Tailwind reference: todos os utilitários e variantes compatíveis.
• Layout: flexbox e grid na prática.
• view, text, image: os elementos aos quais esses estilos se aplicam.

width, height e flexBasis também aceitam "min-content", "max-content" e "fit-content", calculados pelo Taffy.