可折叠

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

@peduarte 关注了 3 个仓库

@radix-ui/primitives

import React from 'react';
import * as Collapsible from '@radix-ui/react-collapsible';
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 * as Collapsible from '@radix-ui/react-collapsible';

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 * as Collapsible from '@radix-ui/react-collapsible';
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;
  }
}

无障碍

遵循披露 WAI-ARIA 设计模式.

键盘交互

键	描述
`空格`	打开/关闭可折叠。
`回车`	打开/关闭可折叠。

上一个复选框

下一个上下文菜单

在 GitHub 上编辑此页面。

概述

指南

组件

实用程序

可折叠

功能