精华内容
下载资源
问答
  • layui 页面元素 一. 导航 先引入layui.css和layui.js <link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" /> <script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ><...

    layui

    页面元素

    一. 导航

    • 先引入layui.css和layui.js
    <link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
    <script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>
    
    • 加载 element模块
    <script type="text/javascript">
    	//导航,依赖element模块
    	layui.use('element',function(){
    		var element = layui.element;
    	});
    </script>
    
    <!--
    	导航
    		水平导航:layui-nav
    			layui-nav-item 表示的是导航的子项
    			layui-this 表示当前被选中的项
    			layui-nav-child 表示的是二级菜单
    		垂直导航:layui-nav layui-nav-tree
    		侧边导航:layui-nav layui-nav-tree layui-nav-side
    		导航的主题颜色
    			layui-bg-颜色
    				墨绿 molv
    				藏青cyan
    				艳蓝blue
    		面包屑导航
    			<span class="layui-breadcrumb"  lay-separator="|">
    		通过lay-separator="分隔符"设置面包屑导航的分隔符
    		-->
    

    1.水平导航

    • layui-this指向当前页面分类
    <!--水平导航  layui-nav-->
    <ul class="layui-nav">
    	<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="">大数据</a></li>
    	<li class="layui-nav-item">
    		<a href="">解决方案</a>
    		<dl class="layui-nav-child">
    			<dd><a href="">移动模块</a></dd>
    			<dd><a href="">后台模块</a></dd>
    			<dd><a href="">电商模块</a></dd>
    		</dl>
    	</li>
    </ul>
    

    结果展示:
    在这里插入图片描述

    2.垂直导航

    <!--垂直导航 layui-nav layui-nav-tree-->
    <ul class="layui-nav layui-nav-tree">
    	<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="">大数据</a></li>
    	<li class="layui-nav-item">
    		<a href="">解决方案</a>
    		<dl class="layui-nav-child">
    			<dd><a href="">移动模块</a></dd>
    			<dd><a href="">后台模块</a></dd>
    			<dd><a href="">电商模块</a></dd>
    		</dl>
    	</li>
    </ul>
    

    在这里插入图片描述

    3.侧面导航

    <!--侧边导航  layui-nav layui-nav-tree layui-nav-side -->
    <ul class="layui-nav layui-nav-tree layui-nav-side">
    	<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="">大数据</a></li>
    	<li class="layui-nav-item">
    		<a href="">解决方案</a>
    		<dl class="layui-nav-child">
    			<dd><a href="">移动模块</a></dd>
    			<dd><a href="">后台模块</a></dd>
    			<dd><a href="">电商模块</a></dd>
    			
    		</dl>
    	</li>
    </ul>
    

    在这里插入图片描述

    4.设置导航的主题颜色

    <!--设置导航的主题颜色 <ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-cyan">-->
    <ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-cyan">
    	<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="">大数据</a></li>
    	<li class="layui-nav-item">
    		<a href="">解决方案</a>
    		<dl class="layui-nav-child">
    			<dd><a href="">移动模块</a></dd>
    			<dd><a href="">后台模块</a></dd>
    			<dd><a href="">电商模块</a></dd>
    		</dl>
    	</li>
    </ul>
    

    结果展示:
    在这里插入图片描述

    5.面包屑导航

    • <cite></cite>选中状态
    <!--面包屑导航-->
    <span class="layui-breadcrumb">
    	<a href="">首页 </a>
    	<a href="">国际新闻 <span class="layui-badge">99</span></a>
    	<a href="">亚太地区</a>
    	<a><cite>正文<span class="layui-badge-dot"></span></cite></a>
    </span>		
    

    结果展示:
    在这里插入图片描述

    • 用指定分隔符来分隔
    <!--设置属性 lay-separator="-"/lay-separator="|" 来自定义分隔符-->
    <spanclass="layui-breadcrumb"  lay-separator="|">
    	<a href="">首页 </a>
    	<a href="">国际新闻</a>
    	<a href="">亚太地区</a>
    	<a><cite>正文</cite></a>
    </span>
    

    结果展示:
    在这里插入图片描述

    徽章详细请查看官方文档:https://www.layui.com/doc/element/badge.html
    导航详细请查看官方文档:https://www.layui.com/doc/element/nav.html

    二.选项卡

    1.实现步骤

    1.1引入资源(layui.css和layui.js)

    <link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
    <script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>
    

    1.2依赖加载模块

    <script type="text/javascript">
    //选项卡也是依赖element模块
    	layui.use('element',function(){
    		var element = layui.element;
    	});
    </script>
    

    1.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>
    

    结果展示:
    在这里插入图片描述

    2.选项卡风格

    • 默认风格:layui-tab
    • 简约风格需要追加class:layui-tab-brief
    • 卡片风格需要追加class:layui-tab-card

    2.1简约风格

    <div class="layui-tab layui-tab-brief">
    	<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>
    

    结果展示:
    在这里插入图片描述

    2.2卡片风格

    <div class="layui-tab layui-tab-card">
    			<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>
    

    结果展示:
    在这里插入图片描述

    2.3带删除的选项卡

    <!--带删除的选项卡-->
    		<!--对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除-->
    		<div class="layui-tab layui-tab-card" 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>
    

    结果展示:
    在这里插入图片描述
    选项卡详细请查看官方文档:https://www.layui.com/doc/element/tab.html

    三.表格

    • 引入layui.css
    <link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
    
    <!--
    	表格
    		class="layui-table"
    	常用属性
    		lay-even 如果设置了该属性,则可以显示隔行换色的效果
    		lay-skin="属性值"  设置表格边框风格	
    			line (行边框风格)
    			row (列边框风格)
    			nob (无边框风格)
    		lay-size="属性值"	 设置表格的尺寸
    			sm (小尺寸)
    			lg (大尺寸)
    		-->
    
    • eg1:
    <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>lucky</td>
    		      <td>2021-8-15</td>
    		      <td>人生就像是一场修行</td>
    		    </tr>
    		    <tr>
    		      <td>lover</td>
    		      <td>2020-1-28</td>
    		      <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
    		    </tr>
    		  </tbody>
    		</table>
    

    结果展示:
    在这里插入图片描述

    • eg2:
    <table class="layui-table" lay-even lay-skin="line" lay-size="lg">
    		  <colgroup>
    		    <col width="150">
    		    <col width="200">
    		    <col>
    		  </colgroup>
    		  <thead>
    		    <tr>
    		      <th>昵称</th>
    		      <th>加入时间</th>
    		      <th>签名</th>
    		    </tr> 
    		  </thead>
    		  <tbody>
    		    <tr>
    		      <td>白娘子</td>
    		      <td>2021-11-29</td>
    		      <td>人生就像是一场修行</td>
    		    </tr>
    		    <tr>
    		      <td>许仙</td>
    		      <td>2021-11-28</td>
    		      <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
    		    </tr>
    		    <tr>
    		      <td>小青</td>
    		      <td>2021-5-7</td>
    		      <td>人生就像是一场修行</td>
    		    </tr>
    		    <tr>
    		      <td>许闲心</td>
    		      <td>2021-1-28</td>
    		      <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
    		    </tr>
    		  </tbody>
    </table>
    

    结果展示:
    在这里插入图片描述
    表格详细请查看官方文档:https://www.layui.com/doc/element/table.html

    四.表单

    1.实现步骤

    1.1引入资源(layui.css和layui.js)

    <link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
    <script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>
    

    1.2依赖加载模块

    <!--加载模块-->
    <script type="text/javascript">
    		//加载form表单
    		layui.use('form',function(){
    			var from = layui.form;
    		});
    </script>
    

    1.3加载HTML

    • 在一个容器中设定 class=“layui-form” 来标识一个表单元素块
    • 基本的行区块结构,它提供了响应式的支持。但必须要在外层容器中定义class=“layui-form”,form模块才能正常工作。

    2.输入框

    • required:注册浏览器所规定的必填字段
    • lay-verify:注册form模块需要验证的类型
    • class=“layui-input”:layui.css提供的通用CSS类
    <!--
    	表单
    		常用属性:
    			required   浏览器固定的必填字段
    			lay-verify    需要验证的类型(required表示必填项)
    			class="layui-input"  提供通用的样式
    			class="layui-input-block"  占据全部宽度
    			class="layui-input-inline"  占据部分宽度
    		文本框
    			placeholder  当文本框为空时,默认显示的文本信息
    			autocomplete  表单元素是否自动填充(当浏览器中缓存中存在相同的name属性的值时,会填充)
    -->
    <!--在一个容器中设定 class="layui-form" 来标识一个表单元素块-->
    <form action="" class="layui-form">
    	<!--基本的行区块结构,它提供了响应式的支持。但必须要在外层容器中定义class="layui-form",form模块才能正常工作。-->
    	<div class="layui-form-item">
    		<label class="layui-form-label">标题</label>
    		<div class="layui-input-inline">
    			<!--文本框-->
    			<input type="text" name="title" required lay-verify="required"
    				 placeholder="请输入标题" autocomplete="off" class="layui-input">    
    		</div>
    		<!--按钮-->
    		<div class="layui-form-item">
     				<div class="layui-input-block">
       			 <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
       			 <button type="reset" class="layui-btn layui-btn-primary">重置</button>
     				</div>
    			</div>
    	</div>
    </form>
    

    结果展示:
    在这里插入图片描述

    3.下拉选择框

    • 通过selected属性设置默认选中项selected="selected"相当于selected
    • 通过disabled属性开启禁用,可以设置select和option标签(禁用下拉框和禁用下拉选项)
    • 可以通过optgroup标签给select分组
    • 通过设置lay-search属性开启搜索匹配功能
    <select name="city" lay-verify="required" disabled="disabled">
    	<option value="">请选择一个城市</option>
    	<option value="010">北京</option>
    	<option value="020">上海</option>
    	<option value="030" selected="selected">广州</option>	
    	<option value="040" disabled="disabled">陕西</option>
    </select>
    <!--分组-->
    <select name="quiz">
    	<option value="">请选择</option>
    	<optgroup label="城市记忆">
    	 	<option value="你工作的第一个城市">你工作的第一个城市?</option>
    	</optgroup>
    	<optgroup label="学生时代">
    		<option value="你的工号">你的工号?</option>
    		<option value="你最喜欢的老师">你最喜欢的老师?</option>
    	</optgroup>
    </select>
    <!--开启搜索匹配-->
    <select name="city" lay-verify="" lay-search>
    	<option value="">请选择</option>						
    	<option value="010">layer</option>
    	<option value="020">form</option>
    	<option value="030">layim</option>						
    </select>     
    
    

    在这里插入图片描述

    4.复选框

    • 通过title属性设置自定义文本(如果不需要显示文本,则不设置title属性)
    • 通过checked属性设置被选中的项
    • 通过lay-skin属性设置复选框的样式效果(lay-skin="primary"表示原始效果)
    • 通过disabled属性禁用属性
    <!--复选框-->
    <div class="layui-form-item">
    	<label class="layui-form-label">爱好</label>
    	<div class="layui-input-block">
    	<!--复选框-->
    	<!--默认效果-->
    		<input type="checkbox" name="hobby" title="唱歌" checked="checked" value="sing" />
    		<input type="checkbox" name="hobby" title="跳舞" value="dance" />
    		<input type="checkbox" name="hobby" title="画画" disabled="disabled" />
    		<!--原始效果-->
    		<input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" value="sing" />
    		<input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="dance" />
    		<input type="checkbox" name="hobby" title="画画" lay-skin="primary" disabled="disabled" />					
    	</div>
    </div>
    

    结果展示:
    在这里插入图片描述

    5.开关

    • 将复选框,设置lay-skin="switch"形成开关风格
    • 通过lay-text=“打开的值|关闭的值"来设定开关的两种状态的文本,通过”|"分隔
    • 通过checked设置默认打开状态
    • 通过disabled属性禁用开关
    • 通过value属性设置选中的值
    <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    	<div class="layui-input-block">
    		<input type="checkbox" name="aa" lay-skin="switch" />
    		<input type="checkbox" name="bb" lay-skin="switch" checked="checked"/>					
    		<input type="checkbox" name="cc" lay-skin="switch" checked="checked" lay-text="on|off"/>
    		<input type="checkbox" name="dd" lay-skin="switch" checked="checked" lay-text="打开|关闭" value="打开"/>
    		<input type="checkbox" name="ee" lay-skin="switch" checked="checked" lay-text="打开|关闭" disabled="disabled"/>				
    	</div>
    </div>
    

    结果展示:
    在这里插入图片描述

    6.单选框

    • 属性title可自定义文本
    • 通过checked设置默认打开状态
    • 通过disabled属性禁用开关
    • 通过value属性设置选中的值,否则选中时返回的就是默认的on
    <div class="layui-form-item">
    	<label class="layui-form-label">性别</label>
    	<div class="layui-input-block">	
    	<input type="radio" name="sex" value="nan" title=""/>
    	<input type="radio" name="sex" value="nv" title="" checked="checked"/>
    	<input type="radio" name="sex" value="" title="中性" disabled="disabled"/>
    	</div>
    </div>	
    

    结果展示:
    在这里插入图片描述

    7.文本域

    • class=“layui-textarea”:layui.css提供的通用CSS类
    <div class="layui-form-item">
    				<label class="layui-form-label">简介</label>
    				<div class="layui-input-inline">
    					<!--文本域-->
    					<textarea name="remark" required="required" lay-verify="required" placeholder="请输入个人简介"
    						class="layui-textarea"></textarea>
    				</div>
    			</div>	
    

    结果展示:

    在这里插入图片描述

    8.组装行内表单

    • class="layui-inline"定义外层行内
    • class=“layui-input-inline” 定义内层行内
    <div class="layui-form-item">
    	<!--定义外层行内-->
    	<div class="layui-inline">
    		<label class="layui-form-label">范围</label>
    		<div class="layui-input-inline">
    			<input type="text" name="price_min" placeholder="" autocomplete="off" class="layui-input"/>
    		</div>
    		<div class="layui-form-mid">-</div>
    		<div class="layui-input-inline">
    			<input type="text" name="price_max" placeholder="" autocomplete="off" class="layui-input"/>
    		</div>
    	</div>	
    	<div class="layui-inline">
    		<label class="layui-form-label">密码</label>
    		<div class="layui-input-inline">
    			<input type="password" name="upwd" placeholder="请输入密码" autocomplete="off" class="layui-input"/>
    		</div>
    	</div>
    </div>
    

    结果展示:
    在这里插入图片描述

    9.忽略美化渲染

    <div class="layui-form-item">
    	<label class="layui-form-label">原始效果</label>
    	<div class="layui-input-inline">
    		<!--可以对表单元素增加属性 lay-ignore 设置后,将不会对该标签进行美化渲染,即保留系统风格-->
    		<input type="radio" name="sex" value="nan" title="" lay-ignore> 
    	</div>
    </div>		
    

    结果展示:
    在这里插入图片描述

    10.表格方框风格

    • 通过追加 layui-form-pane 的class,来设定表单的方框风格
    <form class="layui-form layui-form-pane" action="">
    <!--内部结构都一样,值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性(否则会看起来比较别扭),如:-->
    <div class="layui-form-item" pane>
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
          <input type="radio" name="sex" value="" title="">
          <input type="radio" name="sex" value="" title="" checked>
        </div>
    </div>
    </form>	
    

    结果展示:
    在这里插入图片描述

    表单详细请查看官方文档:https://www.layui.com/doc/element/form.html

    展开全文
  • layui选项卡切换表格翻页消失 选项卡页面如图所示: 解决方法:监听选项卡,选项卡切换的时候设置高度样式 //监听选项卡,更改选项后设置一下高度,否则翻页显示有问题 $('.layui-tab-title').on('click', function...

    layui选项卡切换表格翻页消失


    选项卡页面如图所示: 默认载入的时候是有翻页的
    选项卡变换的时候翻页跟着下行无法自适应
    解决方法:监听选项卡,选项卡切换的时候设置高度样式

    //监听选项卡,更改选项后设置一下高度,否则翻页显示有问题
    $('.layui-tab-title').on('click', function(title) {
        if(title.toElement.id == 'title1'){
            $(".layui-table-box").css({"height":"360", "page":"true"});
        }else if(title.toElement.id=="title2"){
            $(".layui-table-box").css({"height":"360", "page":"true"});
        }else if(title.toElement.id=="title3"){
            $(".layui-table-box").css({"height":"360", "page":"true"});
        }else if(title.toElement.id=="title4"){
            $(".layui-table-box").css({"height":"360", "page":"true"});
        }
    });
    
    展开全文
  • 1、出现问题: 当选项卡中嵌套表格时,切换第二张表格会不适配 2、解决问题 <div class="layui-fluid"> <div class="layui-card layui-tab layui-tab-brief" lay-filter="table-change"> <ul ...

    1、出现问题: 当选项卡中嵌套表格时,切换第二张表格会不适配
    在这里插入图片描述
    在这里插入图片描述
    2、解决问题

    <div class="layui-fluid">
        <div class="layui-card layui-tab layui-tab-brief" lay-filter="table-change">
            <ul class="layui-tab-title">
                <li class="layui-this">巡检报告</li>
                <li>运营报告</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-card-body">
                        <table id="list-table" lay-filter="list-table"></table>
                    </div>
                </div>
                <div class="layui-tab-item ">
                    <div class="layui-card-body">
                        <table id="list-table2" ></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    	//script代码
    	//解决layUi大小不匹配问题
    	element.on('tab(table-change)', function(data){
    		table.resize('list-table2');
    	})
    

    3、效果如下
    在这里插入图片描述

    展开全文
  • 今天小编就为大家分享一篇layui 表格操作列按钮动态显示的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui选项卡嵌套选项卡One of the powerful features of ProtoPie is the ability to build fully portable and interactive UI components. We are going to make use of nested components, SVG icons, and layout...

    layui选项卡嵌套选项卡

    One of the powerful features of ProtoPie is the ability to build fully portable and interactive UI components. We are going to make use of nested components, SVG icons, and layout constraints to build a tab bar UI component that is self-contained and flexible enough to reuse in any future project.

    ProtoPie的强大功能之一是能够构建完全可移植的交互式UI组件。 我们将利用嵌套的组件,SVG图标和布局约束来构建选项卡式UI组件,该组件是独立的并且足够灵活,可以在以后的任何项目中重复使用。

    01.导入SVG图标 (01. Importing the SVG icons)

    I’m using the following icons downloaded from Feather icons. To follow along download Home, Activity, Bell, and Settings.

    我正在使用从Feather图标下载的以下图标 。 要继续下载家庭,活动,铃声和设置。

    The imported icons from Feather Icons
    The 4 SVG’s imported
    4款SVG的进口
    1. Import your icons via Image import. You can shift-select and import them all in one go if you like

      通过Image import导入图标。 如果愿意,您可以一次选择并导入所有内容

    2. Currently, There’s a bug in ProtoPie which causes the icons to import at a smaller size so let’s fix that (not the bug obviously!). Taking each icon, in turn, make them 24 px (check that the padlock icon is locked to preserve the aspect ratio)

      当前,ProtoPie中存在一个错误,该错误会导致图标以较小的尺寸导入,因此让我们对其进行修复(显然不是该错误!)。 依次将每个图标设为24像素 (检查挂锁图标是否已锁定以保持宽高比)

    3. Select the first icon and tap Convert to Shape (you’ll find this under the image preview in the top right)

      选择第一个图标,然后点击“ 转换为形状” (您会在右上角的图像预览下找到它)

    4. Choose a border color for your icon (I chose #228BE6)

      为图标选择边框颜色(我选择了#228BE6 )

    5. Repeat for 3 more icons

      重复3个以上的图标
    6. Organize the icons in the layer panel with your left most icon being at the top and the right-most icon at the bottom. The order I’m using is Home, Activity, Bell, Settings

      在图层面板中组织图标,最左边的图标在顶部,最右边的图标在底部。 我使用的顺序是家庭,活动,响铃,设置
    7. Position the icons roughly in the tab bar location across the bottom of the screen

      将图标大致放置在屏幕底部的标签栏位置
    Image for post
    Tap convert to shape for each SVG icon
    点击转换为每个SVG图标的形状

    02.创建选项卡 (02. Creating the tabs)

    We are going to have 4 tab items that will link to 4 separate scenes. Let’s create the Home tab first.

    我们将有4个选项卡项目,它们将链接到4个单独的场景。 首先创建“ 主页”选项卡。

    1. Use the Shape menu to create a rectangle (or press R on your keyboard) and make it 56 px high. Type 25% in the width field to get a width exactly one-quarter of the width of your prototype; The value will be converted to pixels for you.

      使用“形状”菜单创建一个矩形(或按键盘上的R)并将其设为56 px高。 在width字段中输入25% ,以获得正好等于原型宽度四分之一的宽度; 该值将为您转换为像素。

    2. Move the rectangle into the bottom left of your screen until it snaps into place and positions it under the home icon layer.

      将矩形移到屏幕的左下方,直到其固定到位并将其放置在主图标层下。
    3. Move the Home icon into the center of the rectangle so it is both vertically and horizontally centered. You will know when it’s in the center when you see the red alignment lines or you could use the alignment tools located in the top right of the screen above the image preview window; to do this select both the rectangle and the Home icon and select the center horizontal and vertical

      将主屏幕图标移到矩形的中心,使其在垂直和水平方向上居中。 当您看到红色的对齐线时,您将知道它何时位于中心,或者您可以使用图像预览窗口上方屏幕右上方的对齐工具; 为此,选择矩形和“主页”图标,然后选择水平和垂直居中
    4. With both layers selected tap the component tool or right-click Convert to Component

      选中两个图层后,点击组件工具或右键单击“ 转换为组件”

    5. Open the components panel and double-click on the ‘component 1’

      打开组件面板,然后双击“组件1”
    6. You’ll see a special group icon with the lightning bolt icon on it. Double-click the name and rename it to tabHome

      您会看到一个特殊的组图标,上面带有闪电图标。 双击名称并将其重命名为tabHome

    7. We can now remove the rectangle and instead apply the fill color to the group container instead. Select the component in the layers panel and change the fill color to #F1F1F1 and the fill opacity to 100.

      现在,我们可以删除矩形,而是将填充颜色应用于组容器。 在“图层”面板中选择组件,然后将填充颜色更改为#F1F1F1 ,并将填充不透明度更改为100

    4. Converting to component
    4. Converting to component
    4.转换为组件

    设定约束 (Set constraints)

    1. Next, we want to set some constraints so the tab can expand to any size. Select the tabHome component in the layers panel and find the constraints in the properties panel on the right of the interface. Constraints break down into 3 boxes here. The left box is the pin constraints, the top right, and bottom right boxes are the size constraints. Any applied constraints will show as blue so tap them to toggle them off, we don’t want any constraints applied here

      接下来,我们要设置一些约束,以便选项卡可以扩展到任何大小。 在“图层”面板中选择tabHome组件,然后在界面右侧的属性面板中找到约束。 约束在这里分为3个框。 左边的框是管脚约束,右上方的框和右下方的框是尺寸约束。 任何应用的约束都将显示为蓝色,因此请点按以将其关闭,我们不想在此处应用任何约束

    2. Next, select the icon, we want to still constrain its aspect ratio so keep the size constraints set to on but remove all of the pin constraints. If you drag the middle -right container handle out now you should see that you have a flexible tab

      接下来,选择图标,我们仍要限制其宽高比,因此将尺寸限制设置为开,但删除所有的引脚限制。 如果现在将中间右容器的手柄拖出,则应该看到有一个灵活的选项卡
    3. Tap the back button (top left) or double-click Scene 1 to navigate back to the scene

      点击后退按钮(左上方)或双击场景1导航回到场景

    4. We now need to create the other 3 tabs

      现在,我们需要创建其他3个标签
    5. Go to the Components panel and duplicate tabHome by selecting it and typing Cmd+D (Ctrl+D Windows)

      转到“ 组件”面板并复制“ 选项卡”主页,方法是选择它并键入Cmd + D (Ctrl + D Windows)

    6. Double-click the name and rename it tabActivity

      双击名称并将其重命名为tabActivity

    7. repeat steps for the other 2 tabs calling them tabNotifications and tabSettings respectively

      对其他两个选项卡分别重复步骤,分别称为tabNotificationstabSettings

    8. Copy the activity icon and open tabActivity by double-clicking it in the component panel

      复制活动图标并在组件面板中双击以打开tabActivity

    9. Paste the icon and position its correctly then delete the old icon making sure you remove the pin constraints from the newly pasted icon

      粘贴图标并正确放置其位置,然后删除旧图标,确保从新粘贴的图标中删除了引脚约束

    10. repeat 8–9 for the other two tabs

      对其他两个选项卡重复8–9
    11. Delete any loose icons from the main scene leaving only the home tab component

      从主场景中删除任何宽松的图标,仅保留主选项卡组件
    Setting constraints
    Setting constraints
    设定约束
    The components panel with the 4 flexible tabs created
    The components panel with the 4 flexible tabs created
    创建了具有4个灵活选项卡的组件面板

    Congratulations you should now have four flexible tabs in your components panel for your 4 app sections.

    恭喜,您现在应该在组件面板中为4个应用程序部分提供了四个灵活的标签。

    Next up we are going to create the TabBar

    接下来,我们将创建TabBar

    03.创建选项卡栏 (03. Creating the Tab Bar)

    Next, we want to create the tab bar that the tabs will nest inside. This will give us a single tab bar component that we can reuse.

    接下来,我们要创建标签栏,标签将嵌套在其中。 这将为我们提供一个可重复使用的选项卡栏组件。

    1. Drag out an instance of each tab so that you have 4 tabs in the scene and position them at the bottom ordering them from left to right Home, Activity, Notifications, and Settings. You may notice some slight gaps between the tabs but don’t worry about that, we’ll fix it later

      拖出每个选项卡的一个实例,以使您在场景中拥有4个选项卡,并将它们放置在底部,以从左到右的顺序依次按“首页”,“活动”,“通知”和“设置”。 您可能会注意到各个标签之间存在一些细微的间隔,但不必担心,我们稍后会修复
    2. You now have four tab copies which we call ‘instances’ in your scene. Rename the layers to read TabHome, TabActivity, TabNotifications, and TabSettings. I like to order the layers top to bottom to match the order of left to right as well

      现在,您有四个选项卡副本,我们在您的场景中称其为“实例”。 重命名图层以读取TabHome,TabActivity,TabNotifications和TabSettings。 我喜欢按从上到下的顺序排列图层,以匹配从左到右的顺序
    3. Select all of the layers and right-click (Ctrl-click) and select Convert to component. You will now have a new in the layers panel

      选择所有图层,然后单击鼠标右键(Ctrl单击),然后选择“转换为零部件”。 现在,“图层”面板中将有一个新的
    4. Rename the component instance TabBar. You will have to do this as well to the component in the Components panel

      重命名组件实例TabBar。 您还必须对“组件”面板中的组件执行此操作
    5. Open the TabBar component and select the component group. We need to fix and gaps we might have between the tab items.

      打开TabBar组件,然后选择组件组。 我们需要修复选项卡项目之间可能存在的差距。
    6. Change the fill to #F1F1F1 and set the fill to 100

      将填充更改为#F1F1F1并将填充设置为100

    We now have a fully constructed flexible Tabbar. Try dragging the width out and all of the tabs should expand as a flexible liquid component.

    现在,我们有了一个完全构建的灵活的Tabbar。 尝试将宽度拉出,所有选项卡应作为一种灵活的液体成分展开。

    The fully constructed tab bar
    The fully constructed tab bar
    完全构造的标签栏

    04.设置选项卡项目状态 (04. Setting up the Tab Item states)

    So at the moment, our Tabbar doesn’t do anything. The way we are going to set up our app to make use of this tab bar is to create a scene for each tab section. When each tab is tapped the prototype will change to the selected scene and the visual appearance of the selected item is going to change so that it looks active.

    因此,目前,我们的Tabbar无效。 我们设置应用程序以使用此标签栏的方法是为每个标签部分创建一个场景。 轻触每个选项卡后,原型将更改为所选场景,并且所选项目的视觉外观也将更改,以使其看起来很活跃。

    To trigger responses inside of our components we are going to use a special trigger and response that work together. These are called Send and Receive.

    为了在组件内部触发响应,我们将使用特殊的触发和响应一起工作。 这些称为发送接收

    We are going to use the Send response to send a message to the nested tabs so that when each tab is tapped the app will move to the selected scene and make that tab active.

    我们将使用“发送”响应将消息发送到嵌套的选项卡,以便在点击每个选项卡时,应用程序将移动到所选场景并使该选项卡处于活动状态。

    设置场景 (Setting up the scenes)

    1. Lets first create the 4 sections of our app by duplicating the current scene three times (Cmd+D Mac / Ctrl+D Windows

      首先,通过将当前场景复制三遍来创建应用程序的4个部分(Cmd + D Mac / Ctrl + D Windows
    2. Rename the scenes by double-clicking their names in the scenes panel Home, Activity, Notifications, Settings

      通过在场景面板“主页”,“活动”,“通知”,“设置”中双击它们的名称来重命名场景
    Setting up the scenes in the scenes flyout panel
    Setting up the scenes in the scenes flyout panel
    在“场景”弹出面板中设置场景

    Next, we want to set the triggers inside of the tabBar so that when each tab is tapped the prototype navigates to the correct scene.

    接下来,我们要在tabBar内设置触发器,以便在点击每个选项卡时,原型导航到正确的场景。

    1. First, let’s add a title on each scene so that we know the navigation is working properly. On each scene add a text label by going to the Text tool and choosing Text. Then type in the name of the scene. You can style it how you want. Do this for all four scenes

      首先,让我们在每个场景上添加一个标题,以便我们知道导航工作正常。 在每个场景上,通过转到“ 文本”工具并选择“ 文本”来添加文本标签。 然后输入场景名称。 您可以根据需要设置样式。 对所有四个场景都这样做

    2. Ok so now we need to add the actual navigation responses so go to the components panel and open the TabBar

      好的,现在我们需要添加实际的导航响应,因此转到组件面板并打开TabBar
    3. We are now going to add the jump response which is what we use to navigate from scene to scene. Select tabHome and select Add Trigger and choose Tap

      现在,我们将添加跳转响应,这是我们用来在场景之间导航的内容。 选择选项卡主页,然后选择添加触发器,然后选择点击

    4. Now add the response Jump

      现在添加响应跳转

    5. From the scene menu select Home. We are going to leave the transition as None as tabs typically have no animation between them

      从场景菜单中选择“ 主页”。 我们将过渡设置为“无”,因为标签之间通常没有动画

    6. Repeat steps 3–4 for the other 3 tabs

      对其他3个选项卡重复步骤3-4
    Setting up the Jump triggers to jump from scene to scene
    Setting up the Jump triggers to jump from scene to scene
    设置跳转触发器以从一个场景跳转到另一个场景

    留言内容 (Messages)

    Before we move on let’s chat a bit about messages. Messages are the mechanism we use to trigger actions within components and scenes. You can send any text message you like. It’s essentially something unique that you are matching so that you can trigger an action. There are however some important things to remember:

    在继续之前,我们先聊一些消息。 消息是我们用来触发组件和场景中的动作的机制。 您可以发送任何您喜欢的短信。 实际上,这是您要匹配的唯一事物,因此您可以触发操作。 但是,有一些重要的事情要记住:

    1. Messages are case sensitive, HOME and home are two different messages

      消息区分大小写,HOME和home是两种不同的消息
    2. Messages need to be unique as they are being matched

      消息在匹配时需要唯一
    3. Messages should be clear and descriptive

      消息应清晰,描述性

    I use a special format for all of my messages borrowed from programming. I type them in all caps and use underscores to separate words e.g MY_MESSAGE. You can, of course, use any format you like.

    对于从编程中借来的所有消息,我都使用一种特殊的格式。 我用大写字母输入,并用下划线分隔单词,例如MY_MESSAGE。 当然,您可以使用任何喜欢的格式。

    In the case of our tab bar, we are going to use messages to trigger the selected states so lets set that up now.

    就我们的标签栏而言,我们将使用消息来触发所选状态,因此现在就进行设置。

    Setting up messages
    Setting up messages
    设置消息
    1. Navigate to the Home scene

      导航到家庭场景
    2. Add a Start trigger to the scene

      向场景添加开始触发器

    3. Add a Send response to the Start trigger and choose Send to Current Scene from the Channel menu

      发送响应添加到“开始”触发器,然后从“通道”菜单中选择“ 发送到当前场景

    4. In the Message field for our Send response type HOME_SELECTED

      在我们发送回复的消息字段中,输入HOME_SELECTED

    5. Repeat 1–3 for the other 3 scenes using the messages ACTIVITY_SELECTED, NOTIFICATIONS_SELECTED AND SETTINGS_SELECTED. To speed things up you can copy the first Start interaction you created by selecting the Start trigger and pressing Cmd+C (Ctrl+C Windows) and then paste it onto the other scenes before making the necessary changes

      使用消息ACTIVITY_SELECTEDNOTIFICATIONS_SELECTEDSETTINGS_SELECTED对其他3个场景重复1-3。 为了加快速度,您可以通过选择开始触发器并按Cmd + C(Ctrl + C Windows)复制您创建的第一个开始交互,然后将其粘贴到其他场景上,然后进行必要的更改

    选项卡选择状态 (The tab selected state)

    We now need to change the visual appearance of the tab so that it looks active. I’m going to style it like this:

    现在,我们需要更改选项卡的外观,使其看起来处于活动状态。 我将按以下方式对其进行样式设置:

    Image of the selected tab
    1. Double-click the ‘tabHome’ component in the components panel

      在组件面板中双击“ tabHome”组件
    2. Add a Receive trigger and select Receive from Current Scene from the Channel list

      添加一个接收触发器,然后从“通道”列表中选择“ 从当前场景接收”

    3. Tap in the Message field and type HOME_SELECTED, currently, auto-fill doesn’t work for this type of connection so we have to type it in.

      在“消息”字段中点击,然后键入HOME_SELECTED ,当前,自动填充不适用于这种类型的连接,因此我们必须输入它。

    4. Select TabHome and add a Color response. Change the fill property to #228BE6 and set the fill to 100

      选择TabHome并添加颜色响应。 将填充属性更改为#228BE6并将填充设置为100

    5. Add another Color response, this time for the icon. Check the Border checkbox and set it to #FFFFFF and the fill to 100.

      添加另一个颜色响应,这次添加图标。 选中边框复选框 并将其设置为#FFFFFF ,并将填充设置为100

    6. Repeat steps 1–5 for the other tab components replacing the relevant message (ACTIVITY_SELECTED, NOTIFICATIONS_SELECTED AND SETTINGS_SELECTED) in the receive trigger. Remember you can use copy/paste

      对其他选项卡组件重复步骤1-5,以替换接收触发器中的相关消息(ACTIVITY_SELECTED,NOTIFICATIONS_SELECTED和SETTINGS_SELECTED)。 请记住,您可以使用复制/粘贴
    7. Return to the Home scene and tap preview to see your tab bar working

      返回主屏幕并点击预览以查看选项卡栏的工作情况
    Setting up the visual changes inside the tab item component
    Setting up the visual changes inside the tab item component
    在选项卡项目组件内设置视觉更改

    You have now completed a reusable tab component within ProtoPie. You can now copy and paste this across your prototypes. The only extra work you’ll need to do is copy the Start interaction group across that you added to each scene. You can do this by selecting it and simply performing a copy & paste.

    现在,您已经完成了ProtoPie中的可重用选项卡组件。 您现在可以在整个原型中复制并粘贴它。 您唯一需要做的额外工作是复制添加到每个场景的“ 开始”交互组。 您可以选择它,然后简单地执行复制和粘贴操作。

    Image of completed tab bar

    There’s a lot more to explore with components but hopefully, you can see how useful they are and how you can create your UI in a reusable way

    关于组件,还有很多要探索的东西,但是希望,您可以看到它们的有用性以及如何以可重用的方式创建UI

    If you want to follow on by video check out the video here at ProtoPilot.

    如果您想继续观看视频,请在ProtoPilot上观看视频。

    Happy ProtoPie-ing!

    快乐的原型制作!

    翻译自: https://uxdesign.cc/building-a-tab-bar-with-nested-components-in-protopie-fcff8915b3b7

    layui选项卡嵌套选项卡

    展开全文
  • 选项卡切换添加一个layui方法:layui.table.resize();可以让表格重新计算宽度。 //选项卡方法 $(".tab-title>button").on("click", function () { $(this).addClass("active").siblings()
  • Layui——选项卡加载table数据列表

    千次阅读 2020-12-20 23:29:12
    效果:2个tabel 进入页面的时候 同事ajax拉取了数据 点击选项卡展示不同的tabelhtml代码储值卡充值关注技师View CodeJS代码layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element','...
  • 在tab选项卡中使用tab,计算tab高度发现有问题: 为了使表格能够占满页面底部,在表格render前,参数height都是动态计算出来的,如: var docHeight = $(document).height(); var tableTop = $(’#appeal_table_wait...
  • 笔记-layui选项卡

    千次阅读 2020-12-20 23:29:12
    /*** 注意:选项卡 依赖 element 模块,否则无法进行功能性操作** 相关样式* layui-tab 代表一个选项卡* |-layui-tab-brief 代表简介风格的选项卡* |-layui-tab-card 代表卡片风格的选项卡* |- layui-tab-title 用于...
  • 获取表格的数据总数,显示在tab选项卡后面 效果图如下: 问题解决方法如下: 1. 首先定义一个span标签和id 如下图所示: <ul class="layui-tab-title"> <li class="layui-this">未读&nbsp;&...
  • 常见样式 ​ layui-progress 代表一个进度条 ​ |- layui-progress-big 设置一个大进度条 ​ |- layui-progress-bar 代表显示的进度 ​ |- layui-bg-red 赤色 ​ |- layui-bg-orange 橙色 ​ |- layui-bg-green ...
  • 什么是LayUi? 我本身是一个后端工程师,但是我却接触到了这个框架,所以给大家分享一个我的心得,当然,这只是一个基础的LayUi的使用,大神请勿围观, 不卖关子了,切入正题~ LayUi是一款非常强大的前端框架,...
  • 项目用tp5.1 + layui 数据表格 模板代码: &lt;table id="demo" lay-filter="demo"&gt;&lt;/table&gt; &lt;script type="text/html" id="barDemo&...
  • <div class="layui-container"> <br> <div class="layui-row"> <div class="layui-col-md2"> <div class="layui-form-item"> <span>分润:</span>
  • 使用layui时,tab切换当弹出页面改变某一选项区中的内容后,让其其他内容同步刷新,且内容选项定位在指定的区域;1、html:订单信息商品信息审核记录1111111111111111333333332、javascript:layui.use(['form', '...
  • layui数据表格table在选项卡tabs中分页条不显示的解决 解决:渲染后重新设置高度:$(".layui-table-box").css("height", $(".layui-table-box").css("height")); 原因:通过F12可发现,初始化时未显示表格渲染...
  • layui选项卡同步问题

    2019-01-23 16:07:00
    下面这些代码是在有选项卡的情况下, 一个页面的状态修改时打开另一个选项卡, 另一个选项卡修改成功后,可以使你当前的选项卡状态实时更新 // 重载当前的页面的需要刷新的表格 table.reload('tableOut', {}); ...
  • layui竖版tab选项卡

    万次阅读 2018-09-20 10:25:59
    title: '新选项'+ (Math.random()*1000|0) //用于演示 ,content: '内容'+ (Math.random()*1000|0) ,id: new Date().getTime() //实际使用一般是规定好的id,这里以时间戳模拟下 }) } ,tabDelete: function...
  • 适用情景:为layui的渲染表格添加一个表头可以随右边框移动固定的功能 JQ代码:
  • 事实上,templet 也可以直接是一段 html 内容,如:三、第四种方法(解决Layui选项卡Tab和Layui模板laytpl冲突问题) 一、介绍 在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的,如果你想对...
  • 如下图,包含有A和B两个 选项卡,其中A选项卡是一个表格,B选项卡是一个echarts图,选项卡A如下图: 选项卡B如下图: 当点击选项卡B时,改变浏览器窗口大小,再点回选项卡A,会发现A中的数据表格下面的分页栏不见了...
  • <table id=userList lay-filter=userList></table> js //用户列表 var tableIns = table.render({ elem: '#userList', url : 'userAction_findAll.action', cellMinWidth : 95, page : true, ...
  • 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1、 选项卡 【官网 – 文档/示例 – 页面元素 – 选项卡】 2、数据表格 【官网 – 文档/示例 – 内置模块 – 数据表格】 3、分页 【官网 – 文档/示例 ...
  • 选项卡 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta ...
  • LayUI的Tab选项卡切换显示对应数据

    千次阅读 2021-01-14 16:41:14
    LayUI tab选项卡 + 分页展示 实现 Tab选项卡切换显示对应数据要求:实现tab选项卡改变的同时展示数据也跟着改变实现条件:1、选项卡【官网 – 文档/示例 – 页面元素 – 选项卡】2、数据表格【官网 – 文档/示例 – ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 475
精华内容 190
关键字:

layui选项卡显示表格