mirror of https://github.com/layui/layui
docs(tabs): 新增「打乱标签顺序」示例
parent
e67266260f
commit
c7bfc564ea
|
@ -38,6 +38,16 @@
|
|||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-shuffle" lay-toc="{level: 2}">打乱标签顺序</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'max-height: 520px;', tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/tabs/examples/shuffle.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-hash" lay-toc="{level: 2, title: 'HASH 匹配'}">通过 HASH 匹配选中标签</h3>
|
||||
|
||||
切换 tabs 标签项后,地址栏同步 `hash` 值,当页面刷新时,tabs 仍保持对应的切换状态。
|
||||
|
|
|
@ -0,0 +1,22 @@
|
|||
<div class="layui-tabs" lay-options="{closable: true}">
|
||||
<ul class="layui-tabs-header">
|
||||
<li lay-id="fff">Tab6</li>
|
||||
<li lay-id="eee">Tab5</li>
|
||||
<li lay-id="ccc">Tab3</li>
|
||||
<li lay-id="bbb">Tab2</li>
|
||||
<li lay-id="aaa">Tab1</li>
|
||||
<li lay-id="ddd">Tab4</li>
|
||||
</ul>
|
||||
<div class="layui-tabs-body">
|
||||
<div class="layui-tabs-item" lay-id="aaa">Tab Content-1</div>
|
||||
<div class="layui-tabs-item" lay-id="bbb">Tab Content-2</div>
|
||||
<div class="layui-tabs-item" lay-id="ccc">Tab Content-3</div>
|
||||
<div class="layui-tabs-item" lay-id="ddd">Tab Content-4</div>
|
||||
<div class="layui-tabs-item" lay-id="eee">Tab Content-5</div>
|
||||
<div class="layui-tabs-item" lay-id="fff">Tab Content-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
🔔 提示:即 tabs 能通过 `lay-id` 匹配对应的标签头和标签内容。
|
||||
|
||||
<!-- import layui -->
|
Loading…
Reference in New Issue