更改默认扩展面板箭头的箭头样式 [英] 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
.
在
中,您可以放置图标并使用面板的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演示<的链接/strong>.
I have used material icons. You can place your custom icons if you want. Here is a link to stackblitz demo.
这篇关于更改默认扩展面板箭头的箭头样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!