# Grid
栅格
案例
import { defineComponent } from "vue";
import { Button, Grid } from "sl-vue2-template";
const { Row, Col } = Grid;
export default defineComponent({
render() {
return (
<div>
<Row>
<Button.Primary>Row1</Button.Primary>
<Col>Row2</Col>
</Row>
<Row align="center">
<Button.Primary>Row1</Button.Primary>
<Col>Row2</Col>
</Row>
<Row justify="between">
<Button.Primary>Row1</Button.Primary>
<Col>Row2</Col>
</Row>
<Col>
<Button.Primary>Col1</Button.Primary>
<Col>Col2</Col>
</Col>
<Col align="center">
<Button.Primary>Col1</Button.Primary>
<Col>Col2</Col>
</Col>
<Col justify="between" style={{ height: "100px" }}>
<Button.Primary>Col1</Button.Primary>
<Col>Col2</Col>
</Col>
</div>
);
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# Row 行
flex 布局下的行对齐方式
# 属性
| 成员 | 说明 | 类型 | 必须 | 默认值 | 版本 |
|---|---|---|---|---|---|
| justify | flex 布局下的水平排列方式 | "start"|"end"|"center" |"around"|"between"|"evenly" | 否 | -- | -- |
| align | flex 布局下的垂直对齐方式 | "start"|"end"|"center" | 否 | -- | -- |
| wrap | 是否自动换行 | Boolean | 否 | false | -- |
| className | 自定义 class 名 | String | 否 | -- | -- |
# 事件
| 事件名称 | 说明 | 回调参数 | 必须 | 版本 |
|---|---|---|---|---|
| handlerClick | 点击的回调 | () => void | 是 | -- |
# Col 列
flex 布局下的列对齐方式
# 属性
| 成员 | 说明 | 类型 | 必须 | 默认值 | 版本 |
|---|---|---|---|---|---|
| justify | flex 布局下的垂直排列方式 | "start"|"end"|"center" |"around"|"between"|"evenly" | 否 | -- | -- |
| align | flex 布局下的水平对齐方式 | "start"|"end"|"center" | 否 | -- | -- |
| className | 自定义 class 名 | String | 否 | -- | -- |
# 事件
| 事件名称 | 说明 | 回调参数 | 必须 | 版本 |
|---|---|---|---|---|
| handlerClick | 点击的回调 | () => void | 是 | -- |
← Typography 排版 Icon 图标 →