wview组件库Appearance
Tab 标签页 #
分隔内容上有关联但属于不同类别的数据集合。
基础用法 #
基础的、简洁的标签页。
展开代码
vue
<template>
<Tab name="tabMenu" default="用户配置">
<TabPanel name="用户配置" tab="用户配置"> 用户配置 </TabPanel>
<TabPanel name="角色配置" tab="角色配置"> 角色配置 </TabPanel>
<TabPanel name="管理配置" tab="管理配置"> 管理配置 </TabPanel>
<TabPanel name="岗位需求管理" tab="岗位需求管理"> 岗位需求管理 </TabPanel>
</Tab>
</template>
<script lang="ts" setup>
import { Tab, TabPanel } from 'wviewui'
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
选项卡样式 #
选项卡样式的标签页。
展开代码
vue
<template>
<Tab name="tabMenu" default="用户配置" card>
<TabPanel name="用户配置" tab="用户配置"> 用户配置 </TabPanel>
<TabPanel name="角色配置" tab="角色配置"> 角色配置 </TabPanel>
<TabPanel name="管理配置" tab="管理配置"> 管理配置 </TabPanel>
<TabPanel name="岗位需求管理" tab="岗位需求管理"> 岗位需求管理 </TabPanel>
</Tab>
</template>
<script lang="ts" setup>
import { Tab, TabPanel } from 'wviewui'
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
卡片化 #
卡片化的标签页。
展开代码
vue
<template>
<Tab name="tabMenu" default="用户配置" border-card>
<TabPanel name="用户配置" tab="用户配置"> 用户配置 </TabPanel>
<TabPanel name="角色配置" tab="角色配置"> 角色配置 </TabPanel>
<TabPanel name="管理配置" tab="管理配置"> 管理配置 </TabPanel>
<TabPanel name="岗位需求管理" tab="岗位需求管理"> 岗位需求管理 </TabPanel>
</Tab>
</template>
<script lang="ts" setup>
import { Tab, TabPanel } from 'wviewui'
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
位置 #
可以通过 position 设置标签的位置
当前版本仅支持top与bottom两个位置
展开代码
vue
<template>
<Tab name="tabMenu" default="用户配置" position="bottom">
<TabPanel name="用户配置" tab="用户配置"> 用户配置 </TabPanel>
<TabPanel name="角色配置" tab="角色配置"> 角色配置 </TabPanel>
<TabPanel name="管理配置" tab="管理配置"> 管理配置 </TabPanel>
<TabPanel name="岗位需求管理" tab="岗位需求管理"> 岗位需求管理 </TabPanel>
</Tab>
</template>
<script lang="ts" setup>
import { Tab, TabPanel } from 'wviewui'
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12