我将组件用于可折叠菜单,但图标对齐方式未正确对齐文本的右侧而不是左侧,任何人都可以建议如何解决此问题。
使用以下代码:
<mat-expansion-panel class="mxSubMenuContainer">
<mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px">
<md-icon class="mat-icon mat-list-icon material-icons">pages</md-icon>
<mat-panel-title>
Personal data
</mat-panel-title>
</mat-expansion-panel-header>
<a mat-list-item class="sidenav-link mat-list-item mat-ripple" >
<div class="mat-list-item-content">
<div class="mat-list-item-ripple mat-ripple" mat-ripple=""></div>
<md-icon class="mat-icon mat-list-icon material-icons">pages</md-icon>
<div class="mat-list-text">
<span class="title mat-line" md-line="">Pages</span>
</div>
</div>
</a>
</mat-expansion-panel>
预期用户界面
最佳答案
Material 2 Expansion 面板的容器默认使用 flexbox,所以我们需要使用 flexbox 方法来对齐内容,对于这种 'flex-basis' 是最好的方法。
例如,以这种方式覆盖组件中的 CSS:
mat-panel-title {
flex-basis: 0;
}
mat-panel-description {
flex-basis: 100%;
}
我创建了你问的例子:https://stackblitz.com/edit/angular-b8whsd?file=app%2Fexpansion-overview-example.css
关于angular - 垫扩展面板组件图标对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46835141/