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:

  1. Introduced Resources

    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
  2. 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>
  3. 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
  1. Introduced Resources

    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
  2. 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>
  3. 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