React MUI AccordionSummary API

Material-UI是一个用户界面框架，为快速和简便的Web开发提供了预定义和可自定义的React组件。Material-UI组件基于Google的Material Design。在本文中，让我们讨论Material-UI库中的AccordionSummary API。

由MUI提供的AccordionSummary API ：当给出Accordion（Expansion Panel）组件的简要摘要时使用AccordionSummary API。

导入API：

import AccordionSummary from '@mui/material/AccordionSummary';
// or
import { AccordionSummary } from '@mui/material';

AccordionSummary的props：

• children : 它表示选择列表中表示项目的元素。
• classes : 它表示要覆盖默认样式的样式。
• expandIcon : 它表示要显示为展开指示符的图标。
• focusVisibleClassName : 它有助于确定哪个DOM元素具有键盘焦点。
• sx : 它表示一个系统属性，允许定义系统覆盖和额外的CSS样式。

创建React应用程序并安装模块：

步骤1： 使用以下命令创建一个React应用程序：

npx create-react-app foldername

步骤2： 创建项目文件夹，即文件夹名称，然后使用以下命令进入该文件夹：

cd foldername

步骤3： 创建ReactJS应用程序后，使用下面的命令安装所需模块：

npm install @mui/material

项目结构： 它将是以下的样子。

示例1： 在这个示例中，我们将尝试创建一个简单的应用程序，使用AccordionSummary组件为Accordion提供一个简要的摘要/标题。现在在App.js文件中写下以下代码。这里，App是我们的默认组件，我们在这里编写了我们的代码：

运行应用程序的步骤： 使用以下命令从项目的根目录运行应用程序：

npm start

App.js

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 SimpleAccordion() { 
    return ( 
        <div> 
            <Accordion> 
                <AccordionSummary 
                    expandIcon={<ExpandMoreIcon />} 
                    aria-controls="panel1a-content"
                    id="panel1a-header"
                > 
                    <Typography>Accordion 1</Typography> 
                </AccordionSummary> 
                <AccordionDetails> 
                    <Typography> 
                        Lorem ipsum dolor sit amet, consectetur adipiscing 
                        elit.  
                        Suspendisse 
                        malesuada lacus ex, sit amet blandit leo lobortis  
                        eget. 
                    </Typography> 
                </AccordionDetails> 
            </Accordion> 
            <Accordion> 
                <AccordionSummary 
                    expandIcon={<ExpandMoreIcon />} 
                    aria-controls="panel2a-content"
                    id="panel2a-header"
                > 
                    <Typography>Accordion 2</Typography> 
                </AccordionSummary> 
                <AccordionDetails> 
                    <Typography> 
                        Lorem ipsum dolor sit amet, consectetur adipiscing 
                        elit. Suspendisse 
                        malesuada lacus ex, sit amet blandit leo lobortis 
                        eget. 
                    </Typography> 
                </AccordionDetails> 
            </Accordion> 
        </div> 
    ); 
} 

运行应用的步骤： 从项目的根目录中使用以下命令运行应用程序：

npm start

输出:

示例2： 在这个示例中，让我们修改上面的代码，当使用键盘交互聚焦到 AccordionSummary 时，将其边框颜色改为红色。将你的 App.js 修改为以下代码。

App.js

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 ArrowForwardIosSharpIcon from '@mui/icons-material/ExpandMore'; 
import './App.css'
  
export default function SimpleAccordion() { 
    return ( 
        <div> 
            <Accordion> 
                <AccordionSummary 
                    expandIcon={<ArrowForwardIosSharpIcon />} 
                    aria-controls="panel1a-content"
                    id="panel1a-header"
                    focusVisibleClassName='focus'
                > 
                    <Typography>Accordion 1</Typography> 
                </AccordionSummary> 
                <AccordionDetails> 
                    <Typography> 
                        Lorem ipsum dolor sit amet, consectetur adipiscing  
                        elit. Suspendisse 
                        malesuada lacus ex, sit amet blandit leo lobortis 
                        eget. 
                    </Typography> 
                </AccordionDetails> 
            </Accordion> 
            <Accordion> 
                <AccordionSummary 
                    expandIcon={<ArrowForwardIosSharpIcon />} 
                    aria-controls="panel2a-content"
                    id="panel2a-header"
                    focusVisibleClassName='focus'
                > 
                    <Typography>Accordion 2</Typography> 
                </AccordionSummary> 
                <AccordionDetails> 
                    <Typography> 
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        Suspendisse 
                        malesuada lacus ex, sit amet blandit leo lobortis eget. 
                    </Typography> 
                </AccordionDetails> 
            </Accordion> 
        </div> 
    ); 
} 

App.css

.focus { 
    border: 2px solid red !important; 
}

运行应用程序的步骤： 从项目的根目录运行以下命令来运行应用程序：

npm start

输出：

参考: https://mui.com/material-ui/api/accordion-summary/