Will-UI

Tabs - 标签页

🔰 选项卡切换组件，常用于分隔内容上有关联但属于不同类别的数据集合。

示例 🌰

<w-tabs selected="first-tab" >
  <w-tabs-head>
    <w-tabs-item label="first-tab">Tab 1</w-tabs-item>
    <w-tabs-item label="2">Tab 2</w-tabs-item>
    <w-tabs-item label="third-tab">Tab 3</w-tabs-item>
  </w-tabs-head>
  <w-tabs-body>
    <w-tabs-pane name="first-tab">content of Tab 1</w-tabs-pane>
    <w-tabs-pane name="2">content of Tab 2</w-tabs-pane>
    <w-tabs-pane name="third-tab">content of Tab 3</w-tabs-pane>
  </w-tabs-body>
</w-tabs>



 









<w-tabs selected="first-tab" >
  <w-tabs-head>
    <w-tabs-item label="first-tab">Tab 1</w-tabs-item>
    <w-tabs-item label="2" disabled>Tab 2</w-tabs-item>
    <w-tabs-item label="third-tab">Tab 3</w-tabs-item>
  </w-tabs-head>
  <w-tabs-body>
    <w-tabs-pane name="first-tab">content of Tab 1</w-tabs-pane>
    <w-tabs-pane name="2">content of Tab 2</w-tabs-pane>
    <w-tabs-pane name="third-tab">content of Tab 3</w-tabs-pane>
  </w-tabs-body>
</w-tabs>
 












<w-tabs selected="first-tab" direction="vertical" >
  <w-tabs-head>
    <w-tabs-item label="first-tab">Tab 1</w-tabs-item>
    <w-tabs-item label="2" >Tab 2</w-tabs-item>
    <w-tabs-item label="third-tab">Tab 3</w-tabs-item>
  </w-tabs-head>
  <w-tabs-body>
    <w-tabs-pane name="first-tab">content of Tab 1</w-tabs-pane>
    <w-tabs-pane name="2">content of Tab 2</w-tabs-pane>
    <w-tabs-pane name="third-tab">content of Tab 3</w-tabs-pane>
  </w-tabs-body>
</w-tabs>


 
 
 








<w-tabs selected="first-tab">
  <w-tabs-head>
    <w-tabs-item label="first-tab" icon="setting">Tab 1</w-tabs-item>
    <w-tabs-item label="2" icon="edit">Tab 2</w-tabs-item>
    <w-tabs-item label="third-tab" icon="info">Tab 3</w-tabs-item>
  </w-tabs-head>
  <w-tabs-body>
    <w-tabs-pane name="first-tab">content of Tab 1</w-tabs-pane>
    <w-tabs-pane name="2">content of Tab 2</w-tabs-pane>
    <w-tabs-pane name="third-tab">content of Tab 3</w-tabs-pane>
  </w-tabs-body>
</w-tabs>





 
 
 








<w-tabs selected="first-tab">
  <w-tabs-head>
    <w-tabs-item label="first-tab" >Tab 1</w-tabs-item>
    <w-tabs-item label="2" >Tab 2</w-tabs-item>
    <w-tabs-item label="third-tab">Tab 3</w-tabs-item>
    <div slot="action">
      <w-button>action</w-button>
    </div>
  </w-tabs-head>
  <w-tabs-body>
    <w-tabs-pane name="first-tab">content of Tab 1</w-tabs-pane>
    <w-tabs-pane name="2">content of Tab 2</w-tabs-pane>
    <w-tabs-pane name="third-tab">content of Tab 3</w-tabs-pane>
  </w-tabs-body>
</w-tabs>

Attribute - 属性 🌠

  • <w-tabs> 属性说明如下：
参数 说明 类型 可选值 默认值
selected 表示初始选中的tab label值(requried 必需项) String
direction 表示tabs的方向（垂直或水平） String horizontal vertical horizontal
  • <w-tabs-item> 属性说明如下：
参数 说明 类型 可选值 默认值
label 表tab的唯一标记，与<w-tabs-pane>的name属性相对应(requried 必需项) String
icon 是否需要Icon String
disabled 是否禁用该tab-item Boolean false
  • <w-tabs-pane> 属性说明如下：
参数 说明 类型 可选值 默认值
name 与<w-tabs-item>的label属性相对应(requried 必需项) String

←