基本元素

按钮

用法

​ 向任意HTML元素设定class="layui-btn",建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。



一个可跳转的按钮
一个按钮
主题
名称 组合
原始 class="layui-btn layui-btn-primary"
默认 class="layui-btn"
百搭 class="layui-btn layui-btn-normal"
暖色 class="layui-btn layui-btn-warm"
警告 class="layui-btn layui-btn-danger"
禁用 class="layui-btn layui-btn-disabled"

示例:



 



尺寸
尺寸 组合
大型 class="layui-btn layui-btn-lg"
默认 class="layui-btn"
小型 class="layui-btn layui-btn-sm"
迷你 class="layui-btn layui-btn-xs"

 


圆角

layui-btn-radius


 



图标


导航

​ 导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边。面包屑结构简单,支持自定义分隔符。

依赖加载模块:element

实现步骤:

  1. 引入的资源

    
    
  2. 依赖加载模块

  3. 显示指定类型的导航
水平导航
垂直/侧边导航

水平、垂直、侧边三个导航的HTML结构是完全一样的,不同的是:

水平导航:layui-nav
垂直导航需要追加class:layui-nav-tree
侧边导航需要追加class:layui-nav-tree layui-nav-side
导航主题

​ 通过对导航追加CSS背景类,让导航呈现不同的主题色


水平导航支持的其它背景主题有:layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)
垂直导航支持的其它背景主题有:layui-bg-cyan(藏青)

面包屑

  首页
  国际新闻
  亚太地区
  正文

你还可以通过设置属性 lay-separator="" 来自定义分隔符。例如:


  首页
  国际新闻
  亚太地区
  正文

选项卡

​ 导航菜单可应用于头部和侧边,支持响应式,支持删除选项卡等功能。

依赖加载模块:element

实现步骤
  1. 引入的资源

    
    
  2. 依赖加载模块

  3. 加载HTML

    • 网站设置
    • 用户管理
    • 权限分配
    • 商品管理
    • 订单管理
    内容1
    内容2
    内容3
    内容4
    内容5
选项卡风格
默认风格:layui-tab
简洁风格需要追加class:layui-tab-brief
卡片风格需要追加class:layui-tab-card
带删除的选项卡

可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除

  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
内容1
内容2
内容3
内容4
内容5

表格

常规用法
昵称 加入时间 签名
贤心 2016-11-29 人生就像是一场修行
许闲心 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…
基础属性
属性名 属性值 备注
lay-even 用于开启 隔行 背景,可与其它属性一起使用
lay-skin="属性值" line (行边框风格)
row (列边框风格)
nob (无边框风格)
若使用默认风格不设置该属性即可
lay-size="属性值" sm (小尺寸)
lg (大尺寸)
若使用默认尺寸不设置该属性即可

你所需要的基础属性写在table标签上,例如:


昵称 加入时间 签名
贤心 2016-11-29 人生就像是一场修行
许闲心 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…