10个React-accessible-accordion实战案例：从FAQ到复杂折叠面板

【免费下载链接】react-accessible-accordion Accessible Accordion component for React 项目地址: https://gitcode.com/gh_mirrors/re/react-accessible-accordion

React-accessible-accordion是一个专为React应用设计的无障碍折叠面板组件，它不仅提供了流畅的折叠交互体验，还确保了符合WCAG标准的无障碍支持。本文将通过10个实用案例，展示如何利用这个强大的组件库构建从简单FAQ到复杂数据展示的各种界面。

1. 基础FAQ折叠面板实现

最常见的应用场景就是FAQ页面，使用默认配置即可快速实现一个基本的折叠面板：

import {
    Accordion,
    AccordionItem,
    AccordionItemButton,
    AccordionItemHeading,
    AccordionItemPanel,
} from 'react-accessible-accordion';

<Accordion>
    {items.map((item) => (
        <AccordionItem key={item.uuid}>
            <AccordionItemHeading>
                <AccordionItemButton>
                    {item.heading}
                </AccordionItemButton>
            </AccordionItemHeading>
            <AccordionItemPanel>
              {item.content}
            </AccordionItemPanel>
        </AccordionItem>
    ))}
</Accordion>

这个基础实现已经包含了键盘导航、ARIA属性和焦点管理等无障碍特性，无需额外配置。

2. 允许多个面板同时展开

默认情况下，accordion只允许一个面板展开。通过allowMultipleExpanded属性可以修改这一行为，实现类似手风琴的多面板展开效果：

<Accordion allowMultipleExpanded>
    {items.map((item) => (
        <AccordionItem key={item.uuid}>
            <AccordionItemHeading>
                <AccordionItemButton>
                    {item.heading}
                </AccordionItemButton>
            </AccordionItemHeading>
            <AccordionItemPanel>
              {item.content}
            </AccordionItemPanel>
        </AccordionItem>
    ))}
</Accordion>

这在需要同时查看多个相关内容区域时特别有用，比如产品特性比较或详细的步骤说明。

3. 强制至少一个面板展开

与允许多个面板展开相反，有时我们需要确保至少有一个面板保持展开状态，这可以通过allowMultipleExpanded={false}来实现：

<Accordion allowMultipleExpanded={false}>
    {items.map((item) => (
        <AccordionItem key={item.uuid}>
            <AccordionItemHeading>
                <AccordionItemButton>
                    {item.heading}
                </AccordionItemButton>
            </AccordionItemHeading>
            <AccordionItemPanel>
              {item.content}
            </AccordionItemPanel>
        </AccordionItem>
    ))}
</Accordion>

这种配置适用于必须展示至少一项核心内容的场景，如条款说明或重要通知。

4. 允许所有面板折叠

如果希望用户可以折叠所有面板，只需要添加allowZeroExpanded属性：

<Accordion allowZeroExpanded>
    {items.map((item) => (
        <AccordionItem key={item.uuid}>
            <AccordionItemHeading>
                <AccordionItemButton>
                    {item.heading}
                </AccordionItemButton>
            </AccordionItemHeading>
            <AccordionItemPanel>
              {item.content}
            </AccordionItemPanel>
        </AccordionItem>
    ))}
</Accordion>

这个特性在内容密度较高的页面中非常实用，允许用户根据需要最小化内容区域。

5. 默认展开指定面板

通过preExpanded属性可以设置初始加载时展开的面板，传递一个包含面板uuid的数组即可：

<Accordion preExpanded={['a', 'c']}>
  <AccordionItem uuid="a" /> // Will be expanded by default
  <AccordionItem uuid="b" />
  <AccordionItem uuid="c" /> // Will be expanded by default
  <AccordionItem uuid="d" />
</Accordion>

这在需要突出显示特定内容或引导用户关注重要信息时特别有用。

6. 监听面板展开/折叠事件

利用onChange回调可以在面板状态变化时执行自定义逻辑，如记录用户交互或触发其他UI更新：

<Accordion onChange={() => console.log('Hello world')}>
    {items.map((item) => (
        <AccordionItem key={item.uuid}>
            <AccordionItemHeading>
                <AccordionItemButton>
                    {item.heading}
                </AccordionItemButton>
            </AccordionItemHeading>
            <AccordionItemPanel>
              {item.content}
            </AccordionItemPanel>
        </AccordionItem>
    ))}
</Accordion>

实际应用中，你可以在这里添加数据统计、状态更新或其他副作用处理。

7. 显示面板展开状态

通过AccordionItemState组件可以访问当前面板的展开状态，从而动态调整UI：

<Accordion>
    <AccordionItem>
        <AccordionItemHeading>
            <AccordionItemButton>
                This item is
                <AccordionItemState>
                    {({ expanded }) => (expanded ? 'expanded' : 'collapsed')}
                </AccordionItemState>
            </AccordionItemButton>
        </AccordionItemHeading>
        <AccordionItemPanel>
          <p>I am the content</p>
        </AccordionItemPanel>
    </AccordionItem>
</Accordion>

这个功能可以用来显示展开/折叠图标，或者根据状态调整按钮文本。

8. 程序化控制面板状态

使用dangerouslySetExpanded属性可以完全控制面板的展开状态，这在需要外部控制时非常有用：

<Accordion>
    {items.map((item, i) => {
        const isExpanded = i < 2;

        return (
            <AccordionItem
                key={item.heading}
                uuid={item.uuid}
                dangerouslySetExpanded={isExpanded}
            >
                <AccordionItemHeading>
                    <AccordionItemButton>
                        {item.heading}
                    </AccordionItemButton>
                </AccordionItemHeading>
                <AccordionItemPanel>
                    {item.panel}
                </AccordionItemPanel>
            </AccordionItem>
        );
    })}
</Accordion>

例如，你可以根据用户角色、滚动位置或其他应用状态来动态设置面板是否展开。

9. 嵌套折叠面板实现

React-accessible-accordion支持嵌套使用，可以创建复杂的层级结构：

<Accordion allowMultipleExpanded>
  <AccordionItem uuid="parent">
    <AccordionItemHeading>
      <AccordionItemButton>Parent Item</AccordionItemButton>
    </AccordionItemHeading>
    <AccordionItemPanel>
      <Accordion>
        <AccordionItem uuid="child1">
          <AccordionItemHeading>
            <AccordionItemButton>Child Item 1</AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>Child content 1</AccordionItemPanel>
        </AccordionItem>
        <AccordionItem uuid="child2">
          <AccordionItemHeading>
            <AccordionItemButton>Child Item 2</AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>Child content 2</AccordionItemPanel>
        </AccordionItem>
      </Accordion>
    </AccordionItemPanel>
  </AccordionItem>
</Accordion>

这种结构非常适合展示具有层级关系的数据，如目录、分类系统或复杂表单。

10. 自定义样式与动画效果

虽然react-accessible-accordion本身不提供样式，但你可以轻松地为其添加自定义CSS来实现独特的视觉效果：

/* 基础样式 */
.accordion__item {
  border: 1px solid #e0e0e0;
  margin-bottom: 8px;
  border-radius: 4px;
}

/* 标题样式 */
.accordion__heading {
  margin: 0;
}

/* 按钮样式 */
.accordion__button {
  background-color: #f5f5f5;
  color: #333;
  cursor: pointer;
  padding: 16px;
  width: 100%;
  text-align: left;
  border: none;
  font-size: 16px;
  transition: background-color 0.3s;
}

.accordion__button:hover {
  background-color: #e9e9e9;
}

/* 内容面板样式 */
.accordion__panel {
  padding: 0 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

/* 展开状态样式 */
.accordion__item--expanded .accordion__panel {
  padding: 16px;
  max-height: 500px;
}

通过添加过渡效果和状态类，你可以创建平滑的展开/折叠动画，提升用户体验。

如何开始使用React-accessible-accordion

要在你的项目中使用React-accessible-accordion，首先需要安装该包：

npm install react-accessible-accordion
# 或者
yarn add react-accessible-accordion

然后在你的组件中导入所需的组件：

import {
  Accordion,
  AccordionItem,
  AccordionItemButton,
  AccordionItemHeading,
  AccordionItemPanel,
} from 'react-accessible-accordion';

所有核心组件都在src/components/目录下维护，你可以查看源代码了解更多实现细节。

总结

React-accessible-accordion提供了灵活而强大的折叠面板解决方案，通过本文介绍的10个案例，你可以看到它能够满足从简单到复杂的各种应用场景。无论是构建FAQ页面、产品特性展示，还是复杂的数据层级结构，这个组件库都能帮助你快速实现既美观又无障碍的交互体验。

记住，良好的无障碍设计不仅能帮助有特殊需求的用户，还能提升所有用户的体验和产品的整体质量。React-accessible-accordion让实现这一目标变得简单而高效！

【免费下载链接】react-accessible-accordion Accessible Accordion component for React 项目地址: https://gitcode.com/gh_mirrors/re/react-accessible-accordion