accordion 相关问题

在我的应用程序中，扩展箭头必须位于面板的左侧。但是，默认情况下它显示在右侧。这：在我的应用程序中，扩展箭头必须位于面板的左侧。但是，默认情况下它显示在右侧。这个： <ExpansionPanelSummary className={classes.panelSummary} expandIcon={<ExpandMoreIcon />} IconButtonProps={{edge: 'start'}} aria-controls='panel1a-content' id='panel1a-header' > 没成功。当然，您无法（轻松）更改组件在 HTML 中出现的顺序。然而，有一种方法只使用 CSS。 ExpansionPanelSummary 使用 display: flex；因此，您可以在图标上设置 order 属性，使其显示在内容的左侧。这可以通过 useStyles 或 withStyles 来实现（或者可能使用纯 CSS，但我还没有尝试过）；以下是您如何使用后者： import withStyles from "@material-ui/core/styles/withStyles"; const IconLeftExpansionPanelSummary = withStyles({ expandIcon: { order: -1 } })(ExpansionPanelSummary); 当您希望图标显示在左侧时，您可以使用 IconLeftExpansionPanelSummary 而不是 ExpansionPanelSummary 编写其余代码。不要忘记在组件上设置 IconButtonProps={{edge: 'start'}} 以确保适当的间距。 <AccordionSummary className={classes.accordionSummary} classes={{ expandIcon: classes.expandIcon, expanded: classes.expanded }} IconButtonProps={{ disableRipple: true }} ></AccordionSummary> 您可以添加类并使用flex-direction accordionSummary: { flexDirection: 'row-reverse' } 很简单像这样在<ExpansionPanelSummary>上添加课程 <ExpansionPanelSummary className={classes.panelSummary}> 像这样在jss中针对此类添加CSS panelSummary:{flexDirection: "row-reverse"}, 如果使用CSS 像这样在<ExpansionPanelSummary>上添加课程 <ExpansionPanelSummary className="panelSummary"> 像这样在jss中针对此类添加CSS .panelSummary{flex-direction: row-reverse;} 您可以通过从 ExpandIcon 中删除它来获取左侧的扩展面板图标，并将其添加为摘要中的子项，如下所示 <ExpansionPanel defaultExpanded={true}> <ExpansionPanelSummary aria-controls="panel1a-content"> {this.state.expanded ? <RemoveIcon/> : <ExpandIcon />} <Typography component='h4' variant='h4'>My Expansion Panel</Typography> </ExpansionPanelSummary> <ExpansionPanelsDetails /> </ExpansionPanel> 挑战在于订单被硬编码到代码库中，您将无法按原样使用 ExpansionPanel。如果你查看实现，你会发现代码如下 <div className={clsx(classes.content, { [classes.expanded]: expanded })}>{children}</div> {expandIcon && ( <IconButton disabled={disabled} className={clsx(classes.expandIcon, { [classes.expanded]: expanded, })} edge="end" component="div" tabIndex={-1} aria-hidden {...IconButtonProps} > {expandIcon} </IconButton> )} 如您所见，<div>包含文本，然后显示IconButton。因此，您可能必须使用开箱即用的内容，或者根据材料 UI 提供的内容创建自己的组件。希望有帮助。您可以像这样修改 CSS 类：注意绝对位置，这样您就可以使用“左”或“右”属性将包含图标的 div 移动到您想要的任何位置 const useStyles = makeStyles((theme) => ({ ExpansionPanelSummaryExpandedIcon: { '& div.MuiExpansionPanelSummary-expandIcon': { position: 'absolute', right: '5%', }, } })); 然后在 ExpansionPanelSummary 中使用 <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1-content" id="panel1bh-header" className={classes.ExpansionPanelSummaryExpandedIcon} > 参考资料： https://cssinjs.org/?v=v10.3.0 https://v4-8-3.material-ui.com/customization/components/#overriding-styles-with-classes 通过在 ExpansionPanelSummay 中设置 flexDirection: 'row-reverse' 我们可以通过以下方式实现相同的效果。 <Accordion> <ExpansionPanel> <ExpansionPanelSummary sx={{flexDirection: 'row-reverse'}}> // add here <Typography style={{marginLeft: '2rem'}}>Settlements</Typography> </ExpansionPanelSummary> <ExpansionPanelDetails> <Typography>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</Typography> </ExpansionPanelDetails> </ExpansionPanel> </Accordion>

javascript reactjs material-ui accordion

回答 7 投票 0

手风琴主体动态内容无法正常工作 - Angular + ngbAccordion

我有一个手风琴，它循环遍历数组，并根据条件动态加载手风琴体内的内容。项目=[ { 数据：'测试1'，物品： [] },{ 数据：'测试2'，项目：[...

angular accordion ng-bootstrap bootstrap-accordion

回答 1 投票 0

怎么办？单击手风琴项目 -> 滚动到活动项目的顶部

我创建了一个手风琴，目前一次只能打开一个面板。但是，当我单击它时，我无法让它滚动到面板的手风琴。我应该如何修改我的代码以单击...

javascript html scroll accordion bootstrap-accordion

回答 1 投票 0

我用html、css和js制作了一个手风琴。这个手风琴可以工作，但我的问题是它的动画

/*用按钮滚动*/ 让当前容器= 1；常量总容器= 4；函数scrollToContainer(containerIndex) { const container = document.getElementById(`box${containerIndex}`)...

javascript html css accordion

回答 1 投票 0

防止在 Bootstrap Accordion php 中循环相同的值

我想以手风琴形式显示数据。问题是，当代码运行时，手风琴会根据循环 foreach 中的行以多个方式显示。我想要的输出只是折叠 2 但代码的输出

php loops accordion

回答 0 投票 0

为什么我的 Bootstrap 手风琴在 Angular 应用程序中无法展开/折叠？

我使用 Bootstrap 创建了一个 Accordion Angular 组件。然而，折叠和扩展不起作用。我刚刚将引导代码复制到我的手风琴.component.html 我使用 Bootstrap 创建了一个 Accordion Angular 组件。然而，折叠和扩展不起作用。我刚刚将引导代码复制到我的 accordion.component.html <div class="accordion accordion-flush col-md-3" id="accordionFlushExample"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> Accordion Item #1 </button> </h2> <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo" disabled> Accordion Item #2 </button> </h2> <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree"> Accordion Item #3 </button> </h2> <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div> </div> </div> 当我检查页面时，我看到“[webpack-dev-server] 服务器已启动：热模块替换已禁用，实时重新加载已启用，进度已禁用，覆盖已启用。”我不确定这是否是折叠/展开不起作用的原因。如果是这样，我该如何解决这个问题？我检查了每个 div 的 id 并确保它们相符。我还在非 Angular html 文件上测试了它并且它有效。但是，我不确定为什么我的手风琴无法在我的 Angular 应用程序中工作。您可以将 NgBootstrap (https://ng-bootstrap.github.io/#/getting-started) 添加到您的 Angular 应用程序中并使用折叠组件 (https://ng-bootstrap.github.io/# /组件/手风琴/概述）

angular bootstrap-5 accordion

回答 1 投票 0

将手风琴与导航选项卡（Bootstrap）结合使用时出现切换问题

所以，我正在使用 Bootstrap 创建这个导航东西，它将以选项卡的形式出现在桌面上，而对于移动设备来说，它将是一个手风琴。快完成了，除了这个错误我......

javascript bootstrap-5 accordion bootstrap-accordion bootstrap-tabs

回答 0 投票 0

手风琴风格箭头不会在 aria-expanded true 上下降

我的 html 看起来像这样我的 html 看起来像这样 <div class="accordian-wrapper"> <div class="accordion-wrapper__title"> <div aria-expanded=true"> <div class="accordion-wrapper__title__icon-label"> <i class="accordion-wrapper__arrow"/> </div> </div> </div> </div> 如果 aria-expanded 为真，我需要将图标箭头向下移动我试过的 .accordion-wrapper { .accordion-wrapper__title { &[aria-expanded="true"]{ .accordion-wrapper__arrow { transform: rotate(90deg); } } } } 但它不起作用。我在这里做错了什么

css reactjs accordion

回答 0 投票 0

如何防止我的 JavaScript 手风琴将内容推到它上面？

我正在使用手风琴在我的网站上显示信息，但是当打开手风琴时，它会将上面的内容推上去。当手风琴打开时，它会上下传播，但我只想让它

javascript html css accordion

回答 0 投票 0

如何制作可点击的垂直手风琴？

我正在为我的硕士课程制作一个网站，我想制作一个垂直可点击的手风琴机制。 ideia 是单击每个部分，它会扩展更多信息。到目前为止，我已经

javascript html click accordion

回答 2 投票 0

如何在react,html,bootstrap中展开和折叠表格行？

我在创建滑动表时遇到问题，主要思想是当您单击按钮时，表格的一行将展开，其下方将是数据，就像手风琴一样。常数