diff --git a/docs/component/uniui/uni-badge.md b/docs/component/uniui/uni-badge.md index 9f31d98111ae715e087b68e39f35c41020263f3c..390e88bf6b9dcf0425ebb4b1288f0b1534401747 100644 --- a/docs/component/uniui/uni-badge.md +++ b/docs/component/uniui/uni-badge.md @@ -1,64 +1,64 @@ - -::: tip 组件名：uni-badge -> 代码块： `uBadge` - -[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-badge) -::: - -数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景。 - -## 介绍 - -### 基本用法 - -在 ``template`` 中使用组件 - -```html - - - - - - - - - - -``` - -## 属性/方法 - -### Badge Props - -|属性名|类型|默认值|说明| -|:-:|:-:|:-:|:-:| -|text|String|-|角标内容| -|type|String|default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)| -|size|String|normal |Badge 大小，可取值：normal、small| -|is-dot|Boolean|false|不展示数字，只有一个小点| -|max-num|String/Numbuer|99|展示封顶的数字值，超过 99 显示99+| -|custom-style|Object|{}|自定义 Badge 样式, 样式对象语法| -|inverted|Boolean|false |是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色| -|absolute(不支持 nvue)|String|rightTop|开启绝对定位, 角标将定位到其包裹的标签的四个角上，可选值： rightTop(右上角)、rightBottom（右下角）、leftBottom（左下角） 、leftTop（左上角） | -|offset|Array[number]| [0, 0]|距定位角中心点的偏移量，[-10, -10] 表示向 absolute 指定的方向偏移 10px，[10, 10] 表示向 absolute 指定的反方向偏移 10px，只有存在 absolute 属性时有效，与absolute 的值一一对应（例如：值为rightTop， 对应 offset 为 [right, Top]）| - -### Badge Events - -|事件名|事件说明|返回参数| -|:-:|:-:|:-:| -|@click |点击 Badge 触发事件| -| - - - -## 示例 -::: warning 注意 -直接拷贝示例代码，无法运行 ，示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件。 - -请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-badge) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。 -::: -:::preview https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge - -```html + +::: tip 组件名：uni-badge +> 代码块： `uBadge` + +[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-badge) +::: + +数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景。 + +## 介绍 + +### 基本用法 + +在 ``template`` 中使用组件 + +```html + + + + + + + + + + +``` + +## 属性/方法 + +### Badge Props + +|属性名|类型|默认值|说明| +|:-:|:-:|:-:|:-:| +|text|String|-|角标内容| +|type|String|default|颜色类型，可选值：info（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)| +|size|String|normal |Badge 大小，可取值：normal、small| +|is-dot|Boolean|false|不展示数字，只有一个小点| +|max-num|String/Numbuer|99|展示封顶的数字值，超过 99 显示99+| +|custom-style|Object|{}|自定义 Badge 样式, 样式对象语法| +|inverted|Boolean|false |是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色| +|absolute(不支持 nvue)|String|rightTop|开启绝对定位, 角标将定位到其包裹的标签的四个角上，可选值： rightTop(右上角)、rightBottom（右下角）、leftBottom（左下角） 、leftTop（左上角） | +|offset|Array[number]| [0, 0]|距定位角中心点的偏移量，[-10, -10] 表示向 absolute 指定的方向偏移 10px，[10, 10] 表示向 absolute 指定的反方向偏移 10px，只有存在 absolute 属性时有效，与absolute 的值一一对应（例如：值为rightTop， 对应 offset 为 [right, Top]）| + +### Badge Events + +|事件名|事件说明|返回参数| +|:-:|:-:|:-:| +|@click |点击 Badge 触发事件| -| + + + +## 示例 +::: warning 注意 +直接拷贝示例代码，无法运行 ，示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件。 + +请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-badge) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。 +::: +:::preview https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge + +```html