Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
it&s me
unidocs-zh
提交
bb504978
U
unidocs-zh
项目概览
it&s me
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录