github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

docs: 新增 tabs 组件升级提示

pull/2477/head
贤心 2025-03-02 22:39:55 +08:00
parent 6e410d3718
commit 9ed49e9254
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/tab/index.md
View File

@ -2,8 +2,10 @@
title: 选项卡组件 tab title: 选项卡组件 tab
toc: true toc: true
--- ---
# 选项卡组件 # ~~选项卡组件~~
> 📣 <span style="color: #ff5722;">升级提示：我们在 2.10 版本中新增了全新的 tabs 标签页组件，用于替代原 `element` 模块中的 `tab` 组件，建议过渡到全新的 tabs 组件，旧的 ~~tab~~ 组件将在后续合适的版本中移除。</span> [前往全新 tabs 组件](../tabs/)
> 选项卡组件 `tab` 是指可进行标签页切换的一段容器，常广泛应用于 Web 页面。由于为了向下兼容等诸多历史原因，在 2.x 版本中，`tab` 组件属于 `element` 模块的子集。 > 选项卡组件 `tab` 是指可进行标签页切换的一段容器，常广泛应用于 Web 页面。由于为了向下兼容等诸多历史原因，在 2.x 版本中，`tab` 组件属于 `element` 模块的子集。
@ -159,7 +161,7 @@ tab 组件会在元素加载完毕后，自动对 tab 元素完成一次渲染
``` ```
<div id="test"></div> <div id="test"></div>
<!-- import layui --> <!-- import layui -->
<script> <script>
layui.use(function(){ layui.use(function(){
@ -284,7 +286,7 @@ layui.use(function(){
``` ```
var element = layui.element; var element = layui.element;
// tab 切换事件 // tab 切换事件
element.on('tab(filter)', function(data){ element.on('tab(filter)', function(data){
console.log(this); // 当前 tab 标题所在的原始 DOM 元素 console.log(this); // 当前 tab 标题所在的原始 DOM 元素
@ -307,7 +309,7 @@ element.on('tab(filter)', function(data){
``` ```
var element = layui.element; var element = layui.element;
// tab 切换前的事件 // tab 切换前的事件
element.on('tabBeforeChange(filter)', function(data){ element.on('tabBeforeChange(filter)', function(data){
console.log(data.elem); // 得到当前的 tab 容器 console.log(data.elem); // 得到当前的 tab 容器
@ -333,7 +335,7 @@ element.on('tabBeforeChange(filter)', function(data){
``` ```
var element = layui.element; var element = layui.element;
// tab 删除事件 // tab 删除事件
element.on('tabDelete(filter)', function(data){ element.on('tabDelete(filter)', function(data){
console.log(data.index); // 得到被删除的 tab 项的所在下标 console.log(data.index); // 得到被删除的 tab 项的所在下标