Tabs 标签页

分段（默认）

下划线

import { Tabs } from "@lark-ui/core";

export function TabsDefaultDemo() {
  return (
    <div className="flex flex-col items-start gap-6">
      <div>
        <p className="mb-2 text-sm text-lark-subtle">分段（默认）</p>
        <Tabs
          variant="segmented"
          tabs={[
            { value: "tab1", label: "标签页 1" },
            { value: "tab2", label: "标签页 2" },
            { value: "tab3", label: "标签页 3" },
          ]}
          selectedValue="tab1"
        />
      </div>
      <div>
        <p className="mb-2 text-sm text-lark-subtle">下划线</p>
        <Tabs
          variant="underline"
          tabs={[
            { value: "tab1", label: "标签页 1" },
            { value: "tab2", label: "标签页 2" },
            { value: "tab3", label: "标签页 3" },
          ]}
          selectedValue="tab1"
        />
      </div>
    </div>
  );
}

安装

统一导出

import { Tabs } from "@lark-ui/core";

按需导出

import { Tabs } from "@lark-ui/core/components/tabs";

用法

import { Tabs } from "@lark-ui/core";

export default function Example() {
  return (
    <Tabs
      tabs={[
        { value: "overview", label: "Overview" },
        { value: "settings", label: "Settings" },
      ]}
      selectedValue="overview"
    />
  );
}

示例

变体

分段式（默认）

胶囊形状的指示器在浅色背景上于各标签页之间滑动。

import { Tabs } from "@lark-ui/core";

export function TabsSegmentedDemo() {
  return (
    <Tabs
      variant="segmented"
      tabs={[
        { value: "tab1", label: "标签页 1" },
        { value: "tab2", label: "标签页 2" },
        { value: "tab3", label: "标签页 3" },
      ]}
      selectedValue="tab1"
    />
  );
}

下划线式

底部边框配合主色指示器。当前标签页的文字更粗，以突出显示。

import { Tabs } from "@lark-ui/core";

export function TabsUnderlineDemo() {
  return (
    <Tabs
      variant="underline"
      tabs={[
        { value: "tab1", label: "标签页 1" },
        { value: "tab2", label: "标签页 2" },
        { value: "tab3", label: "标签页 3" },
      ]}
      selectedValue="tab1"
    />
  );
}

小尺寸

使用 size="sm" 可获得与 Input size="sm" 高度一致（h-6.5 / 26px）的紧凑标签栏。适合放在工具栏（Toolbar）和筛选行中。

分段 sm

下划线 sm

import { Tabs } from "@lark-ui/core";

export function TabsSmDemo() {
  return (
    <div className="flex flex-col items-start gap-6">
      <div>
        <p className="mb-2 text-sm text-lark-subtle">分段 sm</p>
        <Tabs
          variant="segmented"
          size="sm"
          tabs={[
            { value: "tab1", label: "标签页 1" },
            { value: "tab2", label: "标签页 2" },
            { value: "tab3", label: "标签页 3" },
          ]}
          selectedValue="tab1"
        />
      </div>
      <div>
        <p className="mb-2 text-sm text-lark-subtle">下划线 sm</p>
        <Tabs
          variant="underline"
          size="sm"
          tabs={[
            { value: "tab1", label: "标签页 1" },
            { value: "tab2", label: "标签页 2" },
            { value: "tab3", label: "标签页 3" },
          ]}
          selectedValue="tab1"
        />
      </div>
    </div>
  );
}

受控

使用 value 和 onValueChange 属性来控制受控状态。

当前标签页：tab1

import { useState } from "react";
import { Tabs } from "@lark-ui/core";

export function TabsControlledDemo() {
  const [activeTab, setActiveTab] = useState("tab1");

  return (
    <div className="space-y-4">
      <Tabs
        tabs={[
          { value: "tab1", label: "Tab 1" },
          { value: "tab2", label: "Tab 2" },
          { value: "tab3", label: "Tab 3" },
        ]}
        value={activeTab}
        onValueChange={setActiveTab}
      />
      <p className="text-sm text-lark-subtle">
        当前标签页：<code className="text-sm">{activeTab}</code>
      </p>
    </div>
  );
}

标签页过多

当条目较多时，标签页会自动横向滚动。

import { Tabs } from "@lark-ui/core";

export function TabsManyDemo() {
  return (
    <div className="w-full max-w-md">
      <Tabs
        tabs={[
          { value: "overview", label: "概览" },
          { value: "analytics", label: "分析" },
          { value: "reports", label: "报告" },
          { value: "notifications", label: "通知" },
          { value: "settings", label: "设置" },
          { value: "billing", label: "计费" },
          { value: "security", label: "安全" },
          { value: "integrations", label: "集成" },
        ]}
        selectedValue="overview"
      />
    </div>
  );
}

横向溢出

当分段式标签页超出容器时，被裁剪的一侧会出现滚动按钮。你可以使用这些按钮、横向滚动或鼠标拖拽来查看屏幕之外的标签页。

import { Tabs } from "@lark-ui/core";

export function TabsOverflowDemo() {
  return (
    <div className="w-full max-w-xs">
      <Tabs
        tabs={[
          { value: "overview", label: "概览" },
          { value: "analytics", label: "分析" },
          { value: "reports", label: "报告" },
          { value: "notifications", label: "通知" },
          { value: "settings", label: "设置" },
          { value: "billing", label: "计费" },
          { value: "security", label: "安全" },
          { value: "integrations", label: "集成" },
        ]}
        selectedValue="overview"
      />
    </div>
  );
}

动态标签数量

此示例会在溢出的标签集合与接近生产的七标签页集合之间切换。当多余标签消失后，只要剩余标签能够放下，末尾的溢出控件就应隐藏。

10 个标签页

import { useState } from "react";
import { Tabs } from "@lark-ui/core";

export function TabsDynamicCountDemo() {
  const [showExtraTabs, setShowExtraTabs] = useState(true);
  const tabs = showExtraTabs
    ? [...productionLikeTabs, ...productionLikeExtraTabs]
    : productionLikeTabs;

  return (
    <div className="space-y-3">
      <div className="w-full max-w-[588px]">
        <Tabs tabs={tabs} selectedValue="settings" />
      </div>
      <div className="flex items-center gap-3 text-sm text-lark-subtle">
        <button
          type="button"
          className="rounded-md border border-lark-line bg-lark-base px-2.5 py-1 text-lark-default hover:bg-lark-tint focus:ring-2 focus:ring-lark-brand focus:outline-none"
          onClick={() => setShowExtraTabs((current) => !current)}
        >
          切换额外标签页
        </button>
        <span>{showExtraTabs ? "10 个标签页" : "7 个标签页"}</span>
      </div>
    </div>
  );
}

API 参考

属性	类型	默认值	说明
tabs	`TabsItem[]`	-	要渲染的标签页项数组。
value	`string`	-	受控值。设置后组件变为受控模式。
selectedValue	`string`	-	非受控模式下的默认选中值。设置 `value` 后该属性无效。
activateOnFocus	`boolean`	-	为 `true` 时，标签页通过方向键获得焦点后立即激活。为 `false`（默认）时，标签页只获得焦点，需要按 Enter/空格键才能激活。
className	`string`	-	根元素的额外 CSS 类名。
listClassName	`string`	-	标签页列表元素的额外 CSS 类名。
indicatorClassName	`string`	-	指示器元素的额外 CSS 类名。
labels	`TabsLabels`	-	用于国际化 aria-label 的标签。所有标签默认提供英文文案。
variant	`"segmented" \| "underline"`	`"segmented"`	标签页样式。 - `"segmented"` — 填充轨道上的胶囊形指示器 - `"underline"` — 标签文字下方的下划线指示器
size	`"base" \| "sm"`	`"base"`	标签页尺寸。 - `"base"` — 默认尺寸（h-8, text-base） - `"sm"` — 紧凑尺寸（h-6, text-xs）——与 Input 的 size="sm" 一致
onValueChange	`(value: string) => void`	-	激活标签页变化时的回调

TabsItem

属性	类型	必填
value	string	是
label	ReactNode	是
className	string	否
render	TabsTab.Props[“render”]	否
nativeButton	boolean	否

Lark