Collapse 折叠面板

用于常见问题解答、手风琴和可展开部分的可折叠内容面板。

引入

import { Collapse } from 'asterui'

示例

基本折叠

简单的可折叠面板。

</>

What is AsterUI?

AsterUI is a React component library built on DaisyUI and Tailwind CSS.

How do I install it?

Run npm install asterui to get started.

Is it free?

Yes, AsterUI is open source and free to use.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'What is AsterUI?',
      children: 'AsterUI is a React component library built on DaisyUI and Tailwind CSS.',
    },
    {
      key: '2',
      label: 'How do I install it?',
      children: 'Run npm install asterui to get started.',
    },
    {
      key: '3',
      label: 'Is it free?',
      children: 'Yes, AsterUI is open source and free to use.',
    },
  ]
  
  return (
      <Collapse items={items} defaultActiveKey={['1']} />
    )
}

export default App

手风琴

一次只能打开一个面板。

</>

Section 1

Content for section 1. Click another section to close this one.

Section 2

Content for section 2. Only one section can be open.

Section 3

Content for section 3. This is accordion behavior.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Section 1',
      children: 'Content for section 1. Click another section to close this one.',
    },
    {
      key: '2',
      label: 'Section 2',
      children: 'Content for section 2. Only one section can be open.',
    },
    {
      key: '3',
      label: 'Section 3',
      children: 'Content for section 3. This is accordion behavior.',
    },
  ]
  
  return (
      <Collapse items={items} accordion defaultActiveKey="1" />
    )
}

export default App

无边框

没有边框的折叠。

</>

Panel 1

Content without borders for a cleaner look.

Panel 2

Great for FAQ sections or sidebars.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Panel 1',
      children: 'Content without borders for a cleaner look.',
    },
    {
      key: '2',
      label: 'Panel 2',
      children: 'Great for FAQ sections or sidebars.',
    },
  ]
  
  return (
      <Collapse items={items} bordered={false} />
    )
}

export default App

嵌套内容

带丰富嵌套内容的折叠。

</>

Getting Started

Follow these steps to get started:

1. Install the package
2. Import components
3. Start building

Read Docs

Advanced Usage

Learn about advanced patterns and customization options.

import { Collapse, Button, Space } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Getting Started',
      children: (
        <Space direction="vertical" size="sm">
          <p>Follow these steps to get started:</p>
          <ol className="list-decimal list-inside">
            <li>Install the package</li>
            <li>Import components</li>
            <li>Start building</li>
          </ol>
          <Button color="primary" size="sm">Read Docs</Button>
        </Space>
      ),
    },
    {
      key: '2',
      label: 'Advanced Usage',
      children: 'Learn about advanced patterns and customization options.',
    },
  ]
  
  return (
      <Collapse items={items} />
    )
}

export default App

幽灵模式

透明背景以获得简约外观。

</>

Transparent Background

Ghost mode removes the background color.

Clean Look

Great for minimalist designs.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Transparent Background',
      children: 'Ghost mode removes the background color.',
    },
    {
      key: '2',
      label: 'Clean Look',
      children: 'Great for minimalist designs.',
    },
  ]
  
  return (
      <Collapse items={items} ghost bordered={false} />
    )
}

export default App

加减图标

使用加减图标代替箭头。

</>

Plus/Minus Icon

This panel uses plus/minus icons instead of arrows.

Another Panel

Click the plus icon to expand.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Plus/Minus Icon',
      children: 'This panel uses plus/minus icons instead of arrows.',
    },
    {
      key: '2',
      label: 'Another Panel',
      children: 'Click the plus icon to expand.',
    },
  ]
  
  return (
      <Collapse items={items} icon="plus" />
    )
}

export default App

API

Collapse

属性	描述	类型	默认值
items	折叠面板项	CollapseItemType[]	-
activeKey	受控的激活面板键	string | number | (string | number)[]	-
defaultActiveKey	初始激活面板键	string | number | (string | number)[]	-
accordion	一次只打开一个面板	boolean	false
bordered	在面板周围显示边框	boolean	true
ghost	透明背景样式	boolean	false
size	尺寸变体	'sm' | 'md' | 'lg'	'md'
icon	展开指示器的图标类型	'arrow' | 'plus' | 'none'	'arrow'
expandIconPlacement	图标位置	'start' | 'end'	'start'
onChange	改变处理函数	(activeKey: (string | number)[]) => void	-
data-testid	组件的测试 ID	string	'collapse'
className	额外的 CSS 类名	string	-

CollapseItemType

属性	描述	类型	默认值
key	面板的唯一标识符	string | number	-
label	面板标题内容	React.ReactNode	-
children	面板主体内容	React.ReactNode	-
extra	标题角落的额外元素	React.ReactNode	-
showArrow	是否显示展开图标	boolean	true
collapsible	可折叠模式	'header' | 'icon' | 'disabled'	-
className	此面板的自定义类名	string	-

无障碍

• 面板标题可通过 Enter 和 Space 键访问
• 使用 aria-expanded 指示面板状态
• 对禁用面板使用 aria-disabled
• 面板公开 data-state 用于测试和样式