View Shadcn UI

Appearance

介绍 ​


本文档主要用于描述 ShadcnTab 和 ShadcnTabItem 组件的一些特性和用法。

用法 ​

查看代码
vue
<template>
    <ShadcnTab>
        <ShadcnTabItem label="Tab 1" value="Tab 1">
            <p>Tab 1 content</p>
        </ShadcnTabItem>
        <ShadcnTabItem label="Tab 2" value="Tab 2">
            <p>Tab 2 content</p>
        </ShadcnTabItem>
    </ShadcnTab>
</template>

<script setup lang="ts">
</script>

禁用 (disabled) ​

查看代码
vue
<template>
    <ShadcnTab>
        <ShadcnTabItem label="Tab 1" value="Tab 1">
            <p>Tab 1 content</p>
        </ShadcnTabItem>
        <ShadcnTabItem label="Tab 2" value="Tab 2" disabled>
            <p>Tab 2 content</p>
        </ShadcnTabItem>
        <ShadcnTabItem label="Tab 3" value="Tab 3">
            <p>Tab 3 content</p>
        </ShadcnTabItem>
    </ShadcnTab>
</template>

<script setup lang="ts">
</script>

类型 (type) ​

查看代码
vue
<template>
    <ShadcnTab type="primary">
        <ShadcnTabItem label="Tab 1" value="Tab 1">Tab 1 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 2" value="Tab 2" disabled>Tab 2 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 3" value="Tab 3">Tab 3 content</ShadcnTabItem>
    </ShadcnTab>
    <ShadcnTab type="success">
        <ShadcnTabItem label="Tab 1" value="Tab 1">Tab 1 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 2" value="Tab 2" disabled>Tab 2 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 3" value="Tab 3">Tab 3 content</ShadcnTabItem>
    </ShadcnTab>
    <ShadcnTab type="warning">
        <ShadcnTabItem label="Tab 1" value="Tab 1">Tab 1 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 2" value="Tab 2" disabled>Tab 2 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 3" value="Tab 3">Tab 3 content</ShadcnTabItem>
    </ShadcnTab>
    <ShadcnTab type="error">
        <ShadcnTabItem label="Tab 1" value="Tab 1">Tab 1 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 2" value="Tab 2" disabled>Tab 2 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 3" value="Tab 3">Tab 3 content</ShadcnTabItem>
    </ShadcnTab>
</template>

<script setup lang="ts">
</script>

尺寸 (size) ​

查看代码
vue
<template>
    <ShadcnTab size="default">
        <ShadcnTabItem label="Default 1" value="Default 1">Tab 1 content</ShadcnTabItem>
        <ShadcnTabItem label="Default 2" value="Default 2" disabled>Tab 2 content</ShadcnTabItem>
        <ShadcnTabItem label="Default 3" value="Default 3">Tab 3 content</ShadcnTabItem>
    </ShadcnTab>
    <ShadcnTab size="small">
        <ShadcnTabItem label="Small 1" value="Small 1">Tab 1 content</ShadcnTabItem>
        <ShadcnTabItem label="Small 2" value="Small 2" disabled>Tab 2 content</ShadcnTabItem>
        <ShadcnTabItem label="Small 3" value="Small 3">Tab 3 content</ShadcnTabItem>
    </ShadcnTab>
</template>

<script setup lang="ts">
</script>

图标 (icon) ​

查看代码
vue
<template>
    <ShadcnTab>
        <ShadcnTabItem label="Tab 1" value="Tab 1">Tab 1 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 2" value="Tab 2" icon="Save" disabled>Tab 2 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 3" value="Tab 3">Tab 3 content</ShadcnTabItem>
    </ShadcnTab>
</template>

<script setup lang="ts">
</script>

线型 (line) ​

查看代码
vue
<template>
    <ShadcnTab type="primary" line>
        <ShadcnTabItem label="Tab 1" value="Tab 1">Tab 1 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 2" value="Tab 2" disabled>Tab 2 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 3" value="Tab 3">Tab 3 content</ShadcnTabItem>
    </ShadcnTab>
</template>

<script setup lang="ts">
</script>

可关闭 (closeable) ​

查看代码
vue
<template>
    <ShadcnTab closable>
        <ShadcnTabItem label="Tab 1" value="Tab 1">Tab 1 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 2" value="Tab 2">Tab 2 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 3" value="Tab 3">Tab 3 content</ShadcnTabItem>
    </ShadcnTab>
</template>

<script setup lang="ts">
</script>

附加信息 (extra) ​

查看代码
vue
<template>
    <ShadcnTab>
        <template #extra>Close</template>
        <ShadcnTabItem label="Tab 1" value="Tab 1">Tab 1 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 2" value="Tab 2">Tab 2 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 3" value="Tab 3">Tab 3 content</ShadcnTabItem>
    </ShadcnTab>
</template>

<script setup lang="ts">
</script>

方向 (direction) ​

查看代码
vue
<template>
    <ShadcnTab direction="vertical">
        <ShadcnTabItem label="Tab 1" value="Tab 1">Tab 1 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 2" value="Tab 2">Tab 2 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 3" value="Tab 3">Tab 3 content</ShadcnTabItem>
    </ShadcnTab>
</template>

<script setup lang="ts">
</script>

位置 (position) ​

查看代码
vue
<template>
    <ShadcnTab direction="vertical" position="left">
        <ShadcnTabItem label="Tab 1" value="Tab 1">Tab 1 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 2" value="Tab 2">Tab 2 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 3" value="Tab 3">Tab 3 content</ShadcnTabItem>
    </ShadcnTab>
    <ShadcnTab direction="vertical" position="right">
        <ShadcnTabItem label="Tab 1" value="Tab 1">Tab 1 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 2" value="Tab 2">Tab 2 content</ShadcnTabItem>
        <ShadcnTabItem label="Tab 3" value="Tab 3">Tab 3 content</ShadcnTabItem>
    </ShadcnTab>
</template>

<script setup lang="ts">
</script>

动态选项卡 ​

查看代码
vue
<template>
    <ShadcnTab v-model="defaultValue" size="small" card closable>
      <template #extra>
        <ShadcnButton @click="addTab">Add</ShadcnButton>
      </template>
      <ShadcnTabItem v-for="item in tabs" :label="item.label" :value="item.value" :icon="item.icon" :disabled="item.disabled">
        This is {{ item.label }}
      </ShadcnTabItem>
    </ShadcnTab>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const tabs = ref([
    { label: 'Tab 1', value: 'Tab 1', icon: 'tabler:home', disabled: false },
    { label: 'Tab 2', value: 'Tab 2', icon: 'tabler:home', disabled: false },
    { label: 'Tab 3', value: 'Tab 3', icon: 'tabler:home', disabled: false },
])
const defaultValue = ref('Tab 1')

const addTab = () => {
    const tab = `Tab ${tabs.value.length + 1}`
    tabs.value.push({
        label: tab,
        value: tab,
        disabled: false,
    })
    defaultValue.value = tab
}
</script>

选项卡 (Tabs) 属性 ​

选项卡选项 (Tabs Item) 属性 ​

选项卡 (Tabs) 事件 ​

选项卡选项 (Tabs Item) 事件 ​

选项卡 (Tabs) 插槽 ​

选项卡选项 (Tabs Item) 插槽 ​