diff --git a/docs/component/uniui/uni-grid.md b/docs/component/uniui/uni-grid.md index aac7e0b742f13be95edf5a73c8322074bde6de4f..68e527d8f7fb7c0d0d7859c85a394f128f84c919 100644 --- a/docs/component/uniui/uni-grid.md +++ b/docs/component/uniui/uni-grid.md @@ -1,101 +1,101 @@ - -::: tip 组件名：uni-grid -> 代码块： `uGrid` - -[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-grid) -::: - -宫格组件。 - -## 介绍 -::: warning 注意事项 -> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 -- 删除组件自带圆点角标效果，完全交给用户实现，示例有简单角标效果实现 -- Grid 组件仅在自定义组件模式下支持 -- column 属性最大值最好不要超过 5 个，如果超过，需要注意内容显示 -- 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： `详情 --> 项目配置 --> 启用 component2 编译` -- 为了避免高度显示错误组件内必须要有内容 -::: - -### 基本用法 - -```html - - - 文本 - - - 文本 - - - 文本 - - -``` -### 不带边框并矩形显示 -```html - - - 文本 - - - 文本 - - - 文本 - - - 文本 - - - 文本 - - - 文本 - - -``` - -## API - -### Grid Props - -**uni-grid 属性说明：** - -|属性名 |类型 |默认值 |说明 | -|:-: |:-: |:-: |:-: | -|column |Number |3 |每列显示个数 | -|borderColor|String |#d0dee5|边框颜色 | -|showBorder |Boolean|true |是否显示边框 | -|square |Boolean|true |是否方形显示 | -|highlight |Boolean|true |点击背景是否高亮 | - -### Grid Events -|事件名 |说明 |返回值 | -|:-: |:-: |:-: | -|@change|点击 grid 触发 |e={detail:{index:0}}，index 为当前点击 grid下标| - - -### GridItem Props - -|属性名|类型 |默认值 |说明 | -|:-: |:-: |:-: |:-: | -|index|Number |- |子组件的唯一标识 ，点击grid会返回当前的标识| - - - - - -## 示例 -::: warning 注意 -示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。 - -请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-grid) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。 -::: - -::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid -> Template -``` html + +::: tip 组件名：uni-grid +> 代码块： `uGrid` + +[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-grid) +::: + +宫格组件。 + +## 介绍 +::: warning 注意事项 +> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 +- 删除组件自带圆点角标效果，完全交给用户实现，示例有简单角标效果实现 +- Grid 组件仅在自定义组件模式下支持 +- column 属性最大值最好不要超过 5 个，如果超过，需要注意内容显示 +- 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： `详情 --> 项目配置 --> 启用 component2 编译` +- 为了避免高度显示错误组件内必须要有内容 +::: + +### 基本用法 + +```html + + + 文本 + + + 文本 + + + 文本 + + +``` +### 不带边框并矩形显示 +```html + + + 文本 + + + 文本 + + + 文本 + + + 文本 + + + 文本 + + + 文本 + + +``` + +## API + +### Grid Props + +**uni-grid 属性说明：** + +|属性名 |类型 |默认值 |说明 | +|:-: |:-: |:-: |:-: | +|column |Number |3 |每列显示个数 | +|borderColor|String |#d0dee5|边框颜色 | +|showBorder |Boolean|true |是否显示边框 | +|square |Boolean|true |是否方形显示 | +|highlight |Boolean|true |点击背景是否高亮 | + +### Grid Events +|事件名 |说明 |返回值 | +|:-: |:-: |:-: | +|@change|点击 grid 触发 |e={detail:{index:0}}，index 为当前点击 grid下标| + + +### GridItem Props + +|属性名|类型 |默认值 |说明 | +|:-: |:-: |:-: |:-: | +|index|Number |- |子组件的唯一标识 ，点击grid会返回当前的标识| + + + + + +## 示例 +::: warning 注意 +示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。 + +请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-grid) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。 +::: + +::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid +> Template +``` html -``` -> Script +``` +> Script ``` html -``` -> Style +``` +> Style ``` html - -``` -::: - -[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid) \ No newline at end of file + + +``` +:::