docs(tabs): 新增「打乱标签顺序」示例

pull/2734/head
贤心 2025-06-18 10:29:35 +08:00
parent e67266260f
commit c7bfc564ea
2 changed files with 32 additions and 0 deletions

View File

@ -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 仍保持对应的切换状态。

View File

@ -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 -->