From 11e8c940302f77565183270926819e7b050885a0 Mon Sep 17 00:00:00 2001 From: xiaoxm <15007591989@139.com> Date: Wed, 17 Aug 2022 06:59:03 +0000 Subject: [PATCH] update docs/component/uniui/uni-nav-bar.md. Signed-off-by: xiaoxm <15007591989@139.com> --- docs/component/uniui/uni-nav-bar.md | 340 ++++++++++++++-------------- 1 file changed, 170 insertions(+), 170 deletions(-) diff --git a/docs/component/uniui/uni-nav-bar.md b/docs/component/uniui/uni-nav-bar.md index a74e0fb70..2e4804ab2 100644 --- a/docs/component/uniui/uni-nav-bar.md +++ b/docs/component/uniui/uni-nav-bar.md @@ -1,164 +1,164 @@ - -::: tip 组件名：uni-nav-bar -> 代码块： `uNavBar` - -[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-nav-bar) -::: - -导航栏组件，主要用于头部导航。 - - -## 介绍 -::: warning 注意事项 -> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 -- 组件需要依赖 `sass` 插件 ，请根据提示自行手动安装 -- 组件内部依赖 `'uni-icons'` 组件 -- 请勿在组件内部使用，宽度可能会发生错误 -- 当前组件不支持文字大小的修改 ，如有需要请使用深度选择器覆盖样式 -::: - -### 基本用法 - -```html - -``` - -### 开启阴影 - -使用 `shadow` 属性开启导航栏阴影 - -Tips: -- nvue 下某些机型可能显示不正常 ，建议 nvue 下关闭阴影 - -```html - -``` - -### 开启暗黑模式 - -使用 `dark` 属性开启导航栏的暗黑模式 - -Tips: -- 暗黑模式只会改变组件默认的前景色和背景色，如果设置自定义颜色，自定义颜色将优先显示 - -```html - -``` -### 自定义颜色 - -使用 `color` 属性修改导航栏前景色（文字图标颜色） - -使用 `background-color` 属性修改导航栏背景色 - -```html - -``` - -### 带左右文字 - -使用 `left-text` 属性设置导航栏左侧文字 - -使用 `right-text` 属性设置导航栏右侧文字 - -Tips: -- 图标依赖 `uni-icons` 组件 ，可用图标类型参考 [uni-icons 示例](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons) - -```html - -``` - - -### 带左右图标 - -使用 `left-icon` 属性设置导航栏左侧图标 - -使用 `right-icon` 属性设置导航栏右侧图标 - -Tips: -- 图标依赖 `uni-icons` 组件 ，可用图标类型参考 [uni-icons 示例](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons) -- **right-text 和 right-icon 属性不能同时存在，如需都使用，请使用 right 插槽自定义** - -```html - -``` - -### 自定义高度 - -使用 `height` 属性设置导航栏高度 - -Tips: -- 组件默认高度为44px -- 如使用 Number 类型传值默认单位为 px，使用 String 类型传值则必须带单位，如传值无效 ，则使用默认值 - -```html - -``` - - -## API - -### NavBar Props - -|属性名|类型|默认值 |说明| -|:-:|:-:|:-:|:-:| -|title|String|-|标题文字| -|leftText|String|-|左侧按钮文本| -|rightText|String|-|右侧按钮文本| -|leftIcon|String|-|左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性） | -|rightIcon|String |-|右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性） | -|color|String|#000000|图标和文字颜色| -|backgroundColor|String |#FFFFFF|导航栏背景颜色| -|fixed|Boolean|false|是否固定顶部| -|statusBar|Boolean|false|是否包含状态栏| -|shadow|Boolean|false|导航栏下是否有阴影| -|border|Boolean|true|导航栏下是否有边框| -|height|Number/String|44|导航栏高度| -|dark|Boolean|false|导航栏开启暗黑模式| -|leftWidth|Number/String|120rpx|导航栏左侧插槽宽度| -|rightWidth|Number/String|120rpx|导航栏右侧插槽宽度| -|stat|Boolean/String|120rpx|是否开启统计标题功能。**注意：只有使用title 属性 ，且开启了统计功能才生效**| - -**Tips** -- `leftWidth` 和 `rightWidth` 如无必要不需要设置 -- `leftWidth` 和 `rightWidth` 如需设置 ，只有两个值相同，才能保证 `title` 居中 ，如设置值过大，需要注意到 `title` 被覆盖的可能 - - -### NavBar Slots -支持向 NavBar 里插入不同内容，以达到自定义的目的。 - -|slot名 |说明| -|:-:|:-:| -|default|向导航栏中间插入 | -|left|向导航栏左侧插入 | -|right |向导航栏右侧插入 | - -```html - - 标题栏 - left - right - -``` - -### NavBar Events - -|事件名|说明|返回值| -|:-:|:-:|:-:| -|@clickLeft |左侧按钮点击时触发|-| -|@clickRight|右侧按钮点击时触发|-| - - - -## 示例 -::: warning 注意 -示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。 - -请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-nav-bar) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。 -::: - -::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/nav-bar/nav-bar -> Template -``` html + +::: tip 组件名：uni-nav-bar +> 代码块： `uNavBar` + +[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-nav-bar) +::: + +导航栏组件，主要用于头部导航。 + + +## 介绍 +::: warning 注意事项 +> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 +- 组件需要依赖 `sass` 插件 ，请根据提示自行手动安装 +- 组件内部依赖 `'uni-icons'` 组件 +- 请勿在组件内部使用，宽度可能会发生错误 +- 当前组件不支持文字大小的修改 ，如有需要请使用深度选择器覆盖样式 +::: + +### 基本用法 + +```html + +``` + +### 开启阴影 + +使用 `shadow` 属性开启导航栏阴影 + +Tips: +- nvue 下某些机型可能显示不正常 ，建议 nvue 下关闭阴影 + +```html + +``` + +### 开启暗黑模式 + +使用 `dark` 属性开启导航栏的暗黑模式 + +Tips: +- 暗黑模式只会改变组件默认的前景色和背景色，如果设置自定义颜色，自定义颜色将优先显示 + +```html + +``` +### 自定义颜色 + +使用 `color` 属性修改导航栏前景色（文字图标颜色） + +使用 `background-color` 属性修改导航栏背景色 + +```html + +``` + +### 带左右文字 + +使用 `left-text` 属性设置导航栏左侧文字 + +使用 `right-text` 属性设置导航栏右侧文字 + +Tips: +- 图标依赖 `uni-icons` 组件 ，可用图标类型参考 [uni-icons 示例](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons) + +```html + +``` + + +### 带左右图标 + +使用 `left-icon` 属性设置导航栏左侧图标 + +使用 `right-icon` 属性设置导航栏右侧图标 + +Tips: +- 图标依赖 `uni-icons` 组件 ，可用图标类型参考 [uni-icons 示例](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons) +- **right-text 和 right-icon 属性不能同时存在，如需都使用，请使用 right 插槽自定义** + +```html + +``` + +### 自定义高度 + +使用 `height` 属性设置导航栏高度 + +Tips: +- 组件默认高度为44px +- 如使用 Number 类型传值默认单位为 px，使用 String 类型传值则必须带单位，如传值无效 ，则使用默认值 + +```html + +``` + + +## API + +### NavBar Props + +|属性名|类型|默认值 |说明| +|:-:|:-:|:-:|:-:| +|title|String|-|标题文字| +|leftText|String|-|左侧按钮文本| +|rightText|String|-|右侧按钮文本| +|leftIcon|String|-|左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性） | +|rightIcon|String |-|右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性） | +|color|String|#000000|图标和文字颜色| +|backgroundColor|String |#FFFFFF|导航栏背景颜色| +|fixed|Boolean|false|是否固定顶部| +|statusBar|Boolean|false|是否包含状态栏| +|shadow|Boolean|false|导航栏下是否有阴影| +|border|Boolean|true|导航栏下是否有边框| +|height|Number/String|44|导航栏高度| +|dark|Boolean|false|导航栏开启暗黑模式| +|leftWidth|Number/String|120rpx|导航栏左侧插槽宽度| +|rightWidth|Number/String|120rpx|导航栏右侧插槽宽度| +|stat|Boolean/String|120rpx|是否开启统计标题功能。**注意：只有使用title 属性 ，且开启了统计功能才生效**| + +**Tips** +- `leftWidth` 和 `rightWidth` 如无必要不需要设置 +- `leftWidth` 和 `rightWidth` 如需设置 ，只有两个值相同，才能保证 `title` 居中 ，如设置值过大，需要注意到 `title` 被覆盖的可能 + + +### NavBar Slots +支持向 NavBar 里插入不同内容，以达到自定义的目的。 + +|slot名 |说明| +|:-:|:-:| +|default|向导航栏中间插入 | +|left|向导航栏左侧插入 | +|right |向导航栏右侧插入 | + +```html + + 标题栏 + left + right + +``` + +### NavBar Events + +|事件名|说明|返回值| +|:-:|:-:|:-:| +|@clickLeft |左侧按钮点击时触发|-| +|@clickRight|右侧按钮点击时触发|-| + + + +## 示例 +::: warning 注意 +示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。 + +请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-nav-bar) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。 +::: + +::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/nav-bar/nav-bar +> Template +``` html -``` -> Script +``` +> Script ```html -``` -> Style +``` +> Style ```html - -``` -::: - + + +``` +::: + [完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/nav-bar/nav-bar) \ No newline at end of file -- Gitee