Справочник по стилям

Эта страница перечисляет каждый ключ пропа style и метод Styled, который задаёт его в Rust. Компоненты на 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 — это padding-left и pl-4 в CSS, boxShadow — это box-shadow и shadow-md; несколько ключей имеют более простые имена, которые используют приложения (paddingHorizontal вместо padding-inline, marginStart вместо margin-inline-start, numberOfLines вместо line-clamp). Числа задаются в пунктах, и возможности CSS тоже доступны: grid, градиенты, тени блоков, фильтры, режимы наложения, контуры, трансформации, переходы и анимации по ключевым кадрам.

О том, как применять стили, комбинировать их с классами и наследовать стили текста, см. Стилизация. О синтаксисе классов см. справочник по 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 также принимает массив; элементы объединяются слева направо, а ложные элементы пропускаются, так что для условных стилей не нужно использовать spread. В 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" сохраняют свою сторону в раскладках справа налево. Ключи start и end (marginStart, paddingEnd, start, end, borderStartWidth, …), семейство borderTopStartRadius и textAlign: "start" | "end" следуют направлению: inline start — это левая сторона в раскладках слева направо и правая в раскладках справа налево.
• Цвета границ. Граница или контур, у которых задана толщина, но не задан цвет, рисуются цветом текста (currentColor в CSS).
• Трансформации. translate, rotate и scale — отдельные свойства, а transform принимает строку функций CSS или список шагов, величины в которых могут быть анимированными значениями. Они применяются в таком порядке: translate, rotate, scale, затем transform.

#Типы значений

Строки с синтаксисом CSS (boxShadow, textShadow, backgroundImage, filter, gridTemplateColumns, …) принимают длины в px и в виде чисел без единиц (оба варианта — пункты), pt (4/3 пункта, как в CSS) или rem (16 пунктов).

#LayoutStyle

Раскладка вычисляется в Rust (flexbox и CSS grid). Представление, в котором не задан display, является flex-контейнером, чьи дочерние элементы выстраиваются в колонку; display: "flex" превращает его в строку, если не задан flexDirection, как в CSS. По умолчанию у элементов flexShrink: 0, alignContent: "flex-start" (у grid: "normal" из CSS), alignItems: "stretch" и нет автоматического минимального размера. См. Раскладка.

#Display и позиционирование

#Flexbox

#Grid

Задайте display: "grid", чтобы раскладывать дочерние элементы в CSS 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 в стиле заменяет функции трансформации из класса (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 }] }} />

#Фильтры и смешивание

#Переходы

Когда меняется свойство с переходом (из-за нового стиля, класса или варианта вроде 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 }}
/>

#Анимации по ключевым кадрам

Встроенные анимации по ключевым кадрам, выполняются нативно (animate-* из Tailwind).

Для анимаций, управляемых значениями, жестами или пружинами, используйте вместо этого API анимации nsh.

#Указатель и выделение

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

#Свойства, которые похожи на стили

Тень Material в Android — это свойство платформы, которое задаётся рядом со стилем:

#См. также

• Стилизация: style, class, наследование и приоритет.
• Справочник Tailwind: все поддерживаемые утилиты и варианты.
• Раскладка: flexbox и grid на практике.
• view, text, image: элементы, к которым применяются эти стили.

width, height и flexBasis также принимают "min-content", "max-content" и "fit-content", вычисляемые Taffy.