我有一个角度扩展面板,如下所示.
但我想将箭头的设计改为这样的:
没有扩大:
扩展:
怎么样?或者我可以用棱角分明的材料吗?
代码如下:
HTML:
TS:
import {Component} from '@angular/core';
/**
* @title Basic expansion panel
*/
@Component({
selector: 'expansion-overview-example',templateUrl: 'expansion-overview-example.html',})
export class ExpansionOverviewExample {}
最佳答案
对的,这是可能的.为您的展开式面板提供参考ID,例如示例并将hideToggle属性设置为true.
在< md-panel-description>中,您可以放置图标并使用面板的展开属性来显示或隐藏相关图标.
要在图标和面板描述之间提供空间,请在component.css中添加以下类:
.custom-header .mat-expansion-panel-header-title,.custom-header .mat-expansion-panel-header-description {
flex-basis: 0;
}
.custom-header .mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}
我用过材料图标.您可以根据需要放置自定义图标.这是stackblitz demo的链接.