Looking to customize the design of an angular expansion panel? Check out the images below for inspiration:
Before Customization:
https://i.sstatic.net/4u6NS.png
After Customization (Not expanded):
https://i.sstatic.net/8N6Br.png
After Customization (Expanded):
https://i.sstatic.net/EII3v.png
Wondering how to achieve this look using angular material?
Check out the code snippet 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 {}