Layui 字段集区块、面板和Tab选项卡-白红宇的个人博客

发布日期：2025-04-04 08:16:15 浏览次数：11 分类：精选文章

本文共 1858 字，大约阅读时间需要 6 分钟。

一、字段集区块

字段集区块是LayUI中用于展示和管理多个输入字段的容器，支持两种风格：横线风格和默认风格。

横线风格字段集区块


       
    字段集区块 - 横线风格    
    
             内容区域

默认风格字段集区块


       
    字段集区块 - 默认风格    
    
             内容区域

折叠面板适用于需要频繁切换显示内容的场景，支持通过设置 layui-show 类初始显示某个面板，并通过手风琴模式实现单独展现效果。

手风琴模式

二、选项卡

LayUI提供多种风格的选项卡组件，支持 drag-and-drop 调整顺序、删除个别选项卡以及响应式设计。

1. 默认风格

2. 简洁风格

3. 卡片风格

三、ID焦点定位

通过为选项卡设置 lay-id="xxx" 属性，可以将选项卡与页面地址栏的哈希值绑定。这种方式适用于：

左侧导航栏的链接切换

地址栏中包含的关键字匹配

网页跳转时带来的 pleasant experience

示例

四、核心概念

依赖组件：选项卡组件依赖 element 模块功能，所以需要先在页面中调用这个模块。

切换方式：-，默认通过点击切换

通过 lay-filter 自定义切换事件

通过代码可程序性切换

高级功能：

选项卡之间的 drag-and-drop 调整

支持滚动至所需选项卡

可关闭单个选项卡

提供resiVerse 及及时响应式设计

上一篇：LayUI 数据表格学习和应用（IT枫斗者）

下一篇：layout_weight 的解释及使用

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！