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::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. A style key means the CSS property of its name, the same as the class that sets it: paddingLeft is CSS’s padding-left and pl-4, boxShadow is box-shadow and shadow-md; a few keys take plainer names apps write (paddingHorizontal for padding-inline, marginStart for margin-inline-start, numberOfLines for line-clamp). Numbers are points, and the CSS features are there too: grid, gradients, box shadows, filters, blend modes, outlines, transforms, 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 five interfaces

Each interface extends the one before it:

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

#How style keys read

Style keys follow CSS, so a style and a class that name one property do the same thing:

• Layout direction. A view that sets no display lays its children out in a column. display: "flex" is a row unless flexDirection is set, as in CSS and the flex class. flexShrink is 0 unless set.
• Physical and logical sides. left, right, marginLeft, paddingRight, borderLeftWidth, borderTopLeftRadius and textAlign: "left" keep their side in right-to-left layouts. The start and end keys (marginStart, paddingEnd, start, end, borderStartWidth, …), the borderTopStartRadius family and textAlign: "start" | "end" follow the direction: inline start is the left in left-to-right layouts and the right in right-to-left ones.
• Border colors. A border or an outline whose width is set and whose color is not is drawn in the text color (CSS’s currentColor).
• Transforms. translate, rotate and scale are properties of their own, and transform takes CSS’s string of functions or a list of steps whose amounts may be animated values. They compose in that order: translate, rotate, scale, then transform.

#Value types

Strings with CSS syntax (boxShadow, textShadow, backgroundImage, filter, gridTemplateColumns, …) take lengths in px and bare numbers (both points), pt (4/3 of a point, as in CSS), or rem (16 points).

#LayoutStyle

Layout is computed in Rust (flexbox and CSS grid). A view that sets no display is a flex container whose children stack in a column; display: "flex" makes it a row unless flexDirection is set, as in CSS. Elements default to 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. The physical keys (all but marginStart / marginEnd) also take an EnvValue: marginBottom: "env(keyboard-inset-height)" (Rust .mb_keyboard(), .mt_safe_area(), …).

#Padding

The physical keys (all but paddingStart / paddingEnd) also take an 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(), …). A padding is at least 0.

#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

A side whose width is set and whose color nothing sets is drawn in the text color, CSS’s currentColor: { borderWidth: 1, color: "#2563eb" } draws a blue border. Outlines take the text color the same way.

#Corners

#Outline

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

#Shadows

A view casts shadows with CSS’s boxShadow: several layers, spread and inset shadows. Transitions animate it (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)" }} />

#Opacity, visibility and overflow

#Transforms

Transforms are CSS’s: the translate, rotate and scale properties and transform, composed in that order. Each is a property of its own, so a style’s scale replaces a class’s scale-* and keeps its rotate-*, and a style’s transform replaces a class’s transform functions (rotate-x-*, skew-*).

A TransformStep is an object with one key, applied in the order of the list:

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

An animated value drives translate, rotate and scale directly, and the steps of a transform list:

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

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

#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’s animation API instead.

#Pointer and selection

#SVG paint

CSS’s paint properties of SVG shapes, which any element takes and the elements inside it inherit, as in a browser. They paint what Rust components draw on canvases.

#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

#Lines and overflow

#Decoration

#Placeholder, caret and selection

placeholderColor and caretColor belong to InputStyle, the style of <Input>; selectionColor to TextStyle, as selectable texts take it too.

#Text shadow

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

All keys of ViewStyle, plus:

objectFit applies to <Video> too; see image and video.

#Props that look like styles

Android’s material shadow is a platform prop, set beside the style:

#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.

width, height and flexBasis also accept "min-content", "max-content" and "fit-content", computed by Taffy.