XiLaiTL/moobile/style - mooncakes.io

README
T
Frame
T
JsValue
- ::elementMount::element
- ::handlesMount::handles
- ::snapshotMount::snapshot
- ::startMount::start
- ::subscribeMount::subscribe
- ::bumpStore::bump
- ::newStore::new
- ::snapshotStore::snapshot
- ::subscribeStore::subscribe
V
component_namespace_sep
V
excluded_tags
V
handler_count
V
handlers
V
handlers_with_init
V
host_contract_version
V
is_library_tag
V
js_null
V
map_event
V
map_tag
V
mount
V
mount_with_init
V
render_html
V
render_node
V
tag_table
V
unmapped_tag_count
V
unmapped_tag_names
V
unsupported_count

XiLaiTL/moobile/style does not have a README file

Align

pub(all) enum Align {
  FlexStart
  FlexEnd
  Center
  Stretch
  Baseline
}

Align::to_string

source

fn Align::to_string(self : Align) -> String

AlignSelf

source

pub(all) enum AlignSelf {
  Auto
  FlexStart
  FlexEnd
  Center
  Stretch
  Baseline
}

AlignSelf::to_string

source

fn AlignSelf::to_string(self : AlignSelf) -> String

BorderStyle

source

pub(all) enum BorderStyle {
  Solid
  Dotted
  Dashed
}

BorderStyle::to_string

source

fn BorderStyle::to_string(self : BorderStyle) -> String

Dimension

source

pub(all) enum Dimension {
  Auto
  Px(Double)
  Pct(Double)
}

尺寸：auto / 绝对长度 / 百分比。用类型把它们分开，就不需要 width / width_pct / width_auto 三个方法。

Dimension::to_style_value

source

fn Dimension::to_style_value(self : Dimension) -> StyleValue

Display

source

pub(all) enum Display {
  Flex
  Hidden
}

只留 flex 与 none。刻意不含 grid —— 那正是要避免的东西。

Display::to_string

source

fn Display::to_string(self : Display) -> String

FlexDirection

source

pub(all) enum FlexDirection {
  Row
  Column
  RowReverse
  ColumnReverse
}

FlexDirection::to_string

source

fn FlexDirection::to_string(self : FlexDirection) -> String

FlexWrap

source

pub(all) enum FlexWrap {
  NoWrap
  Wrap
  WrapReverse
}

FlexWrap::to_string

source

fn FlexWrap::to_string(self : FlexWrap) -> String

FontStyle

source

pub(all) enum FontStyle {
  Normal
  Italic
}

FontStyle::to_string

source

fn FontStyle::to_string(self : FontStyle) -> String

FontWeight

source

pub(all) enum FontWeight {
  Normal
  Bold
  W100
  W200
  W300
  W400
  W500
  W600
  W700
  W800
  W900
}

⚠️ 注意：fontWeight 在 RN 里是字符串，不是数字。把它做成枚举，就杜绝了"被 Number() 吃掉变成 700"这个静默 bug（README 的 F3）。

FontWeight::to_string

source

fn FontWeight::to_string(self : FontWeight) -> String

Justify

source

pub(all) enum Justify {
  FlexStart
  FlexEnd
  Center
  SpaceBetween
  SpaceAround
  SpaceEvenly
}

Justify::to_string

source

fn Justify::to_string(self : Justify) -> String

Overflow

source

pub(all) enum Overflow {
  Visible
  Hidden
  Scroll
}

Overflow::to_string

source

fn Overflow::to_string(self : Overflow) -> String

Position

source

pub(all) enum Position {
  Relative
  Absolute
}

Position::to_string

source

fn Position::to_string(self : Position) -> String

Style

source

pub struct Style {
  entries : Array[(String, StyleValue)]
}

moobile 的类型化样式层。

设计要点（对应 README「架构级改造的空间」）：

属性集是封闭的 —— 只有下面这些方法存在。display:grid、 position:sticky、::before 这些根本没有构造器，所以"Web 能跑、移动端不能"在编译期就不可能发生。（DESIGN 原则 3：可移植子集优先于表达力。）
每个属性的值类型由签名钉死 —— font_weight 只收 FontWeight，所以不可能出现"把数字塞给 fontWeight"这种静默非法。
一份数据、两个后端 —— StyleValue 同时携带"是不是长度"，于是 RN 侧产出数字、CSS 侧产出 "16px"，不需要两边各存一套。

词表取自 React Native 的 style props（它本身就已经是一份被策展过的可移植子集：flexbox + 有限属性集，且刻意排除了 grid / sticky / 伪元素）。

Style::align_items

source

fn Style::align_items(self : Style, v : Align) -> Style

Style::align_self

source

fn Style::align_self(self : Style, v : AlignSelf) -> Style

Style::aspect_ratio

source

fn Style::aspect_ratio(self : Style, v : Double) -> Style

Style::background_color

source

fn Style::background_color(self : Style, v : String) -> Style

Style::border_bottom_color

source

fn Style::border_bottom_color(self : Style, v : String) -> Style

Style::border_bottom_left_radius

source

fn Style::border_bottom_left_radius(self : Style, v : Double) -> Style

Style::border_bottom_right_radius

source

fn Style::border_bottom_right_radius(self : Style, v : Double) -> Style

Style::border_bottom_style

source

fn Style::border_bottom_style(self : Style, v : BorderStyle) -> Style

Style::border_bottom_width

source

fn Style::border_bottom_width(self : Style, v : Double) -> Style

Style::border_color

source

fn Style::border_color(self : Style, v : String) -> Style

Style::border_left_color

source

fn Style::border_left_color(self : Style, v : String) -> Style

Style::border_left_style

source

fn Style::border_left_style(self : Style, v : BorderStyle) -> Style

Style::border_left_width

source

fn Style::border_left_width(self : Style, v : Double) -> Style

Style::border_radius

source

fn Style::border_radius(self : Style, v : Double) -> Style

Style::border_right_color

source

fn Style::border_right_color(self : Style, v : String) -> Style

Style::border_right_style

source

fn Style::border_right_style(self : Style, v : BorderStyle) -> Style

Style::border_right_width

source

fn Style::border_right_width(self : Style, v : Double) -> Style

Style::border_style

source

fn Style::border_style(self : Style, v : BorderStyle) -> Style

Style::border_top_color

source

fn Style::border_top_color(self : Style, v : String) -> Style

Style::border_top_left_radius

source

fn Style::border_top_left_radius(self : Style, v : Double) -> Style

Style::border_top_right_radius

source

fn Style::border_top_right_radius(self : Style, v : Double) -> Style

Style::border_top_style

source

fn Style::border_top_style(self : Style, v : BorderStyle) -> Style

Style::border_top_width

source

fn Style::border_top_width(self : Style, v : Double) -> Style

Style::border_width

source

fn Style::border_width(self : Style, v : Double) -> Style

Style::bottom

source

fn Style::bottom(self : Style, v : Dimension) -> Style

Style::color

source

fn Style::color(self : Style, v : String) -> Style

Style::column_gap

source

fn Style::column_gap(self : Style, v : Double) -> Style

Style::display

source

fn Style::display(self : Style, v : Display) -> Style

Style::entries

source

fn Style::entries(self : Style) -> Array[(String, StyleValue)]

取出条目（后端按顺序消费）。

Style::flex

source

fn Style::flex(self : Style, v : Double) -> Style

Style::flex_basis

source

fn Style::flex_basis(self : Style, v : Dimension) -> Style

Style::flex_direction

source

fn Style::flex_direction(self : Style, v : FlexDirection) -> Style

Style::flex_grow

source

fn Style::flex_grow(self : Style, v : Double) -> Style

Style::flex_shrink

source

fn Style::flex_shrink(self : Style, v : Double) -> Style

Style::flex_wrap

source

fn Style::flex_wrap(self : Style, v : FlexWrap) -> Style

Style::font_family

source

fn Style::font_family(self : Style, v : String) -> Style

Style::font_size

source

fn Style::font_size(self : Style, v : Double) -> Style

Style::font_size_of

source

fn Style::font_size_of(self : Style) -> Double?

从一份样式里找字号，供 Em 换算。找不到时返回 None。

Style::font_style

source

fn Style::font_style(self : Style, v : FontStyle) -> Style

Style::font_weight

source

fn Style::font_weight(self : Style, v : FontWeight) -> Style

Style::gap

source

fn Style::gap(self : Style, v : Double) -> Style

Style::height

source

fn Style::height(self : Style, v : Dimension) -> Style

Style::is_empty

source

fn Style::is_empty(self : Style) -> Bool

Style::justify_content

source

fn Style::justify_content(self : Style, v : Justify) -> Style

Style::left

source

fn Style::left(self : Style, v : Dimension) -> Style

Style::letter_spacing

source

fn Style::letter_spacing(self : Style, v : Double) -> Style

Style::letter_spacing_em

source

fn Style::letter_spacing_em(self : Style, ratio : Double) -> Style

相对字号的字距：letter-spacing: .1em。 RN 侧会按同一样式里的 fontSize 换算成点数（见 README 的 R1-3）。

Style::line_height

source

fn Style::line_height(self : Style, v : Double) -> Style

Style::line_height_em

source

fn Style::line_height_em(self : Style, ratio : Double) -> Style

相对字号的行动高。

Style::margin

source

fn Style::margin(self : Style, v : Dimension) -> Style

Style::margin_bottom

source

fn Style::margin_bottom(self : Style, v : Dimension) -> Style

Style::margin_horizontal

source

fn Style::margin_horizontal(self : Style, v : Dimension) -> Style

Style::margin_left

source

fn Style::margin_left(self : Style, v : Dimension) -> Style

Style::margin_right

source

fn Style::margin_right(self : Style, v : Dimension) -> Style

Style::margin_top

source

fn Style::margin_top(self : Style, v : Dimension) -> Style

Style::margin_vertical

source

fn Style::margin_vertical(self : Style, v : Dimension) -> Style

Style::max_height

source

fn Style::max_height(self : Style, v : Dimension) -> Style

Style::max_width

source

fn Style::max_width(self : Style, v : Dimension) -> Style

Style::min_height

source

fn Style::min_height(self : Style, v : Dimension) -> Style

Style::min_width

source

fn Style::min_width(self : Style, v : Dimension) -> Style

Style::new

source

fn Style::new() -> Style

Style::opacity

source

fn Style::opacity(self : Style, v : Double) -> Style

Style::order

source

fn Style::order(self : Style, v : Double) -> Style

order —— flex 排序。yi 用它把某块提到前面（order: -1）。

Style::overflow

source

fn Style::overflow(self : Style, v : Overflow) -> Style

Style::padding

source

fn Style::padding(self : Style, v : Dimension) -> Style

Style::padding_bottom

source

fn Style::padding_bottom(self : Style, v : Dimension) -> Style

Style::padding_horizontal

source

fn Style::padding_horizontal(self : Style, v : Dimension) -> Style

Style::padding_left

source

fn Style::padding_left(self : Style, v : Dimension) -> Style

Style::padding_right

source

fn Style::padding_right(self : Style, v : Dimension) -> Style

Style::padding_top

source

fn Style::padding_top(self : Style, v : Dimension) -> Style

Style::padding_vertical

source

fn Style::padding_vertical(self : Style, v : Dimension) -> Style

Style::position

source

fn Style::position(self : Style, v : Position) -> Style

Style::right_

source

fn Style::right_(self : Style, v : Dimension) -> Style

Style::row_gap

source

fn Style::row_gap(self : Style, v : Double) -> Style

Style::text_align

source

fn Style::text_align(self : Style, v : TextAlign) -> Style

Style::text_decoration_color

source

fn Style::text_decoration_color(self : Style, v : String) -> Style

Style::text_decoration_line

source

fn Style::text_decoration_line(self : Style, v : TextDecorationLine) -> Style

Style::text_decoration_style

source

fn Style::text_decoration_style(self : Style, v : TextDecorationStyle) -> Style

Style::text_transform

source

fn Style::text_transform(self : Style, v : TextTransform) -> Style

Style::top

source

fn Style::top(self : Style, v : Dimension) -> Style

Style::white_space

source

fn Style::white_space(self : Style, v : WhiteSpace) -> Style

Style::width

source

fn Style::width(self : Style, v : Dimension) -> Style

Style::z_index

source

fn Style::z_index(self : Style, v : Double) -> Style

StyleValue

source

pub(all) enum StyleValue {
  Unitless(Double)
  Px(Double)
  Pct(Double)
  Em(Double)
  Auto
  Str(String)
} derive(Eq)

值的形态，已足够覆盖 RN 与 CSS 的 style 取值：

构造器	RN 产出	CSS 产出
Unitless(d)	数字	"1"
Px(d)	数字	"16px"
Pct(d)	"50%"	"50%"
Em(d)	数字（按同一样式里的 fontSize 换算）	"0.1em"
Auto	"auto"	"auto"
Str(s)	字符串	字符串

★ Em 是实测补上的：yi 大量使用 letter-spacing: .1em 这类相对单位，而 RN 的 letterSpacing 只认点数。为它单独设构造器，就把"每次调用点手工乘一遍"这个易错动作消灭了。

StyleValue::resolve_em

source

fn StyleValue::resolve_em(self : StyleValue, font_size : Double) -> StyleValue

把 Em 按给定字号换算成点数。RN 没有 em 这个概念，只能换算。

StyleValue::to_css

source

fn StyleValue::to_css(self : StyleValue) -> String

CSS 侧取值：长度要补 px，无单位量不补，em 原样保留（CSS 认识它）。

StyleValue::to_rn_number

source

fn StyleValue::to_rn_number(self : StyleValue) -> Double?

RN 侧取值：长度与无单位量都是数字（RN 不接受 "16px"）。

Em 需要上下文里的字号，所以这里返回 None；由后端在知道同一样式的 fontSize 时另行换算（见 Em::resolve）。

StyleValue::to_rn_string

source

fn StyleValue::to_rn_string(self : StyleValue) -> String?

RN 侧取值：非数字的一律是字符串。

TextAlign

source

pub(all) enum TextAlign {
  Auto
  Left
  Right
  Center
  Justify
}

TextAlign::to_string

source

fn TextAlign::to_string(self : TextAlign) -> String

TextDecorationLine

source

pub(all) enum TextDecorationLine {
  None
  Underline
  LineThrough
  UnderlineLineThrough
}

TextDecorationLine::to_string

source

fn TextDecorationLine::to_string(self : TextDecorationLine) -> String

TextDecorationStyle

source

pub(all) enum TextDecorationStyle {
  Solid
  Double_
  Dotted
  Dashed
}

TextDecorationStyle::to_string

source

fn TextDecorationStyle::to_string(self : TextDecorationStyle) -> String

TextTransform

source

pub(all) enum TextTransform {
  None
  Uppercase
  Lowercase
  Capitalize
}

TextTransform::to_string

source

fn TextTransform::to_string(self : TextTransform) -> String

WhiteSpace

source

pub(all) enum WhiteSpace {
  Normal
  NoWrap
  Pre
  PreWrap
}

WhiteSpace::to_string

source

fn WhiteSpace::to_string(self : WhiteSpace) -> String

auto

source

fn auto() -> Dimension

css_property_name

source

fn css_property_name(key : String) -> String

RN 的键是 camelCase（backgroundColor），CSSOM 要 kebab-case（background-color）。命名差异由这一层吸收 —— 上层只需要写一种拼法。

pct

source

fn pct(d : Double) -> Dimension

px

source

fn px(d : Double) -> Dimension

Source Files

style.mbt

Site source Report issue Packages Build queue Skills Statistics

#Align

#Align::to_string

#AlignSelf

#AlignSelf::to_string

#BorderStyle

#BorderStyle::to_string

#Dimension

#Dimension::to_style_value

#Display

#Display::to_string

#FlexDirection

#FlexDirection::to_string

#FlexWrap

#FlexWrap::to_string

#FontStyle

#FontStyle::to_string

#FontWeight

#FontWeight::to_string

#Justify

#Justify::to_string

#Overflow

#Overflow::to_string

#Position

#Position::to_string

#Style

#Style::align_items

#Style::align_self

#Style::aspect_ratio

#Style::background_color

#Style::border_bottom_color

#Style::border_bottom_left_radius

#Style::border_bottom_right_radius

#Style::border_bottom_style

#Style::border_bottom_width

#Style::border_color

#Style::border_left_color

#Style::border_left_style

#Style::border_left_width

#Style::border_radius

#Style::border_right_color

#Style::border_right_style

#Style::border_right_width

#Style::border_style

#Style::border_top_color

#Style::border_top_left_radius

#Style::border_top_right_radius

#Style::border_top_style

#Style::border_top_width

#Style::border_width

#Style::bottom

#Style::color

#Style::column_gap

#Style::display

#Style::entries

#Style::flex

#Style::flex_basis

#Style::flex_direction

#Style::flex_grow

#Style::flex_shrink

#Style::flex_wrap

#Style::font_family

#Style::font_size

#Style::font_size_of

#Style::font_style

#Style::font_weight

#Style::gap

#Style::height

#Style::is_empty

#Style::justify_content

#Style::left

#Style::letter_spacing

#Style::letter_spacing_em

#Style::line_height

#Style::line_height_em

#Style::margin

#Style::margin_bottom

#Style::margin_horizontal

#Style::margin_left

#Style::margin_right

#Style::margin_top

Align

Align::to_string

AlignSelf

AlignSelf::to_string

BorderStyle

BorderStyle::to_string

Dimension

Dimension::to_style_value

Display

Display::to_string

FlexDirection

FlexDirection::to_string

FlexWrap

FlexWrap::to_string

FontStyle

FontStyle::to_string

FontWeight

FontWeight::to_string

Justify

Justify::to_string

Overflow

Overflow::to_string

Position

Position::to_string

Style

Style::align_items

Style::align_self

Style::aspect_ratio

Style::background_color

Style::border_bottom_color

Style::border_bottom_left_radius

Style::border_bottom_right_radius

Style::border_bottom_style

Style::border_bottom_width

Style::border_color

Style::border_left_color

Style::border_left_style

Style::border_left_width

Style::border_radius

Style::border_right_color

Style::border_right_style

Style::border_right_width

Style::border_style

Style::border_top_color

Style::border_top_left_radius

Style::border_top_right_radius

Style::border_top_style

Style::border_top_width

Style::border_width

Style::bottom

Style::color

Style::column_gap

Style::display

Style::entries

Style::flex

Style::flex_basis

Style::flex_direction

Style::flex_grow

Style::flex_shrink

Style::flex_wrap

Style::font_family

Style::font_size

Style::font_size_of

Style::font_style

Style::font_weight

Style::gap

Style::height

Style::is_empty

Style::justify_content

Style::left

Style::letter_spacing

Style::letter_spacing_em

Style::line_height

Style::line_height_em

Style::margin

Style::margin_bottom

Style::margin_horizontal

Style::margin_left

Style::margin_right

Style::margin_top