🎉 daisyUI 5.0 升级指南

选项卡

选项卡可用于以选项卡格式显示链接列表。

类名		类型
tabs
组件
多个选项卡项的容器
tab
部件
单个选项卡按钮（可以是按钮、链接、div、单选输入等）
tab-content
部件
紧跟在选项卡后面的选项卡内容
tabs-box
样式
盒子样式
tabs-border
样式
底部边框样式
tabs-lift
样式
抬起样式
tab-active
修饰符
使单个选项卡看起来处于激活状态
tab-disabled
修饰符
使单个选项卡看起来处于禁用状态
tabs-top
位置
将选项卡按钮放在选项卡内容的顶部（默认）
tabs-bottom
位置
将选项卡放在选项卡内容的下方
tabs-xs
尺寸
超小尺寸
tabs-sm
尺寸
小尺寸
tabs-md
尺寸
中等尺寸[默认]
tabs-lg
尺寸
大尺寸
tabs-xl
尺寸
超大尺寸

tabs

<div role="tablist" class="$$tabs">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>

tabs-border

<div role="tablist" class="$$tabs $$tabs-border">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-border">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>

tabs-lift

<div role="tablist" class="$$tabs $$tabs-lift">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>

选项卡框

<div role="tablist" class="$$tabs $$tabs-box">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-box">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>

使用单选输入的选项卡框

<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-box">
  <input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 1" />
  <input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 2" checked="checked" />
  <input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 3" />
</div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-box">
  <input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 1" />
  <input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 2" checked="checked" />
  <input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 3" />
</div>

尺寸


<div role="tablist" class="$$tabs $$tabs-lift $$tabs-xs">
  <a role="tab" class="$$tab">Xsmall</a>
  <a role="tab" class="$$tab $$tab-active">Xsmall</a>
  <a role="tab" class="$$tab">Xsmall</a>
</div>

<div role="tablist" class="$$tabs $$tabs-lift $$tabs-sm">
  <a role="tab" class="$$tab">Small</a>
  <a role="tab" class="$$tab $$tab-active">Small</a>
  <a role="tab" class="$$tab">Small</a>
</div>

<div role="tablist" class="$$tabs $$tabs-lift">
  <a role="tab" class="$$tab">Medium</a>
  <a role="tab" class="$$tab $$tab-active">Medium</a>
  <a role="tab" class="$$tab">Medium</a>
</div>

<div role="tablist" class="$$tabs $$tabs-lift $$tabs-lg">
  <a role="tab" class="$$tab">Large</a>
  <a role="tab" class="$$tab $$tab-active">Large</a>
  <a role="tab" class="$$tab">Large</a>
</div>

<div role="tablist" class="$$tabs $$tabs-lift $$tabs-xl">
  <a role="tab" class="$$tab">Xlarge</a>
  <a role="tab" class="$$tab $$tab-active">Xlarge</a>
  <a role="tab" class="$$tab">Xlarge</a>
</div>

<div role="tablist" class="$$tabs $$tabs-lift $$tabs-xs">
  <a role="tab" class="$$tab">Xsmall</a>
  <a role="tab" class="$$tab $$tab-active">Xsmall</a>
  <a role="tab" class="$$tab">Xsmall</a>
</div>

<div role="tablist" class="$$tabs $$tabs-lift $$tabs-sm">
  <a role="tab" class="$$tab">Small</a>
  <a role="tab" class="$$tab $$tab-active">Small</a>
  <a role="tab" class="$$tab">Small</a>
</div>

<div role="tablist" class="$$tabs $$tabs-lift">
  <a role="tab" class="$$tab">Medium</a>
  <a role="tab" class="$$tab $$tab-active">Medium</a>
  <a role="tab" class="$$tab">Medium</a>
</div>

<div role="tablist" class="$$tabs $$tabs-lift $$tabs-lg">
  <a role="tab" class="$$tab">Large</a>
  <a role="tab" class="$$tab $$tab-active">Large</a>
  <a role="tab" class="$$tab">Large</a>
</div>

<div role="tablist" class="$$tabs $$tabs-lift $$tabs-xl">
  <a role="tab" class="$$tab">Xlarge</a>
  <a role="tab" class="$$tab $$tab-active">Xlarge</a>
  <a role="tab" class="$$tab">Xlarge</a>
</div>

单选选项卡边框 + 选项卡内容

选项卡内容 1
选项卡内容 2
选项卡内容 3
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-border">
  <input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 1" />
  <div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 1</div>

  <input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 2" checked="checked" />
  <div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 2</div>

  <input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 3" />
  <div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 3</div>
</div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-border">
  <input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 1" />
  <div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 1</div>

  <input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 2" checked="checked" />
  <div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 2</div>

  <input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 3" />
  <div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 3</div>
</div>

单选选项卡抬起 + 选项卡内容

选项卡内容 1
选项卡内容 2
选项卡内容 3
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-lift">
  <input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 1" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>

  <input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 2" checked="checked" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>

  <input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 3" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-lift">
  <input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 1" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>

  <input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 2" checked="checked" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>

  <input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 3" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>

带有图标的单选选项卡抬起 + 选项卡内容

选项卡内容 1
选项卡内容 2
选项卡内容 3
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-lift">
  <label class="$$tab">
    <input type="radio" name="my_tabs_4" />
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" /></svg>
    Live
  </label>
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>

  <label class="$$tab">
    <input type="radio" name="my_tabs_4" checked="checked" />
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" /></svg>
    Laugh
  </label>
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>

  <label class="$$tab">
    <input type="radio" name="my_tabs_4" />
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
    Love
  </label>
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-lift">
  <label class="$$tab">
    <input type="radio" name="my_tabs_4" />
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" /></svg>
    Live
  </label>
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>

  <label class="$$tab">
    <input type="radio" name="my_tabs_4" checked="checked" />
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" /></svg>
    Laugh
  </label>
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>

  <label class="$$tab">
    <input type="radio" name="my_tabs_4" />
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
    Love
  </label>
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>

底部单选选项卡抬起 + 选项卡内容

选项卡内容 1
选项卡内容 2
选项卡内容 3
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-lift $$tabs-bottom">
  <input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 1" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>

  <input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 2" checked="checked" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>

  <input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 3" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-lift $$tabs-bottom">
  <input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 1" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>

  <input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 2" checked="checked" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>

  <input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 3" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>

单选选项卡框 + 选项卡内容

选项卡内容 1
选项卡内容 2
选项卡内容 3
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-box">
  <input type="radio" name="my_tabs_6" class="$$tab" aria-label="Tab 1" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>

  <input type="radio" name="my_tabs_6" class="$$tab" aria-label="Tab 2" checked="checked" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>

  <input type="radio" name="my_tabs_6" class="$$tab" aria-label="Tab 3" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-box">
  <input type="radio" name="my_tabs_6" class="$$tab" aria-label="Tab 1" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>

  <input type="radio" name="my_tabs_6" class="$$tab" aria-label="Tab 2" checked="checked" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>

  <input type="radio" name="my_tabs_6" class="$$tab" aria-label="Tab 3" />
  <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>

带有自定义颜色的选项卡

<div role="tablist" class="$$tabs $$tabs-lift">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active text-primary [--tab-bg:orange] [--tab-border-color:red]"> Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active text-primary [--tab-bg:orange] [--tab-border-color:red]"> Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>
你发现错误了吗？ 在 GitHub 上提交 issue
你喜欢 daisyUI 吗？ 发帖宣传一下吧！
支持 daisyUI 的开发： Open Collective
daisyUI store

NEXUS
官方 daisyUI 仪表盘模板

在 daisyUI 商店中可用

更多详情
请升级您的浏览器