@fulate/yoga 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -22
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
# `@fulate/yoga`
|
|
2
2
|
|
|
3
|
-
> 文档角色:`GUIDE`。权威来源:Yoga adapter 源码与测试;Core/UI 的场景和元素契约由对应指南拥有。
|
|
4
|
-
|
|
5
3
|
`@fulate/yoga` 用 `yoga-layout` 为 Canvas 元素提供 Flex 布局。`Div` 是带 Yoga 样式的矩形容器,
|
|
6
4
|
`Span` 是带文本测量的 Yoga 文本元素;两者都仍是普通 Fulate Node/Element,不创建独立场景树。
|
|
7
5
|
|
|
@@ -46,23 +44,23 @@ clean 状态调用不会重新计算 Yoga。普通异步使用无需手动调用
|
|
|
46
44
|
|
|
47
45
|
导入 `@fulate/yoga` 会注册 `f-div` 与 `f-span` 元素,供 `@fulate/vue` renderer 使用:
|
|
48
46
|
|
|
49
|
-
```tsx
|
|
50
|
-
<f-div flexDirection={FlexDirection.Column}>
|
|
51
|
-
<f-span text="Ready" />
|
|
52
|
-
</f-div>
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
## TextRow
|
|
56
|
-
|
|
57
|
-
`TextRow` 保留 Yoga 对直接子项的横向尺寸和位置计算,并让直接 `Span` 与嵌套
|
|
58
|
-
`TextRow` 使用同一条实际 alphabetic baseline。普通 `Div` 仍可作为固定或
|
|
59
|
-
`flexGrow` spacer,不参与文字基线计算。
|
|
60
|
-
|
|
61
|
-
```tsx
|
|
62
|
-
<f-text-row width={520} gap={8}>
|
|
63
|
-
<f-span text="P:" fontSize={18} />
|
|
64
|
-
<f-div flexGrow={1} />
|
|
65
|
-
<f-span text="30036" fontSize={20} />
|
|
66
|
-
<f-span text="kW" fontSize={12} />
|
|
67
|
-
</f-text-row>
|
|
68
|
-
```
|
|
47
|
+
```tsx
|
|
48
|
+
<f-div flexDirection={FlexDirection.Column}>
|
|
49
|
+
<f-span text="Ready" />
|
|
50
|
+
</f-div>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## TextRow
|
|
54
|
+
|
|
55
|
+
`TextRow` 保留 Yoga 对直接子项的横向尺寸和位置计算,并让直接 `Span` 与嵌套
|
|
56
|
+
`TextRow` 使用同一条实际 alphabetic baseline。普通 `Div` 仍可作为固定或
|
|
57
|
+
`flexGrow` spacer,不参与文字基线计算。
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
<f-text-row width={520} gap={8}>
|
|
61
|
+
<f-span text="P:" fontSize={18} />
|
|
62
|
+
<f-div flexGrow={1} />
|
|
63
|
+
<f-span text="30036" fontSize={20} />
|
|
64
|
+
<f-span text="kW" fontSize={12} />
|
|
65
|
+
</f-text-row>
|
|
66
|
+
```
|