スタイルリファレンス

このページでは、style prop のすべてのキーと、Rust でそのキーを設定する Styled のメソッドを一覧にしています。Rust コンポーネントは、Tailwind のユーティリティ名にちなんだ型付きメソッド（.p_4()、.rounded(px(12.0))、.bg(color)、nsh_core::prelude のもの）で要素をスタイリングし、これらは同じキーに変換されます。TSX では style オブジェクト（およびクラス）を渡します。Rust 列にはメソッド名を示しています。ほとんどのメソッドには値、シグナル、クロージャを渡せ、.style_when(…) / .style_with(…) を使えばどのメソッドも条件付きにできます。キーとその型は .nsh/types/nsh/types.d.ts の生成された宣言に由来するため、エディタが入力中にチェックしてくれます。スタイルキーは同名の CSS プロパティを意味し、それを設定するクラスと同じ動作をします。paddingLeft は CSS の padding-left と pl-4、boxShadow は box-shadow と shadow-md に対応します。一部のキーには、アプリで書きやすい平易な名前が使われています（padding-inline に対する paddingHorizontal、margin-inline-start に対する marginStart、line-clamp に対する numberOfLines）。数値の単位はポイントです。grid、グラデーション、ボックスシャドウ、フィルター、ブレンドモード、アウトライン、トランスフォーム、トランジション、キーフレームアニメーションといった CSS の機能も利用できます。

スタイルの適用方法、クラスとの組み合わせ、テキストスタイルの継承については スタイリング を参照してください。クラスの構文については Tailwind リファレンス を参照してください。

#5 つのインターフェース

各インターフェースは、前のインターフェースを継承します。

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 は配列も受け付けます。要素は左から右へマージックされ、falsy な要素はスキップされるため、条件付きスタイルにスプレッドは不要です。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 を設定しないビューは、子要素を縦方向（column）に配置します。display: "flex" は、CSS や flex クラスと同様に、flexDirection が設定されていない限り横方向（row）になります。flexShrink は、設定しない限り 0 です。
• 物理的な辺と論理的な辺。 left、right、marginLeft、paddingRight、borderLeftWidth、borderTopLeftRadius、textAlign: "left" は、右から左へのレイアウトでも同じ辺を保ちます。start / end のキー（marginStart、paddingEnd、start、end、borderStartWidth など）、borderTopStartRadius ファミリー、textAlign: "start" | "end" は方向に従います。inline start は、左から右のレイアウトでは左、右から左のレイアウトでは右です。
• ボーダーの色。 幅が設定されていて色が設定されていないボーダーまたはアウトラインは、テキストの色（CSS の currentColor）で描画されます。
• トランスフォーム。 translate、rotate、scale はそれぞれ独立したプロパティであり、transform は CSS の関数の文字列、または量がアニメーション値でもよいステップのリストを受け付けます。これらは translate、rotate、scale、transform の順に合成されます。

#値の型

CSS 構文の文字列（boxShadow、textShadow、backgroundImage、filter、gridTemplateColumns など）では、長さを px と数値のみ（どちらもポイント）、pt（CSS と同様に 1 ポイントの 4/3）、または rem（16 ポイント）で指定できます。

#LayoutStyle

レイアウトは Rust で計算されます（flexbox と CSS grid）。display を設定しないビューは、子要素を縦方向に積む flex コンテナになります。display: "flex" を指定すると、CSS と同様に flexDirection が設定されていない限り横方向（row）になります。要素のデフォルトは flexShrink: 0、alignContent: "flex-start"（grid では CSS の "normal"）、alignItems: "stretch" で、自動的な最小サイズはありません。レイアウト を参照してください。

#表示と位置

#Flexbox

#Grid

子要素を CSS grid でレイアウトするには、display: "grid" を設定します。トラックのリストには 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はクラスのtransform関数(rotate-x-*、skew-*)を置き換えます。

TransformStepは1つのキーを持つオブジェクトで、リストの順に適用されます。

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

#フィルターとブレンド

#トランジション

トランジション対象のプロパティが変化すると(新しいスタイル、クラス、または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ペイント

SVG図形のCSSペイントプロパティです。任意の要素に指定でき、ブラウザーと同様に内側の要素に継承されます。 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 を参照してください。

#スタイルのように見える props

Android のマテリアルシャドウはプラットフォーム固有の prop であり、スタイルの隣に設定します。

#関連項目

• Styling: style、class、継承と優先順位。
• Tailwind reference: サポートされているすべてのユーティリティとバリアント。
• Layout: flexbox と grid の実践。
• view、text、image: これらのスタイルが適用される要素。

width、height、flexBasis は、Taffy によって計算される "min-content"、"max-content"、"fit-content" も受け付けます。