文档演练博客

<Tabs.Root defaultValue="account">
	<Tabs.List>
		<Tabs.Trigger value="account">Account</Tabs.Trigger>
		<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
		<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
	</Tabs.List>

	<Box pt="3">
		<Tabs.Content value="account">
			<Text size="2">Make changes to your account.</Text>
		</Tabs.Content>

		<Tabs.Content value="documents">
			<Text size="2">Access and update your documents.</Text>
		</Tabs.Content>

		<Tabs.Content value="settings">
			<Text size="2">Edit your profile or update contact information.</Text>
		</Tabs.Content>
	</Box>
</Tabs.Root>

API 参考

¥API Reference

此组件继承了标签基础组件的属性并支持常用边距属性。

¥This component inherits props from the Tabs primitive and supports common margin props.

根

¥Root

包含所有组成部分。

¥Contains all component parts.

Prop	Type	Default
`asChild`	`boolean`	No default value

列表

¥List

包含与活动内容并排的触发器。

¥Contains the triggers that sit alongside the active content.

Prop	Type	Default
`size`	`Responsive<"1" \| "2">`	`"2"`
`wrap`	`Responsive<"nowrap" \| "wrap" \| "wrap-reverse">`	No default value
`justify`	`Responsive<"start" \| "center" \| "end">`	No default value
`color`	`enum`	No default value
`highContrast`	`boolean`	No default value

触发器

¥Trigger

激活其关联内容的按钮。

¥The button that activates its associated content.

内容

¥Content

包含与每个触发器关联的内容。

¥Contains the content associated with each trigger.

示例

¥Examples

尺寸

¥Size

使用 size 属性控制标签列表的大小。

¥Use the size prop to control the size of the tab list.

<Flex direction="column" gap="4" pb="2">
	<Tabs.Root defaultValue="account">
		<Tabs.List size="1">
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>

	<Tabs.Root defaultValue="account">
		<Tabs.List size="2">
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>
</Flex>

颜色

¥Color

使用 color 属性将特定的 color 分配给标签列表。

¥Use the color prop to assign a specific color to the tab list.

<Flex direction="column" gap="4" pb="2">
	<Tabs.Root defaultValue="account">
		<Tabs.List color="indigo">
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>

	<Tabs.Root defaultValue="account">
		<Tabs.List color="cyan">
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>

	<Tabs.Root defaultValue="account">
		<Tabs.List color="orange">
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>

	<Tabs.Root defaultValue="account">
		<Tabs.List color="crimson">
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>
</Flex>

高对比度

¥High-contrast

使用 highContrast 属性增加与背景的颜色对比度。

¥Use the highContrast prop to increase color contrast with the background.

<Flex direction="column" gap="4" pb="2">
	<Tabs.Root defaultValue="account">
		<Tabs.List color="gray">
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>

	<Tabs.Root defaultValue="account">
		<Tabs.List color="gray" highContrast>
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>
</Flex>

概览

主题

布局

排版

组件

实用工具

标签