折叠面板

一个可展开/折叠面板的交互式组件。

@peduarte 收藏了 3 个仓库

@radix-ui/primitives

import * as React from "react";
import { Collapsible } from "radix-ui";
import { RowSpacingIcon, Cross2Icon } from "@radix-ui/react-icons";
import "./styles.css";

const CollapsibleDemo = () => {
	const [open, setOpen] = React.useState(false);
	return (
		<Collapsible.Root
			className="CollapsibleRoot"
			open={open}
			onOpenChange={setOpen}
		>
			<div
				style={{
					display: "flex",
					alignItems: "center",
					justifyContent: "space-between",
				}}
			>
				<span className="Text" style={{ color: "white" }}>
					@peduarte starred 3 repositories
				</span>
				<Collapsible.Trigger asChild>
					<button className="IconButton">
						{open ? <Cross2Icon /> : <RowSpacingIcon />}
					</button>
				</Collapsible.Trigger>
			</div>

			<div className="Repository">
				<span className="Text">@radix-ui/primitives</span>
			</div>

			<Collapsible.Content>
				<div className="Repository">
					<span className="Text">@radix-ui/colors</span>
				</div>
				<div className="Repository">
					<span className="Text">@radix-ui/themes</span>
				</div>
			</Collapsible.Content>
		</Collapsible.Root>
	);
};

export default CollapsibleDemo;

特性

完整的键盘导航。

可控制或非控制。

安装

从命令行安装组件。

npm install @radix-ui/react-collapsible

解剖结构

导入组件并将各部分组合在一起。

import { Collapsible } from "radix-ui";

export default () => (
	<Collapsible.Root>
		<Collapsible.Trigger />
		<Collapsible.Content />
	</Collapsible.Root>
);

API 参考

根元素

包含折叠面板的所有部分。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`defaultOpen`	`布尔值`	无默认值
`open`	`布尔值`	无默认值
`onOpenChange`	`函数`	无默认值
`disabled`	`布尔值`	无默认值

数据属性	值
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	禁用时显示

触发器

用于切换折叠面板的按钮。

属性	类型	默认值
`asChild`	`布尔值`	`false`

数据属性	值
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	禁用时显示

内容

包含折叠面板内容的组件。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`forceMount`	`布尔值`	无默认值

数据属性	值
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	禁用时显示

CSS 变量	描述
`--radix-collapsible-content-width`	内容在打开/关闭时的宽度
`--radix-collapsible-content-height`	内容在打开/关闭时的高度

示例

内容尺寸动画

使用 --radix-collapsible-content-width 和/或 --radix-collapsible-content-height CSS 变量在内容打开/关闭时为其尺寸添加动画效果。这是一个演示

// index.jsx
import { Collapsible } from "radix-ui";
import "./styles.css";

export default () => (
	<Collapsible.Root>
		<Collapsible.Trigger>…</Collapsible.Trigger>
		<Collapsible.Content className="CollapsibleContent">
			…
		</Collapsible.Content>
	</Collapsible.Root>
);

/* styles.css */
.CollapsibleContent {
	overflow: hidden;
}
.CollapsibleContent[data-state="open"] {
	animation: slideDown 300ms ease-out;
}
.CollapsibleContent[data-state="closed"] {
	animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
	from {
		height: 0;
	}
	to {
		height: var(--radix-collapsible-content-height);
	}
}

@keyframes slideUp {
	from {
		height: var(--radix-collapsible-content-height);
	}
	to {
		height: 0;
	}
}

可访问性

遵循 Disclosure WAI-ARIA 设计模式。

键盘交互

按键	描述
`空格键`	打开/关闭折叠面板。
`Enter 键`	打开/关闭折叠面板。

上一篇复选框

下一篇上下文菜单

在 GitHub 上编辑此页。

概述

指南

组件

实用工具

折叠面板

特性