码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-18 10:47:36      阅读:53      评论:0      收藏:0      [点我收藏+]

标签:rip   ble   nav   htm   删除   ext   小型   移动   this   

基本元素

按钮

用法

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

<!-- 基础按钮 -->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
<div class="layui-btn">一个按钮</div>
主题
名称 组合
原始 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"

示例:

<!-- 不同主题的按钮 -->
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button> 
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>
尺寸
尺寸 组合
大型 class="layui-btn layui-btn-lg"
默认 class="layui-btn"
小型 class="layui-btn layui-btn-sm"
迷你 class="layui-btn layui-btn-xs"
<!-- 不同尺寸的按钮 -->
<button class="layui-btn layui-btn-primary layui-btn-lg">大型</button> 
<button class="layui-btn">默认</button>
<button class="layui-btn layui-btn-sm layui-btn-danger">小型</button>
<button class="layui-btn layui-btn-xs">迷你</button>
圆角

layui-btn-radius

<button class="layui-btn layui-btn-radius">默认按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button> 
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
图标
<button type="button" class="layui-btn">
    <i class="layui-icon">&#xe608;</i> 添加
</button>

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
    <i class="layui-icon">&#x1002;</i> 刷新
</button>

导航

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

? <font color="red">依赖加载模块:element</font>

实现步骤:

  1. 引入的资源

    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
  2. 依赖加载模块

    <script type="text/javascript">
       // 注意:导航 依赖 element 模块,否则无法进行功能性操作
       layui.use(‘element‘, function(){
           var element = layui.element;
    
       });
    </script>
  3. 显示指定类型的导航
水平导航
<ul class="layui-nav">
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
</ul>
垂直/侧边导航
<ul class="layui-nav layui-nav-tree" >
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默认展开</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项1</a></dd>
      <dd><a href="javascript:;">选项2</a></dd>
      <dd><a href="">跳转</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child">
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">大数据</a></li>
</ul>

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

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

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

<!-- 如定义一个墨绿背景色的导航 -->
<ul class="layui-nav layui-bg-move" >
  …
</ul> 

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

面包屑
<span class="layui-breadcrumb">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>

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

<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>

选项卡

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

? <font color="red">依赖加载模块:element</font>

实现步骤
  1. 引入的资源

    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
  2. 依赖加载模块

    <script type="text/javascript">
       // 注意:选项卡 依赖 element 模块,否则无法进行功能性操作
       layui.use(‘element‘, function(){
           var element = layui.element;
    
       });
    </script>
  3. 加载HTML

    <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>
选项卡风格
默认风格:layui-tab
简洁风格需要追加class:layui-tab-brief
卡片风格需要追加class:layui-tab-card
带删除的选项卡

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

<div class="layui-tab" lay-allowClose="true">
  <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>

表格

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

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

<!-- 一个带有隔行背景,且行边框风格的大尺寸表格 -->
<table class="layui-table" lay-even lay-size="lg" lay-skin="row">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>昵称</th>
      <th>加入时间</th>
      <th>签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
    </tr>
    <tr>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
    </tr>
  </tbody>
</table>

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

标签:rip   ble   nav   htm   删除   ext   小型   移动   this   

原文地址:https://blog.51cto.com/14819669/2505380

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!