Tabs

标签页

提示

Tabs 仅仅处理一层标签的情况。若有二级标签可使用 Navbar 组件。

基础用法

通过 v-model 绑定选中值，list 定义显示选项

vue
<template>
  <ap-tabs v-model="tab" :list="list" />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { TabItem } from 'apathia-ui'

const tab = ref(1)
const list = reactive<TabItem[]>([1, 2, 3, 4])
</script>

下划线样式

通过指定 type 属性为 underline 定义导航的样式有下划线

vue
<template>
  <ap-tabs v-model="tab" :list="list" underline />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { TabItem } from 'apathia-ui'

const tab = ref(1)
const list = reactive<TabItem[]>([1, 2, 3, 4])
</script>

自定义显示样式

通过 show-label 可以自定义 tab 的显示内容

vue
<template>
  <ap-tabs v-model="tab" :list="list" :show-label="showLabel" />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { TabItem } from 'apathia-ui'

const tab = ref(1)
const list = reactive<TabItem[]>([1, 2, 3, 4])

const showLabel = (tab: TabItem) => {
  return `tab-${tab}`
}
</script>

Props

prop	说明	类型	默认值
modelValue	绑定值	string,number	无
list	tab 的配置	string[], number[], any[]	无
underline	是否是下划线样式	boolean	false
showLabel	显示 label 的方法	function	(tab) => tab

Events

change: 修改时触发，参数 tab

Tabs ​

基础用法 ​

下划线样式 ​

自定义显示样式 ​

Props ​

Events ​

Tabs

基础用法

下划线样式

自定义显示样式

Props

Events