tab-x

一、场景和形态

一般位于窗口页面的上方、顶条的下方，不支持菜单分级，一般与布局组件结合，要么靠左，要么靠右。

现场演示

下面这这个切换，是由axue-tab-x组件渲染

演示代码如下：

<!--在vitepress中的.md文件中直接引入下面的代码-->
<div id="container"></div>
<script setup>
  import('axue').then(({showTip}) => {
    const componentName ='axue-tab-x'
    const el = document.createElement(componentName);
    el.args = [{ 
        label: '首页', 
        onClick:function(){ console.log("测试tab导航，点击1")}
    },
    {
        label: '关于', 
        onClick:function(){}
    }]
    document.getElementById('container')?.appendChild(el);
  });
</script>

二、使用方式

定义参数

const aboutNode = document.getElementById("aboutAxue")
let  args = [{ 
    label: '首页', 
    onClick:function(){ console.log("测试tab导航，点击1")}
},
{
    label: '关于', 
    onClick:function(){}
}]

使用组件

<axue-tab-x .args=${args} ></axue-tab-x>

属性API

内联属性	说明	类型	默认值
tab数组	对象数组，内部结构如下下面	string	""
label	菜单标题文本	string	""
onClick	菜单单击事件回调，优先级不如slot	string	内置图标