更改默认扩展面板箭头的箭头样式 [英] Change arrow style for default expansion panel arrow
问题描述
我有一个如下所示的角度扩展面板.
I have an angular expansion panel as shown below.
但是我想将箭头的设计更改为以下形式:
But I want to change the the design of the arrow to something like this:
未展开:
展开:
如何?还是我可以用棱角分明的材料来这样做? 下面的代码:
How? or is it possible for me to do so in angular material? Code below:
HTML:
<md-expansion-panel>
<md-expansion-panel-header>
<md-panel-title>
Personal data
</md-panel-title>
<md-panel-description>
Type your name and age
</md-panel-description>
</md-expansion-panel-header>
<md-form-field>
<input mdInput placeholder="First name">
</md-form-field>
<md-form-field>
<input mdInput placeholder="Age">
</md-form-field>
</md-expansion-panel>
TS:
import {Component} from '@angular/core';
/**
* @title Basic expansion panel
*/
@Component({
selector: 'expansion-overview-example',
templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}
推荐答案
是可以的.给您的扩展面板一个参考ID,例如example
并将hideToggle
属性设置为true
.
Yes it is possible. Give your expansion panel a reference id e.g. example
and set the hideToggle
property as true
.
在<md-panel-description>
中,您可以放置图标并使用面板的expanded
属性显示或隐藏相关图标.
In the <md-panel-description>
, you can place your icons and use the expanded
property of the panel to show or hide the relevant icons.
<md-expansion-panel class="custom-header" hideToggle="true" #example>
<md-expansion-panel-header>
<md-panel-title>
Personal data
</md-panel-title>
<md-panel-description>
Type your name and age
<md-icon *ngIf="!example.expanded">play_arrow</md-icon>
<md-icon *ngIf="example.expanded">arrow_drop_down</md-icon>
</md-panel-description>
</md-expansion-panel-header>
<md-form-field>
<input mdInput placeholder="First name">
</md-form-field>
<md-form-field>
<input mdInput placeholder="Age">
</md-form-field>
</md-expansion-panel>
要在图标和面板描述之间提供空间,请在component.css中添加以下类:
To provide space between the icon and panel description, add the following classes in your 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演示 .
I have used material icons. You can place your custom icons if you want. Here is a link to stackblitz demo.
这篇关于更改默认扩展面板箭头的箭头样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!