From 53dd9d9399ddee4ee06c080e2b6282a11746e912 Mon Sep 17 00:00:00 2001 From: geekxcc Date: Fri, 24 Jun 2022 01:48:55 +0000 Subject: [PATCH] =?UTF-8?q?update=20docs/component/uniui/uni-fab.md.=20=E5=B7=A6=E4=B8=8A=E8=A7=92=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=20=E5=A4=9A=E4=BA=86=E4=B8=80=E8=A1=8C?= =?UTF-8?q?=EF=BC=8C=E6=95=85=E5=88=A0=E5=8E=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/component/uniui/uni-fab.md | 205 ++++++++++++++++---------------- 1 file changed, 102 insertions(+), 103 deletions(-) diff --git a/docs/component/uniui/uni-fab.md b/docs/component/uniui/uni-fab.md index 39ad7cad6..ee8dbd623 100644 --- a/docs/component/uniui/uni-fab.md +++ b/docs/component/uniui/uni-fab.md @@ -1,94 +1,94 @@ - -::: tip 组件名：uni-fab -> 代码块： `uFab` - -[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-fab) -::: - -点击可展开一个图形按钮菜单 - - -## 介绍 -::: warning 注意事项 -> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 -- 不建议动态修改属性，可能会耗损部分性能。 -- 展开菜单暂不支持字体图标，使用图片路径时建议使用绝对路径，相对路径可能会有问题。 -- 选中状态要通过自己控制，如果不希望有选中状态，不处理 `active` 即可。 -- 展开菜单建议最多显示四个，如果过多对于小屏手机可能会超出屏幕。 -::: - -### 基本用法 - -在 `template` 中使用组件 - -```html - -``` - - -## API - -### Fab Props - -|属性名|类型| 默认值| 说明| -|:-:| :-:| :-:| :-:| -|pattern| Object| -| 可选样式配置项| -|horizontal| String| 'left'| 水平对齐方式。`left`:左对齐，`right`：右对齐| -|vertical| String| 'bottom'| 垂直对齐方式。`bottom`:下对齐，`top`：上对齐| -|direction | String| 'horizontal'| 展开菜单显示方式。`horizontal`:水平显示，`vertical`：垂直显示 | -|popMenu| Boolean| true| 是否使用弹出菜单| -|content| Array| -| 展开菜单内容配置项| - - - -**pattern配置项：** - -|参数|类型 | 默认值 |说明| -|:-:|:-:| :-:| :-:| -|color| String | #3c3e49| 文字默认颜色| -|selectedColor| String | #007AFF| 文字选中时的颜色| -|backgroundColor| String| #ffffff| 背景色| -|buttonColor| String| #3c3e49| 按钮背景色| - -**content配置项：** - -| 参数|类型 | 说明| -| :-:| :-:| :-:| :-:| -| iconPath| String| 图片路径| -| selectedIconPath| String | 选中后图片路径| -| text| String | 文字| -| active| Boolean| 是否选中当前 | - -### Fab Events - -| 参数|类型| 说明| -| :-:| :-:| :-:| -| @trigger | Function | 展开菜单点击事件，返回点击信息| -| @fabClick | Function | 悬浮按钮点击事件 | - - - -## 示例 -::: warning 注意 -示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。 - -请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-fab) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。 -::: - -::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab -> Template -``` html + +::: tip 组件名：uni-fab +> 代码块： `uFab` + +[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-fab) +::: + +点击可展开一个图形按钮菜单 + + +## 介绍 +::: warning 注意事项 +> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 +- 不建议动态修改属性，可能会耗损部分性能。 +- 展开菜单暂不支持字体图标，使用图片路径时建议使用绝对路径，相对路径可能会有问题。 +- 选中状态要通过自己控制，如果不希望有选中状态，不处理 `active` 即可。 +- 展开菜单建议最多显示四个，如果过多对于小屏手机可能会超出屏幕。 +::: + +### 基本用法 + +在 `template` 中使用组件 + +```html + +``` + + +## API + +### Fab Props + +|属性名|类型| 默认值| 说明| +|:-:| :-:| :-:| :-:| +|pattern| Object| -| 可选样式配置项| +|horizontal| String| 'left'| 水平对齐方式。`left`:左对齐，`right`：右对齐| +|vertical| String| 'bottom'| 垂直对齐方式。`bottom`:下对齐，`top`：上对齐| +|direction | String| 'horizontal'| 展开菜单显示方式。`horizontal`:水平显示，`vertical`：垂直显示 | +|popMenu| Boolean| true| 是否使用弹出菜单| +|content| Array| -| 展开菜单内容配置项| + + + +**pattern配置项：** + +|参数|类型 | 默认值 |说明| +|:-:|:-:| :-:| :-:| +|color| String | #3c3e49| 文字默认颜色| +|selectedColor| String | #007AFF| 文字选中时的颜色| +|backgroundColor| String| #ffffff| 背景色| +|buttonColor| String| #3c3e49| 按钮背景色| + +**content配置项：** + +| 参数|类型 | 说明| +| :-:| :-:| :-:| :-:| +| iconPath| String| 图片路径| +| selectedIconPath| String | 选中后图片路径| +| text| String | 文字| +| active| Boolean| 是否选中当前 | + +### Fab Events + +| 参数|类型| 说明| +| :-:| :-:| :-:| +| @trigger | Function | 展开菜单点击事件，返回点击信息| +| @fabClick | Function | 悬浮按钮点击事件 | + + + +## 示例 +::: warning 注意 +示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。 + +请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-fab) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。 +::: + +::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab +> Template +``` html -``` - -> Script +``` + +> Script ``` html -``` -> Style +``` +> Style ``` html - -``` -::: - - + + +``` +::: + + [完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab) \ No newline at end of file -- Gitee