一、徽章
徽章是一个修饰性的元素,它们本身细小而并不显眼,但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬,而显得十分和谐。
先来看效果图:
1、小圆点徽章介绍:
小圆点,通过 layui-badge-dot 来定义,里面不能加文字;
小圆点实现代码:
<blockquote class="layui-elem-quote layui-quote-nm">
小圆点:
<span class="layui-badge-dot"></span>
<span class="layui-badge-dot layui-bg-black"></span>
<span class="layui-badge-dot layui-bg-blue"></span>
<span class="layui-badge-dot layui-bg-cyan"></span>
<span class="layui-badge-dot layui-bg-gray"></span>
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-dot layui-bg-orange"></span>
</blockquote>
2、椭圆体和边框体介绍:
椭圆体,通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式;
边框体,通过 layui-badge-rim 来定义
椭圆体和边框体代码实现:
<blockquote class="layui-elem-quote layui-quote-nm">
常规弧形徽章:
<span class="layui-badge">99+</span>
<span class="layui-badge layui-bg-black">45</span>
<span class="layui-badge layui-bg-blue">6</span>
<span class="layui-badge layui-bg-cyan">12</span>
<span class="layui-badge layui-bg-gray">15</span>
<span class="layui-badge layui-bg-green">24</span>
<span class="layui-badge layui-bg-orange">56</span>
<br/>
边框徽章:
<span class="layui-badge-rim">88</span>
<span class="layui-badge-rim">66</span>
</blockquote>
3、其他元素搭配
<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>
二、选项卡
导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。
依赖加载组件:element (请注意:必须加载element模块,相关功能才能正常使用,详见:内置组件 - 常用元素操作)。
实现效果图:
代码展示:
js代码:
<script>
layui.use(["element"], function() {
var $ = layui.jquery,
element = layui.element;
});
</script>
1、默认选项卡:
最外层div的class属性:layui-tab;
ul的class属性:layui-tab-title;
内层存放内容的div的class属性:layui-tab-content;
每段内容的div的class属性:layui-tab-item;
(注意: 值得注意的是,如果存在 layui-tab-item 的内容区域,在切换时自动定位到对应内容。如果不存在内容区域,则不会定位到对应内容。你通常需要设置过滤器,通过 element模块的监听tab事件来进行切换操作。)
<div class="layui-tab" style="width: 380px;margin: 0 auto;" lay-filter="test">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="11">首页</li>
<li lay-id="22">热门</li>
<li lay-id="33">新闻</li>
<li lay-id="44">视频</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
1. 高度默认自适应,也可以随意固宽。<br /> 2. Tab进行了响应式处理,所以无需担心数量多少。
</div>
<div class="layui-tab-item">
内容2
</div>
<div class="layui-tab-item">
内容3
</div>
<div class="layui-tab-item">
内容4
</div>
</div>
</div>
2、简约风格的选项卡
div的class外层通过追加class:layui-tab-brief 来设定简洁风格。
实现效果图:
3、卡片风格
外层div的class通过追加class:layui-tab-card来设定卡片风格。
实现效果图:
4、Tab响应式
当容器的宽度不足以显示全部的选项时,即会自动出现展开图标,如下以卡片风格为例(注意:所有Tab风格都支持响应式):
5、待删除的选项卡
你可以对父层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除
效果图如下:
代码展示:
<div class="layui-tab" lay-allowclose="true"></div>