【Material UI】Accordion组件中的Expanded by default和Transition详解

Material UI 是目前最流行的 React UI框架之一，它提供了丰富的组件用于构建现代化的Web应用界面。其中，Accordion（手风琴）组件可以帮助我们有效地管理长内容的显示和隐藏。本文将深入探讨 Accordion 组件中的 Expanded by default 和 Transition 两个特性，帮助你更好地理解和使用这些功能。

一、Accordion组件概述

1. 组件简介

Accordion 组件通常用于显示可折叠的内容。当页面需要展示大量信息，但不希望一开始全部显示时，Accordion 是一个理想的选择。它允许用户点击某个标题来展开或折叠相关内容，从而提高页面的整洁性和用户体验。

2. Expanded by default 和 Transition 的作用

在 Accordion 组件中，Expanded by default 可以让某个手风琴项默认展开，而 Transition 则负责控制手风琴展开和收起时的过渡动画效果。这两个特性可以显著影响用户交互的体验感。

二、Expanded by default 属性详解

Expanded by default 是 Accordion 组件中的一个布尔属性，用于控制手风琴在初始渲染时是否默认处于展开状态。通常，手风琴内容在页面加载时是折叠的，但通过设置 defaultExpanded 属性为 true，可以让它在加载时直接展开。

1. 用法示例

以下代码展示了如何使用 defaultExpanded 属性使 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 AccordionExpandDefault() {
  return (
    <div>
      <Accordion defaultExpanded>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1-content"
          id="panel1-header"
        >
          <Typography>默认展开</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            这是一个默认展开的手风琴项。
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2-content"
          id="panel2-header"
        >
          <Typography>折叠状态</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            这是一个默认折叠的手风琴项。
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

在这个示例中，第一个 Accordion 通过 defaultExpanded 属性被设置为初始状态时展开，而第二个手风琴项则保持默认折叠。

2. 使用场景

• 信息优先展示：在一些场景中，某些内容可能需要被优先展示给用户，比如关键信息或重要的提醒。此时，我们可以使用 defaultExpanded 来让该部分内容默认展开，方便用户第一时间看到。
• 优化用户交互：对于长表单或多步操作，某些步骤的内容可以默认展开，而次要内容则保持折叠状态。这样既能保持页面整洁，又可以引导用户的操作流程。

三、Transition属性详解

Transition 属性控制 Accordion 组件在展开和折叠时的过渡动画效果。默认情况下，Material UI 使用 Collapse 组件来实现折叠效果，但你也可以通过自定义 Transition 属性来改变动画表现。

1. 自定义Transition示例

以下代码展示了如何使用 Fade 过渡效果替代默认的 Collapse 过渡效果：

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';
import Fade from '@mui/material/Fade';

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

  const handleExpansion = () => {
    setExpanded((prevExpanded) => !prevExpanded);
  };

  return (
    <div>
      <Accordion
        expanded={expanded}
        onChange={handleExpansion}
        slots={{ transition: Fade }}
        slotProps={{ transition: { timeout: 400 } }}
      >
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1-content"
          id="panel1-header"
        >
          <Typography>使用Fade过渡效果</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            这是一个自定义的过渡效果示例，使用Fade代替了默认的Collapse。
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2-content"
          id="panel2-header"
        >
          <Typography>默认的Collapse过渡效果</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            这是一个使用默认Collapse过渡效果的手风琴项。
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

在上面的代码中，slots 和 slotProps 属性允许你将 Fade 组件作为 Accordion 的过渡动画，并设置过渡的 timeout 为400毫秒。这样，你可以根据需求调整手风琴展开和折叠的动画效果。

2. 使用场景

• 创建平滑的用户体验：过渡效果不仅能够美化页面，还能让用户操作时的切换更加平滑，提升用户体验。通过设置合理的过渡时间，可以避免手风琴项展开或收起时产生突兀感。
• 自定义动画效果：不同的应用场景中可能需要不同的动画效果。比如在较为正式的企业应用中，Fade 这种简洁平滑的动画效果可能更符合设计需求，而在一些注重互动的网页中，你可以选择更加活跃的动画过渡效果。

四、总结

Material UI 的 Accordion 组件是一个非常强大的工具，能够帮助开发者在页面上高效管理信息展示。通过 Expanded by default 属性，你可以灵活控制手风琴的初始展开状态，确保关键内容在页面加载时即刻呈现。而通过自定义 Transition 过渡效果，你可以进一步增强用户的交互体验，使页面更加流畅和专业。

推荐：

• JavaScript
• react
• vue

---