tingle-box

该模块包含三个Component，分别是：

• HBox：水平方向的伸缩容器。本身也是一个可伸缩元素。
• VBox：垂直方向的伸缩容器。本身也是一个可伸缩元素。
• Box：可伸缩元素。

Install

npm install tingle-box --save

props

hAlign

HBox和VBox都支持该属性

描述：水平方向的对齐方式。
类型：String
可选：start、center、end、''(空)
默认：''(空)，相当于stretch效果，即垂直方向伸缩容器内的可伸缩元素的宽度和容器宽度相同。
必选：否

示例：

<HBox hAlign="center">...</HBox>
<VBox hAlign="center">...</VBox>

vAlign

HBox和VBox都支持该属性

描述：垂直方向的对齐方式。
类型：String
可选：start、center、end、''(空)
默认：''(空)，相当于stretch效果，即水平方向伸缩容器内的可伸缩元素的高度和容器高度相同。
必选：否

示例：

<HBox vAlign="center">...</HBox>
<VBox vAlign="center">...</VBox>

flex

HBox、VBox和Box都支持该属性

描述：可伸缩元素的伸缩值。
类型：Number
可选：0、1、2、3 默认：0(空)
必选：否

示例：

<HBox hAlign="center">
  <Box flex={1}>占50%宽</Box>
  <Box flex={1}>占50%宽</Box>
</HBox>

Links

• Issues