Merge branch 'dev' into next
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
宫格可以在水平方向上把页面分隔成等宽度的区块,用于展示内容或进行页面导航
|
||||
宫格可以在水平方向上把页面分隔成等宽度的区块,用于展示内容或进行页面导航。
|
||||
|
||||
### 引入
|
||||
|
||||
@@ -19,7 +19,7 @@ app.use(GridItem);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`icon`属性设置格子内的图标,`text`属性设置文字内容
|
||||
通过 `icon` 属性设置格子内的图标,`text` 属性设置文字内容。
|
||||
|
||||
```html
|
||||
<van-grid>
|
||||
@@ -32,7 +32,7 @@ app.use(GridItem);
|
||||
|
||||
### 自定义列数
|
||||
|
||||
默认一行展示四个格子,可以通过`column-num`自定义列数
|
||||
默认一行展示四个格子,可以通过 `column-num` 自定义列数。
|
||||
|
||||
```html
|
||||
<van-grid :column-num="3">
|
||||
@@ -42,7 +42,7 @@ app.use(GridItem);
|
||||
|
||||
### 自定义内容
|
||||
|
||||
通过插槽可以自定义格子展示的内容
|
||||
通过插槽可以自定义格子展示的内容。
|
||||
|
||||
```html
|
||||
<van-grid :border="false" :column-num="3">
|
||||
@@ -60,7 +60,7 @@ app.use(GridItem);
|
||||
|
||||
### 正方形格子
|
||||
|
||||
设置`square`属性后,格子的高度会和宽度保持一致
|
||||
设置 `square` 属性后,格子的高度会和宽度保持一致。
|
||||
|
||||
```html
|
||||
<van-grid square>
|
||||
@@ -70,7 +70,7 @@ app.use(GridItem);
|
||||
|
||||
### 格子间距
|
||||
|
||||
通过`gutter`属性设置格子之间的距离
|
||||
通过 `gutter` 属性设置格子之间的距离。
|
||||
|
||||
```html
|
||||
<van-grid :gutter="10">
|
||||
@@ -80,7 +80,7 @@ app.use(GridItem);
|
||||
|
||||
### 内容横排
|
||||
|
||||
将`direction`属性设置为`horizontal`,可以让宫格的内容呈横向排列
|
||||
将 `direction` 属性设置为 `horizontal`,可以让宫格的内容呈横向排列。
|
||||
|
||||
```html
|
||||
<van-grid direction="horizontal" :column-num="2">
|
||||
@@ -92,7 +92,7 @@ app.use(GridItem);
|
||||
|
||||
### 页面导航
|
||||
|
||||
通过`to`属性设置`vue-router`跳转链接,通过`url`属性设置 URL 跳转链接
|
||||
通过 `to` 属性设置 `vue-router` 跳转链接,通过 `url` 属性设置 URL 跳转链接。
|
||||
|
||||
```html
|
||||
<van-grid clickable :column-num="2">
|
||||
@@ -103,7 +103,7 @@ app.use(GridItem);
|
||||
|
||||
### 徽标提示
|
||||
|
||||
设置`dot`属性后,会在图标右上角展示一个小红点。设置`badge`属性后,会在图标右上角展示相应的徽标
|
||||
设置 `dot` 属性后,会在图标右上角展示一个小红点。设置 `badge` 属性后,会在图标右上角展示相应的徽标。
|
||||
|
||||
```html
|
||||
<van-grid :column-num="2">
|
||||
|
||||
Reference in New Issue
Block a user