LaUI Element--Lebyte Front End

Keywords: Javascript Attribute Big Data Mobile

Basic Elements

Button

usage

Set class="layui-btn" to any HTML element to create a base button.Define additional button styles by appending classes in the format layui-btn-{type}.

<!--Base button-->
<button type="button" class="layui-btn">a standard button</button>
<a href="Http://www.layui.com"Class=" layui-btn "> a jumpable button </a>
<div class="layui-btn">a button</div>

theme

Name	combination
Original	class="layui-btn layui-btn-primary"
default	class="layui-btn"
Baida	class="layui-btn layui-btn-normal"
Warm color	class="layui-btn layui-btn-warm"
warning	class="layui-btn layui-btn-danger"
Disable	class="layui-btn layui-btn-disabled"

Example:

<!--Buttons on different topics-->
<button class="layui-btn">default button</button>
<button class="layui-btn layui-btn-primary">original button</button> 
<button class="layui-btn layui-btn-normal">Laptop button</button>
<button class="layui-btn layui-btn-warm">warm button</button>
<button class="layui-btn layui-btn-danger">warning button</button>
<button class="layui-btn layui-btn-disabled">Disable button</button>

size

size	combination
large	class="layui-btn layui-btn-lg"
default	class="layui-btn"
small-scale	class="layui-btn layui-btn-sm"
Mini	class="layui-btn layui-btn-xs"

<!-- Buttons of different sizes -->
<button class="layui-btn layui-btn-primary layui-btn-lg">large</button> 
<button class="layui-btn">default</button>
<button class="layui-btn layui-btn-sm layui-btn-danger">small-scale</button>
<button class="layui-btn layui-btn-xs">Mini</button>

fillet

layui-btn-radius

<button class="layui-btn layui-btn-radius">Default button</button>
<button class="layui-btn layui-btn-primary layui-btn-radius">Original Button</button> 
<button class="layui-btn layui-btn-normal layui-btn-radius">Baitao button</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">Warm button</button>
<button class="layui-btn layui-btn-danger layui-btn-radius">Warning button</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">Disable button</button>

Icon

<button type="button" class="layui-btn">
    <i class="layui-icon">&#Xe608; </i>Add
</button>

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
    <i class="layui-icon">&#X1002; </i>Refresh
</button>

Navigation

Navigation generally refers to a collection of page-guided channels, which are presented as menus and can be applied to the head and side.Bread crumbs are simple and support custom separators.

<font color="red">Dependent load module: element</font>

Steps to achieve:

Introduced Resources

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

Dependent Loading Module

<script type="text/javascript">
   // Note: Navigation depends on the element module, otherwise functional operations cannot be performed
   layui.use('element', function(){
       var element = layui.element;

   });
</script>

Show navigation of specified type

lateral navigation

<ul class="layui-nav">
    <li class="layui-nav-item"><a href="">Latest Activities</a></li>
    <li class="layui-nav-item layui-this"><a href="">product</a></li>
    <li class="layui-nav-item"><a href="">Big data</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">Solution</a>
        <dl class="layui-nav-child"> <!-- Level 2 Menu -->
            <dd><a href="">Mobile module</a></dd>
            <dd><a href="">Background template</a></dd>
            <dd><a href="">E-commerce Platform</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">Community</a></li>
</ul>

Vertical/Side Navigation

<ul class="layui-nav layui-nav-tree" >
<!-- Side navigation: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">Default Expansion</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">Option 1</a></dd>
      <dd><a href="javascript:;">Option 2</a></dd>
      <dd><a href="">Jump</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">Solution</a>
    <dl class="layui-nav-child">
      <dd><a href="">Mobile module</a></dd>
      <dd><a href="">Background template</a></dd>
      <dd><a href="">E-commerce Platform</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">product</a></li>
  <li class="layui-nav-item"><a href="">Big data</a></li>
</ul>

The structure of the HTML for horizontal, vertical and side navigation is exactly the same, except that:

Horizontal navigation: layui-nav
 Vertical navigation requires appending class:layui-nav-tree
 Side navigation requires additional class:layui-nav-tree layui-nav-side

Navigation Theme

Append CSS background classes to the navigation to give it a different theme color

<!--such as defining a navigator with an inky green background color-->
<ul class="layui-nav layui-bg-move" >
  ...
</ul>

Other background themes supported by horizontal navigation are layui-bg-cyan, layui-bg-molv, layui-bg-blue.
Other background themes supported by vertical navigation are layui-bg-cyan (Tibetan)

Crumbs

<span class="layui-breadcrumb">
  <a href="">home page</a>
  <a href="">international news</a>
  <a href="">Asia Pacific</a>
  <a><cite>text</cite></a>
</span>

You can also customize the separator by setting the property lay-separator="".For example:

<span class="layui-breadcrumb" lay-separator="-">
  <a href="">home page</a>
  <a href="">international news</a>
  <a href="">Asia Pacific</a>
  <a><cite>text</cite></a>
</span>

tab

Navigation menus can be applied to the head and side, support responsiveness, delete tabs, and so on.

<font color="red">Dependent load module: element</font>

Implementation Steps

Introduced Resources

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

Dependent Loading Module

<script type="text/javascript">
   // Note: Tabs depend on the element ary module, otherwise functional operations cannot be performed
   layui.use('element', function(){
       var element = layui.element;

   });
</script>

Load HTML

<div class="layui-tab">
 <ul class="layui-tab-title">
   <li class="layui-this">Site Settings</li>
   <li>user management</li>
   <li>Permission Assignment</li>
   <li>Commodity Management</li>
   <li>Order management</li>
 </ul>
 <div class="layui-tab-content">
   <div class="layui-tab-item layui-show">Content 1</div>
   <div class="layui-tab-item">Content 2</div>
   <div class="layui-tab-item">Content 3</div>
   <div class="layui-tab-item">Content 4</div>
   <div class="layui-tab-item">Content 5</div>
 </div>
</div>

Tab Style

Default style: layui-tab
 Simple style requires appending class:layui-tab-brief
 Card style requires additional class:layui-tab-card

Tab with Delete

The property lay-allowClose="true" can be set on the parent container to allow the Tab tab to be deleted

<div class="layui-tab" lay-allowClose="true">
  <ul class="layui-tab-title">
    <li class="layui-this">Site Settings</li>
    <li>user management</li>
    <li>Permission Assignment</li>
    <li>Commodity Management</li>
    <li>Order management</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">Content 1</div>
    <div class="layui-tab-item">Content 2</div>
    <div class="layui-tab-item">Content 3</div>
    <div class="layui-tab-item">Content 4</div>
    <div class="layui-tab-item">Content 5</div>
  </div>
</div>

form

General usage

<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Nickname?</th>
      <th>Join time</th>
      <th>autograph</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>Virtue</td>
      <td>2016-11-29</td>
      <td>Life is like a practice</td>
    </tr>
    <tr>
      <td>Allow leisure</td>
      <td>2016-11-28</td>
      <td>Meet the people you meet in millions of people, in the endless wilderness of time, in millions of years...</td>
    </tr>
  </tbody>
</table>

Basic Properties

Property Name	Attribute Value	Remarks
lay-even	nothing	Used to turn on interlaced backgrounds and can be used with other attributes
lay-skin="attribute value"	line <br />row <br />nob (no border style)	If you do not set this property with the default style
lay-size="attribute value"	sm (small size) < br /> LG (large size)	Use default size without setting this property

The basic properties you need are written on the table tag, for example:

<!-- A large table with an interlaced background and row border style -->
<table class="layui-table" lay-even lay-size="lg" lay-skin="row">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Nickname?</th>
      <th>Join time</th>
      <th>autograph</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>Virtue</td>
      <td>2016-11-29</td>
      <td>Life is like a practice</td>
    </tr>
    <tr>
      <td>Allow leisure</td>
      <td>2016-11-28</td>
      <td>Meet the people you meet in millions of people, in the endless wilderness of time, in millions of years...</td>
    </tr>
  </tbody>
</table>

Posted by fighnight on Wed, 17 Jun 2020 13:42:37 -0700

Programmer Group