⌘
K

Tabs 标签栏

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

用于在同一个区域切换内容

import { DuTabs, DuTab } from 'dangoui'

说明

  1. 在 right 插槽中使用 DuButton 和 DuDivider 组成工具栏
  2. 在小程序中使用 right 插槽时，如果你传递给 slot 为一个节点并且为 view，请务必给这个 view 添加一个 class

示例

在 globalConfig 中，可以扩展 tabs 的 indicator 实现风格化，如：

import { globalConfig } from 'dangoui'

app.use(globalConfig, {
  tabs: {
    indicator: {
      qd: 'https://cdn.qiandaoapp.com/interior/images/2ec7a1feb8c27ce9ed0e948ce2676a0a.svg',
    },
  },
})
各种类型
<template>
  <PreviewBlock title="默认" type="block">
    <DuTabs v-model:value="selectedTab">
      <DuTab name="all">全部</DuTab>
      <DuTab name="wiki">资料</DuTab>
      <DuTab name="community">社区</DuTab>
      <DuTab name="trade">转卖</DuTab>
      <DuTab name="stock">闪购</DuTab>
      <DuTab name="buy">求购</DuTab>
      <DuTab name="purchaseway">全网</DuTab>
    </DuTabs>
  </PreviewBlock>
  <PreviewBlock title="风格化" type="block">
    <DuTabs v-model:value="selectedTab" indicator="qd">
      <DuTab name="all">全部</DuTab>
      <DuTab name="wiki">资料</DuTab>
      <DuTab name="community">社区</DuTab>
      <DuTab name="trade">转卖</DuTab>
      <DuTab name="stock">闪购</DuTab>
      <DuTab name="buy">求购</DuTab>
      <DuTab name="purchaseway">全网</DuTab>
    </DuTabs>
  </PreviewBlock>
  <PreviewBlock title="tag 类型" type="block">
    <DuTabs v-model:value="selectedTab" type="tag">
      <DuTab name="all">全部</DuTab>
      <DuTab name="wiki">资料</DuTab>
      <DuTab name="community">社区</DuTab>
      <DuTab name="trade">转卖</DuTab>
      <DuTab name="stock">闪购</DuTab>
      <DuTab name="buy">求购</DuTab>
      <DuTab name="purchaseway">全网</DuTab>
    </DuTabs>
  </PreviewBlock>
  <PreviewBlock title="文字类型" type="block">
    <DuTabs v-model:value="selectedTab" type="text">
      <DuTab name="all">全部</DuTab>
      <DuDivider />
      <DuTab name="wiki">资料</DuTab>
      <DuDivider />
      <DuTab name="community">社区</DuTab>
      <DuDivider />
      <DuTab name="trade">转卖</DuTab>
      <DuDivider />
      <DuTab name="stock">闪购</DuTab>
      <DuDivider />
      <DuTab name="buy">求购</DuTab>
      <DuDivider />
      <DuTab name="purchaseway">全网</DuTab>
    </DuTabs>
  </PreviewBlock>
  <PreviewBlock title="改变颜色" type="block">
    <DuTabs v-model:value="selectedTab" color="secondary">
      <DuTab name="all">全部</DuTab>
      <DuTab name="wiki">资料</DuTab>
      <DuTab name="community">社区</DuTab>
      <DuTab name="trade">转卖</DuTab>
      <DuTab name="stock">闪购</DuTab>
      <DuTab name="buy">求购</DuTab>
      <DuTab name="purchaseway">全网</DuTab>
    </DuTabs>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuTabs, DuTab, DuButton, DuDivider } from 'dangoui'

const selectedTab = ref('all')
</script>
0
工具栏
<template>
  <PreviewBlock title="默认/带有操作按钮" type="block">
    <DuTabs v-model:value="selectedTab" size="normal">
      <template #left>
        <DuIcon name="search" :size="20" color="#918b9f" />
      </template>
      <DuTab name="all">全部</DuTab>
      <DuTab name="wiki">资料</DuTab>
      <DuTab name="community">社区</DuTab>
      <DuTab name="trade">转卖</DuTab>
      <DuTab name="stock">闪购</DuTab>
      <DuTab name="buy">求购</DuTab>
      <DuTab name="purchaseway">全网</DuTab>
      <template #right>
        <DuButton
          color="default"
          type="text"
          size="small"
          icon="sort"
          icon-position="right"
          @click="handleToolItemClick"
        >
          测试1
        </DuButton>
        <DuDivider />
        <DuButton
          color="default"
          type="text"
          size="small"
          icon="sort"
          icon-position="right"
          @click="handleToolItemClick"
        >
          测试2
        </DuButton>
      </template>
    </DuTabs>
  </PreviewBlock>
  <PreviewBlock title="tag 类型" type="block">
    <DuTabs v-model:value="selectedTab" type="tag">
      <DuTab name="all">全部</DuTab>
      <DuTab name="wiki">资料</DuTab>
      <DuTab name="community">社区</DuTab>
      <DuTab name="trade">转卖</DuTab>
      <DuTab name="stock">闪购</DuTab>
      <DuTab name="buy">求购</DuTab>
      <DuTab name="purchaseway">全网</DuTab>
      <template #right>
        <DuButton color="primary" type="text" size="small" icon="sort" icon-position="right">排序</DuButton>
        <DuDivider />
        <DuButton color="default" type="text" size="small" icon="sort" icon-position="right">测试2</DuButton>
      </template>
    </DuTabs>
  </PreviewBlock>
  <PreviewBlock title="文字类型" type="block">
    <DuTabs v-model:value="selectedTab" type="text">
      <DuTab name="all">全部</DuTab>
      <DuDivider />
      <DuTab name="wiki">资料</DuTab>
      <DuDivider />
      <DuTab name="community">社区</DuTab>
      <DuDivider />
      <DuTab name="trade">转卖</DuTab>
      <DuDivider />
      <DuTab name="stock">闪购</DuTab>
      <DuDivider />
      <DuTab name="buy">求购</DuTab>
      <DuDivider />
      <DuTab name="purchaseway">全网</DuTab>
      <template #right>
        <DuButton color="primary" type="text" size="small" icon="sort" icon-position="right">排序</DuButton>
        <DuDivider />
        <DuButton color="default" type="text" size="small" icon="sort" icon-position="right">测试2</DuButton>
      </template>
    </DuTabs>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuTabs, DuTab, DuButton, DuIcon, DuDivider } from 'dangoui'

const selectedTab = ref('all')

watch(selectedTab, (current) => {
  console.log('[demo] current tab is', current)
})

function handleToolItemClick() {
  console.log('[demo] tool item click')
}
</script>
0
大尺寸
<template>
  <PreviewBlock title="默认/带有操作按钮" type="block">
    <DuTabs v-model:value="selectedTab" size="large">
      <DuTab name="all">全部</DuTab>
      <DuTab name="wiki">资料</DuTab>
      <DuTab name="community">社区</DuTab>
      <DuTab name="trade">转卖</DuTab>
      <DuTab name="stock">闪购</DuTab>
      <DuTab name="buy">求购</DuTab>
      <DuTab name="purchaseway">全网</DuTab>
      <template #right>
        <DuButton color="default" type="text" size="small" icon="sort" icon-position="right">测试1</DuButton>
        <DuDivider />
        <DuButton color="default" type="text" size="small" icon="sort" icon-position="right">测试2</DuButton>
      </template>
    </DuTabs>
  </PreviewBlock>
  <PreviewBlock title="风格化" type="block">
    <DuTabs v-model:value="selectedTab" size="large" indicator="qd">
      <DuTab name="all">全部</DuTab>
      <DuTab name="wiki">资料</DuTab>
      <DuTab name="community">社区</DuTab>
      <DuTab name="trade">转卖</DuTab>
      <DuTab name="stock">闪购</DuTab>
      <DuTab name="buy">求购</DuTab>
      <DuTab name="purchaseway">全网</DuTab>
      <template #right>
        <DuButton color="default" type="text" size="small" icon="sort" icon-position="right">测试1</DuButton>
        <DuDivider />
        <DuButton color="default" type="text" size="small" icon="sort" icon-position="right">测试2</DuButton>
      </template>
    </DuTabs>
  </PreviewBlock>
  <PreviewBlock title="tag 类型" type="block">
    <DuTabs v-model:value="selectedTab" type="tag" size="large">
      <DuTab name="all">全部</DuTab>
      <DuTab name="wiki">资料</DuTab>
      <DuTab name="community">社区</DuTab>
      <DuTab name="trade">转卖</DuTab>
      <DuTab name="stock">闪购</DuTab>
      <DuTab name="buy">求购</DuTab>
      <DuTab name="purchaseway">全网</DuTab>
      <template #right>
        <DuButton color="primary" type="text" size="small" icon="sort" icon-position="right">排序</DuButton>
        <DuDivider />
        <DuButton color="default" type="text" size="small" icon="sort" icon-position="right">测试2</DuButton>
      </template>
    </DuTabs>
  </PreviewBlock>
  <PreviewBlock title="文字类型" type="block">
    <DuTabs v-model:value="selectedTab" type="text" size="large">
      <DuTab name="all">全部</DuTab>
      <DuDivider />
      <DuTab name="wiki">资料</DuTab>
      <DuDivider />
      <DuTab name="community">社区</DuTab>
      <DuDivider />
      <DuTab name="trade">转卖</DuTab>
      <DuDivider />
      <DuTab name="stock">闪购</DuTab>
      <DuDivider />
      <DuTab name="buy">求购</DuTab>
      <DuDivider />
      <DuTab name="purchaseway">全网</DuTab>
      <template #right>
        <DuButton color="primary" type="text" size="small" icon="sort" icon-position="right">排序</DuButton>
        <DuDivider />
        <DuButton color="default" type="text" size="small" icon="sort" icon-position="right">测试2</DuButton>
      </template>
    </DuTabs>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuTabs, DuTab, DuButton, DuDivider } from 'dangoui'

const selectedTab = ref('all')
</script>
0
各种颜色
<template>
  <PreviewBlock title="secondary" type="block">
    <DuTabs v-model:value="selectedTab" color="secondary" type="tag">
      <DuTab name="all">全部</DuTab>
      <DuTab name="wiki">资料</DuTab>
      <DuTab name="community">社区</DuTab>
      <DuTab name="trade">转卖</DuTab>
      <DuTab name="stock">闪购</DuTab>
      <DuTab name="buy">求购</DuTab>
      <DuTab name="purchaseway">全网</DuTab>
    </DuTabs>
  </PreviewBlock>
  <PreviewBlock title="success" type="block">
    <DuTabs v-model:value="selectedTab" color="success" type="tag">
      <DuTab name="all">全部</DuTab>
      <DuTab name="wiki">资料</DuTab>
      <DuTab name="community">社区</DuTab>
      <DuTab name="trade">转卖</DuTab>
      <DuTab name="stock">闪购</DuTab>
      <DuTab name="buy">求购</DuTab>
      <DuTab name="purchaseway">全网</DuTab>
    </DuTabs>
  </PreviewBlock>
  <PreviewBlock title="warning" type="block">
    <DuTabs v-model:value="selectedTab" color="warning" type="tag">
      <DuTab name="all">全部</DuTab>
      <DuTab name="wiki">资料</DuTab>
      <DuTab name="community">社区</DuTab>
      <DuTab name="trade">转卖</DuTab>
      <DuTab name="stock">闪购</DuTab>
      <DuTab name="buy">求购</DuTab>
      <DuTab name="purchaseway">全网</DuTab>
    </DuTabs>
  </PreviewBlock>
  <PreviewBlock title="warning" type="block">
    <DuTabs v-model:value="selectedTab" color="error" type="tag">
      <DuTab name="all">全部</DuTab>
      <DuTab name="wiki">资料</DuTab>
      <DuTab name="community">社区</DuTab>
      <DuTab name="trade">转卖</DuTab>
      <DuTab name="stock">闪购</DuTab>
      <DuTab name="buy">求购</DuTab>
      <DuTab name="purchaseway">全网</DuTab>
    </DuTabs>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuTabs, DuTab, DuButton, DuDivider } from 'dangoui'

const selectedTab = ref('all')
</script>
0

API

Tabs 属性

属性名类型默认值说明
type"default" | "text" | "tag""default"
colorstring"primary"色彩，可以使用色板中的颜色名
size"normal" | "large""normal"
valuestring -
indicatorstring - 指示器，可以通过全局配置进行扩展

Tabs 插槽

名称
left
default
right

Tabs 事件

名称类型
update:value(event: "update:value", name: string): void

Tab 属性

属性名类型默认值说明
namestring -

Tab 插槽

名称
default

Tab 事件

名称类型
click(event: "click", event: any): void
上一篇
Steps 步骤条
下一篇
Rate 评分
本页包含
说明
示例
API