样式参考

本页列出 style 属性可用的每一个键，以及在 Rust 中设置它的 Styled 方法。Rust 组件用以 Tailwind 工具类命名的类型化方法为元素设置样式（.p_4()、.rounded(px(12.0))、.bg(color)，来自 nsh_core::prelude），它们会落到同样的键上；TSX 传入 style 对象（以及 class）。Rust 列给出对应的方法；大多数方法接受一个值、一个 signal 或一个闭包，.style_when(…) / .style_with(…) 可以让任意样式按条件生效。键名和类型来自生成的声明文件 .nsh/types/nsh/types.d.ts，编辑器会在你输入时检查它们。样式键表示与它同名的 CSS 属性，与设置该属性的类名相同：paddingLeft 就是 CSS 的 padding-left 和 pl-4，boxShadow 就是 box-shadow 和 shadow-md；少数键采用应用里更直白的名字（paddingHorizontal 对应 padding-inline，marginStart 对应 margin-inline-start，numberOfLines 对应 line-clamp）。数字的单位是点，同时支持这些 CSS 能力：网格、渐变、盒阴影、滤镜、混合模式、轮廓线、变换、过渡和关键帧动画。

样式怎么写、怎样与 class 组合、文字样式如何继承，见 样式。class 的语法见 Tailwind 参考。

#五个接口

每个接口都扩展前一个：

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 也接受数组：各项从左到右合并，假值会被跳过，因此条件样式无需展开运算。在 Rust 中，.style_when(condition, …) 在条件成立时加上样式：

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

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

#样式键的含义

样式键遵循 CSS，因此指向同一属性的样式和类名效果相同：

• 布局方向。 未设置 display 的视图把子元素纵向排列。display: "flex" 是横向，除非设置了 flexDirection，与 CSS 和 flex 类相同。flexShrink 未设置时为 0。
• 物理方向与逻辑方向。 left、right、marginLeft、paddingRight、borderLeftWidth、borderTopLeftRadius 和 textAlign: "left" 在从右到左布局中保持各自的一侧。起止键（marginStart、paddingEnd、start、end、borderStartWidth 等）、borderTopStartRadius 一族以及 textAlign: "start" | "end" 跟随方向：行内起始侧在从左到右布局中是左侧，在从右到左布局中是右侧。
• 边框颜色。 设置了宽度而没有设置颜色的边框或轮廓线，用文字颜色绘制（CSS 的 currentColor）。
• 变换。 translate、rotate 和 scale 各是独立的属性，transform 接受 CSS 的函数字符串，或一个数值可以是动画值的步骤列表。它们按这个顺序组合：translate、rotate、scale，最后是 transform。

#值类型

采用 CSS 语法的字符串（boxShadow、textShadow、backgroundImage、filter、gridTemplateColumns 等）中，长度可写 px 或裸数字（都是点）、pt（与 CSS 相同，为 4/3 点），或 rem（16 点）。

#LayoutStyle

布局在 Rust 中计算（flexbox 和 CSS 网格）。未设置 display 的视图是一个子元素纵向排列的 flex 容器；display: "flex" 让它横向排列，除非设置了 flexDirection，与 CSS 相同。元素默认 flexShrink: 0、alignContent: "flex-start"（网格中为 CSS 的 "normal"）、alignItems: "stretch"，并且没有自动最小尺寸。见 布局。

#显示与定位

#Flexbox

#网格

设置 display: "grid" 后，子元素按 CSS 网格排列。轨道列表使用 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>

#尺寸

#外边距

外边距接受 "auto"（与 flexbox 中一样吸收剩余空间）和负值。物理方向的键（marginStart / marginEnd 之外）也接受 EnvValue：marginBottom: "env(keyboard-inset-height)"（Rust 中为 .mb_keyboard()、.mt_safe_area() 等）。

#内边距

物理方向的键（paddingStart / paddingEnd 之外）也接受 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() 等）。内边距不小于 0。

#ViewStyle

视图绘制的一切。LayoutStyle 的全部键同样适用。

#背景

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

#边框

设置了宽度而没有任何样式设置颜色的边，用文字颜色绘制，即 CSS 的 currentColor：{ borderWidth: 1, color: "#2563eb" } 画出蓝色边框。轮廓线同样取文字颜色。

#圆角

#轮廓线

轮廓线画在边框之外，不占布局空间。

#阴影

视图用 CSS 的 boxShadow 投射阴影：多层、扩展和内阴影。过渡可以为它播放动画（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)" }} />

#不透明度、可见性与裁剪

#变换

变换就是 CSS 的变换：translate、rotate 和 scale 属性以及 transform，按这个顺序组合。每个都是独立的属性，因此样式中的 scale 替换类名的 scale-*，并保留它的 rotate-*；样式中的 transform 替换类名的变换函数（rotate-x-*、skew-*）。

TransformStep 是只有一个键的对象，按列表的顺序应用：

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

动画值直接驱动 translate、rotate 和 scale，以及 transform 列表的各步骤：

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

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

#滤镜与混合

#过渡

当参与过渡的属性改变时（来自新样式、class，或 active: 等变体），平台以原生方式执行动画，期间不运行任何 JS。

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

#关键帧动画

内置的关键帧动画，以原生方式运行（对应 Tailwind 的 animate-*）。

由数值、手势或弹簧驱动的动画请使用 nsh 的动画 API。

#指针与选择

#SVG 绘制

CSS 中 SVG 图形的绘制属性：任何元素都可以设置，并像在浏览器中一样由内部元素继承。它们决定 Rust 组件在画布上绘制的内容的颜色和线条。

#TextStyle

文字样式用于 <Text> 和 <Input>。它们也像 CSS 一样会继承：视图上设置的文字属性会传给其中的文字和输入框，嵌套的 <Text> 片段继承父文字的样式。ViewStyle 的全部键同样适用。见 文字。

#字体

#间距与对齐

#行数与截断

#装饰线

#占位符、光标与选区

placeholderColor 和 caretColor 属于 InputStyle，即 <Input> 的样式；selectionColor 属于 TextStyle，可选中的文本也能使用。

#文字阴影

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

包含 ViewStyle 的全部键，另加：

objectFit 同样适用于 <Video>；见 image 和 video。

#看起来像样式的属性

Android 的 Material 阴影是平台属性，与样式并列设置：

#相关

• 样式：style、class、继承与优先级。
• Tailwind 参考：支持的全部工具类和变体。
• 布局：flexbox 和网格的实际用法。
• view、text、image：这些样式所作用的元素。

width、height 和 flexBasis 也接受 "min-content"、"max-content" 和 "fit-content"，由 Taffy 计算。