【Material-UI】Accordion 中的 Disabled item 和 Controlled Accordion 详解

Material-UI 是 React 生态系统中常用的 UI 框架，提供了丰富的组件来帮助开发者创建直观且功能强大的界面。本文将详细介绍 Material-UI 中的 Accordion 组件，着重讨论其 Disabled item 和 Controlled Accordion 的功能与实现方式。

一、Accordion 组件概述

1. 组件介绍

Accordion（手风琴）组件用于显示分组内容，每个分组的内容可通过点击标题来展开或折叠。这种组件在信息展示较多时尤为适用，因为它能帮助用户根据需求动态展开或收起特定部分。

2. 基本用法

Accordion 组件通常包含 AccordionSummary（标题部分）和 AccordionDetails（详细内容部分）。用户点击 AccordionSummary 后，AccordionDetails 中的内容会被展开或折叠。Material-UI 的 Accordion 组件允许开发者根据不同需求设置组件的行为，例如禁用交互或控制组件的展开状态。

二、Disabled Item 功能

1. 功能介绍

Disabled item 是 Accordion 组件的一个常见需求，通常用于暂时禁止用户与某些 Accordion 进行交互。通过 disabled 属性，可以轻松将某个 Accordion 项设置为不可点击的状态，从而限制用户的操作。

代码示例

以下代码展示了如何使用 disabled 属性禁用某个 Accordion 项：

import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

export default function DisabledAccordion() {
  return (
    <div>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1-content"
          id="panel1-header"
        >
          <Typography>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            这是第一个手风琴的内容，点击上方的标题可以展开或折叠。
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2-content"
          id="panel2-header"
        >
          <Typography>Accordion 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            这是第二个手风琴的内容，可以自由展开和折叠。
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion disabled>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel3-content"
          id="panel3-header"
        >
          <Typography>Disabled Accordion</Typography>
        </AccordionSummary>
      </Accordion>
    </div>
  );
}

代码解析

在上面的例子中，我们创建了三个 Accordion 项。其中，第三个 Accordion 项通过设置 disabled 属性被禁用。当用户点击 Disabled Accordion 的标题时，它不会展开或响应任何交互操作。通过这种方式，我们可以有效地控制用户对某些内容的访问。

2. 应用场景

Disabled item 的应用场景非常广泛，通常用于以下情况：

• 数据未加载完成：在异步数据尚未准备好时，禁用部分 Accordion 项可以避免用户提前查看无效内容。
• 权限控制：基于用户权限，禁用某些内容展示，仅允许特定用户组展开查看。
• 功能限制：临时关闭某些功能或模块，以确保系统的稳定性或在特定时段内限制用户操作。

三、Controlled Accordion 功能

1. 功能介绍

Controlled Accordion 是指通过外部状态来管理 Accordion 的展开或折叠行为。与其相对的 Uncontrolled Accordion 是通过自身的内部状态来管理展开与折叠。Controlled Accordion 提供了更多灵活性，允许开发者在外部精确控制每个 Accordion 项的展开状态。

代码示例

下面是一个 Controlled Accordion 的示例，通过外部状态来控制 Accordion 的展开：

import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

export default function ControlledAccordions() {
  const [expanded, setExpanded] = React.useState(false);

  const handleChange = (panel) => (event, isExpanded) => {
    setExpanded(isExpanded ? panel : false);
  };

  return (
    <div>
      <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1bh-content"
          id="panel1bh-header"
        >
          <Typography sx={{ width: '33%', flexShrink: 0 }}>
            General settings
          </Typography>
          <Typography sx={{ color: 'text.secondary' }}>I am an accordion</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            这是第一个手风琴项的详细内容，你可以通过点击标题展开或折叠它。
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2bh-content"
          id="panel2bh-header"
        >
          <Typography sx={{ width: '33%', flexShrink: 0 }}>Users</Typography>
          <Typography sx={{ color: 'text.secondary' }}>
            You are currently not an owner
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            这是第二个手风琴项的内容。你可以通过设置外部状态来控制其展开行为。
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

代码解析

在这个示例中，我们通过 React.useState 钩子来创建了一个 expanded 状态，并使用 handleChange 函数来管理 Accordion 的展开和折叠行为。当用户点击 Accordion 标题时，根据当前点击的状态决定是否展开或折叠对应的 Accordion 项。每个 Accordion 组件的 expanded 属性都被绑定到了外部状态 expanded，从而实现了外部控制的功能。

2. 应用场景

Controlled Accordion 可以用于多种场景，特别适合需要精确控制内容展示逻辑的情况下：

• 表单步骤：在多步骤表单中，Accordion 常用于展示当前步骤内容。通过 Controlled Accordion，我们可以确保用户只能展开当前步骤而无法跳过。
• 动态内容展示：有些页面的内容较多，通过 Controlled Accordion 可以根据用户的操作动态调整展示内容。
• 同步状态：通过外部状态管理，可以轻松与其他组件同步展示状态，从而实现更复杂的交互效果。

四、总结

Material-UI 的 Accordion 组件提供了丰富的功能来应对不同的场景需求。通过 disabled 属性，我们可以轻松实现特定项的禁用功能，限制用户的操作。而通过 Controlled Accordion，开发者可以精确控制每个 Accordion 项的展开状态，适用于需要外部状态管理的复杂场景。无论是静态页面还是动态交互，Accordion 组件都能够有效提升用户体验。

推荐：

• JavaScript
• react
• vue

---