Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
bb504978
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3172
Star
105
Fork
804
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
93
列表
看板
标记
里程碑
合并请求
67
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
93
Issue
93
列表
看板
标记
里程碑
合并请求
67
合并请求
67
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
bb504978
编写于
1月 18, 2022
作者:
M
mehaotian
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: uni-nav-bar 、uni-list
上级
b17632fa
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
86 addition
and
7 deletion
+86
-7
docs/component/uniui/uni-list.md
docs/component/uniui/uni-list.md
+0
-1
docs/component/uniui/uni-nav-bar.md
docs/component/uniui/uni-nav-bar.md
+86
-6
未找到文件。
docs/component/uniui/uni-list.md
浏览文件 @
bb504978
...
...
@@ -38,7 +38,6 @@ uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件:[uni-l
> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式,开启方式: 详情 --> 项目配置 --> 启用 component2 编译
> - 如果需要修改 `switch`、`badge` 样式,请使用插槽自定义
> - 在 `HBuilderX` 低版本中,可能会出现组件显示 `undefined` 的问题,请升级最新的 `HBuilderX` 或者 `cli`
> - 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
### 基本用法
...
...
docs/component/uniui/uni-nav-bar.md
浏览文件 @
bb504978
...
...
@@ -6,14 +6,93 @@
导航栏组件,主要用于头部导航。
## 基本用法
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请根据提示自行手动安装
> - 组件内部依赖 `'uni-icons'` 组件
> - 请勿在组件内部使用,宽度可能会发生错误
> - 当前组件不支持文字大小的修改 ,如有需要请使用深度选择器覆盖样式
在
``template``
中使用组件
### 基本用法
```
html
<uni-nav-bar
left-icon=
"back"
left-text=
"返回"
right-text=
"菜单"
title=
"导航栏组件"
></uni-nav-bar>
<uni-nav-bar
title=
"导航栏组件"
></uni-nav-bar>
```
### 开启阴影
使用
`shadow`
属性开启导航栏阴影
Tips:
-
nvue 下某些机型可能显示不正常 ,建议 nvue 下关闭阴影
```
html
<uni-nav-bar
shadow
title=
"导航栏组件"
></uni-nav-bar>
```
### 开启暗黑模式
使用
`dark`
属性开启导航栏的暗黑模式
Tips:
-
暗黑模式只会改变组件默认的前景色和背景色,如果设置自定义颜色,自定义颜色将优先显示
```
html
<uni-nav-bar
dark
title=
"导航栏组件"
></uni-nav-bar>
```
### 自定义颜色
使用
`color`
属性修改导航栏前景色(文字图标颜色)
使用
`background-color`
属性修改导航栏背景色
```
html
<uni-nav-bar
dark
title=
"导航栏组件"
></uni-nav-bar>
```
### 带左右文字
使用
`left-text`
属性设置导航栏左侧文字
使用
`right-text`
属性设置导航栏右侧文字
Tips:
-
图标依赖
`uni-icons`
组件 ,可用图标类型参考
[
uni-icons 示例
](
https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons
)
```
html
<uni-nav-bar
left-text=
"返回"
right-text=
"设置"
title=
"标题"
/>
```
### 带左右图标
使用
`left-icon`
属性设置导航栏左侧图标
使用
`right-icon`
属性设置导航栏右侧图标
Tips:
-
图标依赖
`uni-icons`
组件 ,可用图标类型参考
[
uni-icons 示例
](
https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons
)
-
**right-text 和 right-icon 属性不能同时存在,如需都使用,请使用 right 插槽自定义**
```
html
<uni-nav-bar
left-icon=
"left"
right-icon=
"cart"
title=
"标题"
/>
```
### 自定义高度
使用
`height`
属性设置导航栏高度
Tips:
-
组件默认高度为44px
-
如使用 Number 类型传值默认单位为 px,使用 String 类型传值则必须带单位,如传值无效 ,则使用默认值
```
html
<uni-nav-bar
height=
"120rpx"
title=
"自定义高度"
/>
```
## API
### NavBar Props
|属性名|类型|默认值 |说明|
...
...
@@ -29,16 +108,17 @@
|statusBar|Boolean|false|是否包含状态栏|
|shadow|Boolean|false|导航栏下是否有阴影|
|border|Boolean|true|导航栏下是否有边框|
|height|Number/String|44|导航栏高度|
|dark|Boolean|false|导航栏开启暗黑模式|
### NavBar Slots
开发者使用 NavBar 时,支持向 NavBar 里插入不同内容,以达到自定义的目的。
支持向 NavBar 里插入不同内容,以达到自定义的目的。
|slot名 |说明|
|:-:|:-:|
|default|向导航栏中间插入 |
|left|向导航栏左侧插入 |
|right |向导航栏右侧插入 |
|default|向导航栏中间插入 |
```
html
<uni-nav-bar>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录