Material Angular Accordion标题/标题高度
Ale*_*Sim 20 angular-material angular-material2 angular
所以我一直在尝试在我的Web应用程序开发中采用Materials Accordion.
然而,随着内容的增长,使标题扩大的麻烦有些麻烦.
我的标题预计将有相当多的行来提供摘要,而不仅仅是1个班轮.
如果我硬编码材质标题高度,它会导致动画干扰.
下面是一个示例代码
<mat-accordion [displayMode]="displayMode" [multi]="multi" class="mat-expansion-demo-width">
<mat-expansion-panel #panel1 [hideToggle]="hideToggle">
<mat-expansion-panel-header>Section 1</mat-expansion-panel-header>
<p>This is the content text that makes sense here.</p>
</mat-expansion-panel>
</mat-accordion>
::ng-deep .mat-expansion-panel-header
{
height: 190px !important;
}
如果我执行上述操作,则会设置高度,但展开和折叠的动画会很奇怪.
我该怎么办呢？
Fai*_*sal 53
你不必使用::ng-deep.您可以使用[collapsedHeight]和[expandedHeight]你的mat-expansion-panel-header.
<mat-accordion [displayMode]="displayMode" [multi]="multi" class="mat-expansion-demo-width">
<mat-expansion-panel #panel1 [hideToggle]="hideToggle">
<mat-expansion-panel-header [collapsedHeight]="'190px'" [expandedHeight]="'190px'">
Section 1
</mat-expansion-panel-header>
<p>This is the content text that makes sense here.</p>
</mat-expansion-panel>
</mat-accordion>
链接到StackBlitz演示.
- 谢谢 ！完美的作品！ (2认同)
- 如果每个标题的文本行有所不同，则可以传入空字符串，它将自动折叠到文本的高度。例如：`[collapsedHeight] =“''” [expandedHeight] =“''”`。然后，您可以根据需要向“ mat-expansion-panel-header”添加填充。这对我在材料5.2.4中有效。 (2认同)
- 只是为了在这里挑剔，您实际上不必用大括号 [] 包围这些属性，因为您没有将属性绑定到变量或表达式。你可以只做collapsedHeight =“190px”。另外，我喜欢 cs_pupil 的解决方案，因为它将高度卸载到 css （在我看来应该在哪里）而不是 ts。 (2认同)
For*_*stG 15
截至今天使用Material 7.0.2,如果您希望标题遵循一些通用height:auto规则,则此修复高度可能不是您的解决方案.(例如,在响应情况下遵循标题中文本的大小)
在这些情况下,在css中定义自动高度要好得多:
mat-expansion-panel {
mat-expansion-panel-header {
height: auto!important;
}
}
并定义
<mat-expansion-panel-header collapsedHeight="*" expandedHeight="*">
如https://github.com/angular/material2/pull/9313中所述
- 这是创建动态 mat-expansion-panel-header 的最优雅的方法，但根据我的经验， `collapsedHeight="*" ExpandedHeight="*"` 不是必需的。 (4认同)
- 这应该是正确的答案:) 它为线条提供了根据需要增长的灵活性。 (3认同)
- 绝对是解决问题的首选方法。我还可以确认，到目前为止（Angular 11.0.5 和 Angular Material 11.0.3） `collapsedHeight` `expandedHeight` 和 `!important` 属性根本不是必需的。所以，最后。`.mat-expansion-panel-header { height: auto;}` 就足够了。我还会添加一些“padding-bottom”和“padding-top”以使其更干净。 (2认同)
Mat*_*tis 13
这就是对我有用的东西，没有 css 只是将 thowe 添加到 mat-expansion-panel-header
<mat-expansion-panel-header [collapsedHeight]="'auto'" [expandedHeight]="'auto'">
- 这是正确的答案，尽管应该通过 CSS 添加 12px 的顶部/底部填充，以保持标题的填充，这是以前通过固定高度实现的。 (2认同)
添加通用选项/设置以设置应用程序中所有面板的高度：
MatExpansionPanelDefaultOptions
import { NgModule } from '@angular/core';
import { MAT_EXPANSION_PANEL_DEFAULT_OPTIONS } from '@angular/material';
@NgModule({
providers: [
{
provide: MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
useValue: {
hideToggle: true,
expandedHeight: '50px',
collapsedHeight: '50px'
}
}
]
})
export class AppMaterialModule {}