PanelGroup Module Name: PanelGroupModule
Module Name: PanelGroupModule
Panels are used to organize components in the view.
Showcase
Basic Usage
<tl-panelgroup [backgroundColor]="'#fafafa'" [labelGroup]="'Register Fields'">
<tl-input [label]="'FirstName'"></tl-input>
<tl-input [label]="'LastName'"></tl-input>
<tl-input [label]="'Birthday'" [mask]="{mask: '00/00/0000'}"></tl-input>
<tl-input [label]="'Phone'" [mask]="{mask: '000-000-0000'}"></tl-input>
</tl-panelgroup>
Nested PanelGroups
<tl-panelgroup [labelGroup]="'Register Fields'">
<tl-input [label]="'FirstName'"></tl-input>
<tl-input [label]="'LastName'"></tl-input>
<tl-input [label]="'Birthday'" [mask]="{mask: '00/00/0000'}"></tl-input>
<tl-input [label]="'Phone'" [mask]="{mask: '000-000-0000'}"></tl-input>
<tl-panelgroup [labelGroup]="'Gender'">
<tl-radio-group [nameGroup]="'gender'">
<tl-radiobutton [label]="'Male'" [value]="'M'" [checked]="true"></tl-radiobutton>
<tl-radiobutton [label]="'Female'" [value]="'F'"></tl-radiobutton>
</tl-radio-group>
</tl-panelgroup>
</tl-panelgroup>
Properties
Name | Type | Default | Description | Options |
---|---|---|---|---|
backgroundColor | string | null | The background color of the PanelGroup | Hex | RGBA |
borderColor | string | null | Color of PanelGroup border | Hex | RGBA |
fontColorCaption | string | null | Font color of caption of the PanelGroup | Hex | RGBA |
fontSizeCaption | string | null | Font size of caption of the PanelGroup | px | % | em |
labelGroup | string | Panel Group | Label of PanelGroup | any text |
showButtonAction | boolean | false | Property that shows or not an action button after panel label | true | false |
width | string | 100% | Width of panel group. | px | % | em |
Events
Name | Description |
---|---|
buttonAction | Dispacthed when the button action is clicked. |