Style reference

This page lists every key of the style prop, and the method of Styled that sets it in Rust. Rust components style elements with typed methods named after Tailwind’s utilities (.p_4(), .rounded(px(12.0)), .bg(color), from nsh_core::ui::prelude), which lower to the same keys; TSX passes style objects (and classes). The Rust column names the method; a value, a signal or a closure goes to most of them, and .style_when(…) / .style_with(…) make any of them conditional. The keys and their types come from the generated declarations in .nsh/types/nsh/types.d.ts, so your editor checks them as you type. Layout is flexbox with a column default, numbers are points, and the CSS features are there too: grid, gradients, box shadows, filters, blend modes, outlines, transitions and keyframe animations.

For how to apply styles, combine them with classes and inherit text styles, see Styling. For the class syntax, see the Tailwind reference.

#The four interfaces

Each interface extends the one before it:

use nsh_core::ui::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 also takes an array; entries merge left to right and falsy entries are skipped, so conditional styles need no spreading. In Rust, .style_when(condition, …) adds styles while the condition holds:

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

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

#Value types

Strings with CSS syntax (boxShadow, backgroundImage, filter, gridTemplateColumns, …) take lengths in px and bare numbers (both points), pt, or rem (16 points).

#LayoutStyle

Layout is computed in Rust (flexbox and CSS grid). The defaults differ from CSS’s: display: "flex", flexDirection: "column", flexShrink: 0, alignContent: "flex-start" (grids: CSS’s "normal"), alignItems: "stretch", and no automatic minimum size. See Layout.

#Display and position

#Flexbox

#Grid

Set display: "grid" to lay out children in a CSS grid. Track lists use 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>

#Size

#Margin

Margins accept "auto" (absorbs free space, as in flexbox) and negative values.

#Padding

#ViewStyle

Everything drawn by a view. All keys of LayoutStyle apply too.

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

#Borders

#Corners

#Outline

An outline is drawn outside the border and takes no space in layout.

#Shadows

Two ways to cast a shadow: the CSS boxShadow (several layers, spread, inset) or the four shadow* keys.

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

#Opacity, visibility and overflow

#Transforms

A TransformStep is an object with one key:

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

<View style={{ transform: [{ perspective: 600 }, { rotateY: "20deg" }, { scale: 0.95 }] }} />

#Filters and blending

#Transitions

When a transitioned property changes (from a new style, a class or a variant such as active:), the platform animates it natively. No JS runs during the 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 }}
/>

#Keyframe animations

Built-in keyframe animations, run natively (Tailwind’s animate-*).

For animations driven by values, gestures or springs, use nsh/animated instead.

#Pointer

#TextStyle

Text styles apply to <Text> and <Input>. They are also inherited, as in CSS: text properties set on a view pass to the texts and inputs inside it, and nested <Text> spans inherit from their parent text. All keys of ViewStyle apply too. See Text.

#Font

#Spacing and alignment

#Decoration

#Placeholder and selection

#Text shadow

#ImageStyle

All keys of ViewStyle, plus:

How an image fills its box is the resizeMode prop of <Image>, not a style; see image.

#Props that look like styles

Some settings are props in NSH, not style keys. Their Tailwind classes exist, but an explicit prop wins over the class:

#Related

• Styling: style, class, inheritance and precedence.
• Tailwind reference: every supported utility and variant.
• Layout: flexbox and grid in practice.
• view, text, image: the elements these styles apply to.