LayUI中的基本元素之Tab选项卡

最新推荐文章于 2023-07-13 12:57:10 发布

daimeijin

最新推荐文章于 2023-07-13 12:57:10 发布

阅读量9.8k

点赞数 2

分类专栏： LayUI 前端技术

本文链接：https://blog.csdn.net/daimeijin/article/details/119656610

版权

本文介绍了LayUI中的Tab选项卡，包括默认风格、简洁风格、卡片风格、响应式布局、带删除功能的Tab及ID焦点定位。通过设置不同的类名和属性，可以实现各种定制化的Tab效果，适用于后台管理系统。文章强调了`layui-tab-brief`、`layui-tab-card`和`lay-allowClose`属性的作用，并提到了`lay-id`在外部定位切换中的重要性。

摘要由CSDN通过智能技术生成

前言

最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。

选项卡

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。
依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作）

默认Tab选项卡

在这里插入图片描述

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div