FastUI

Appearance

Tabs 标签页 ​

基本用法 ​

html
<FTabs v-model="activeKey1">
    <FTabPane title="Tab 1">Content of Tab Pane 1</FTabPane>
    <FTabPane title="Tab 2">Content of Tab Pane 2</FTabPane>
    <FTabPane title="Tab 3">Content of Tab Pane 3</FTabPane>
</FTabs>

卡片样式 ​

html
<FTabs v-model="activeKey1" type="card">
    <FTabPane title="Tab 1">Content of Tab Pane 1</FTabPane>
    <FTabPane title="Tab 2">Content of Tab Pane 2</FTabPane>
    <FTabPane title="Tab 3">Content of Tab Pane 3</FTabPane>
</FTabs>

禁用 ​

html
<FTabs v-model="activeKey1">
    <FTabPane title="Tab 1">Content of Tab Pane 1</FTabPane>
    <FTabPane title="Tab 2" disabled>Content of Tab Pane 2</FTabPane>
    <FTabPane title="Tab 3">Content of Tab Pane 3</FTabPane>
</FTabs>

位置 ​

html
<FTabs v-model="activeKey1" position="left" style="height: 200px;">
    <FTabPane title="Tab 1">Content of Tab Pane 1</FTabPane>
    <FTabPane title="Tab 2">Content of Tab Pane 2</FTabPane>
    <FTabPane title="Tab 3">Content of Tab Pane 3</FTabPane>
</FTabs>