扩展组件(uni-ui)之uni-group
目录
基本用法
引入组件
属性
示例
注意事项
uni-group
是 uni-app 的 uni-ui 组件库中的一个组件,用于创建一个分组容器,它常用于将相关的内容或控件分组显示,以增强界面的结构和可读性。
基本用法
在使用 uni-group
之前,你需要确保已经正确安装了 uni-ui 库,并在页面中引入了 uni-group
组件。
引入组件
<template><uni-group title="分组标题"><!-- 这里放置组内的内容 --></uni-group>
</template><script>import uniGroup from '@dcloudio/uni-ui/lib/uni-group/uni-group.vue'export default {components: { uniGroup }}
</script>
属性
title
:分组的标题,显示在分组的顶部。
示例
在下面的示例中,uni-group
创建了一个带有标题的分组容器:
<uni-group title="用户信息"><view>用户名:张三</view><view>年龄:28</view><!-- 更多用户信息 -->
</uni-group>
注意事项
uni-group
组件适用于将具有内在联系的内容进行逻辑分组,例如表单的不同部分、设置页面的相关选项等。- 你可以在
uni-group
中放置任何内容,包括文本、列表项、输入框等。 - 通过
title
属性为分组添加标题,使用户能够快速理解组内内容的主题。
更多关于 uni-group
组件的使用细节,可以查阅 uni-ui 官方文档 或 uni-ui 库的相关文档。
如果最后一个元素是下拉组件会被 hidden 请修改如下css
.uni-group--card {overflow: visible !important;}