Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
2355a555
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3603
Star
108
Fork
922
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
120
列表
看板
标记
里程碑
合并请求
110
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
120
Issue
120
列表
看板
标记
里程碑
合并请求
110
合并请求
110
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
2355a555
编写于
7月 22, 2022
作者:
DCloud-WZF
💬
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs(uni-ui): add uni-section docs
上级
66c60301
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
131 addition
and
0 deletion
+131
-0
docs/component/uniui/uni-section.md
docs/component/uniui/uni-section.md
+131
-0
未找到文件。
docs/component/uniui/uni-section.md
0 → 100644
浏览文件 @
2355a555
::: tip 组件名:uni-section
> 代码块: `uSection`
[
点击下载&安装
](
https://ext.dcloud.net.cn/plugin?name=uni-section
)
:::
标题栏组件,主要用于文章、列表详情等标题展示。
## 介绍
### 基本用法
在
``template``
中使用组件
```
html
<uni-section
class=
"mb-10"
title=
"基础用法"
sub-title=
"副标题"
></uni-section>
<uni-section
class=
"mb-10"
title=
"竖线装饰"
sub-title=
"副标题"
type=
"line"
></uni-section>
<uni-section
class=
"mb-10"
title=
"装饰器插槽"
sub-title=
"副标题"
>
<template
v-slot:decoration
>
<view
class=
"decoration"
></view>
</template>
</uni-section>
<uni-section
class=
"mb-10"
title=
"默认插槽"
sub-title=
"副标题"
>
默认插槽内容
</uni-section>
<uni-section
class=
"mb-10"
title=
"主标题"
>
<template
v-slot:right
>
right slot
</template>
</uni-section>
```
## 属性/方法
### Badge Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|type|String|-|装饰类型,可选值:line(竖线)、circle(圆形)、square(方形)|
|title|String|-|主标题|
|titleFontSize|String| 14px |主标题字体大小|
|titleColor|String| #333 |主标题字体颜色|
|subTitle|String|-|副标题|
|subTitleFontSize|String| 12px |副标题字体大小|
|subTitleColor|String| #999 |副标题字体颜色|
|padding|Boolean/String| false |默认插槽容器的 padding 值,传入类型为 Boolean 时,设置为 10px 或 0|
### Badge Events
|事件名|事件说明|返回参数|
|:-:|:-:|:-:|
|@click |点击 Section 触发事件| -|
## 示例
::: warning 注意
直接拷贝示例代码,无法运行 ,示例依赖了
`uni-scss`
组件。
请到
[
组件下载页面
](
https://ext.dcloud.net.cn/plugin?name=uni-section
)
,在页面右侧选择
`使用 HBuilderX导入示例项目`
,体验完整组件示例。
:::
:::preview https://hellouniapp.dcloud.net.cn/pages/extUI/section/section
```
html
<template>
<view
class=
"uni-wrap"
>
<view
class=
"example-info"
>
<text
class=
"example-info-text"
>
uni-section 组件主要用于文章、列表详情等标题展示
</text>
</view>
<uni-section
class=
"mb-10"
title=
"基础用法"
sub-title=
"副标题"
></uni-section>
<uni-section
class=
"mb-10"
title=
"竖线装饰"
sub-title=
"副标题"
type=
"line"
></uni-section>
<uni-section
class=
"mb-10"
title=
"装饰器插槽"
sub-title=
"副标题"
>
<template
v-slot:decoration
>
<view
class=
"decoration"
></view>
</template>
</uni-section>
<uni-section
class=
"mb-10"
title=
"默认插槽"
sub-title=
"副标题"
padding=
"0 0 5px 10px"
>
默认插槽内容
</uni-section>
<uni-section
class=
"mb-10"
title=
"主标题"
>
<template
v-slot:right
>
right slot
</template>
</uni-section>
</view>
</template>
<script>
export
default
{
data
()
{
return
{
}
},
onReady
()
{
},
methods
:
{
}
}
</script>
<style
lang=
"scss"
>
$
uni-success
:
#18
bc37
!
default
;
.uni-wrap
{
flex-direction
:
column
;
/* #ifdef H5 */
height
:
calc
(
100vh
-
44px
);
/* #endif */
/* #ifndef H5 */
height
:
100vh
;
/* #endif */
flex
:
1
;
}
.mb-10
{
margin-bottom
:
10px
;
}
.decoration
{
width
:
6px
;
height
:
6px
;
margin-right
:
4px
;
border-radius
:
50%
;
background-color
:
$
uni-success
;
}
</style>
:::
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录