layUI基本元素--乐字节前端

基本元素

按钮

用法

​ 向任意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. 显示指定类型的导航

水平导航

    
最新活动
    
产品
    
大数据
    

        解决方案
        
 
            
移动模块
            
后台模版
            
电商平台
        
    
    
社区

垂直/侧边导航

  

    默认展开
    

      
选项1
      
选项2
      
跳转
    
  
  

    解决方案
    

      
移动模块
      
后台模版
      
电商平台
    
  
  
产品
  
大数据

水平、垂直、侧边三个导航的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
      
于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…