PanelGroup Module Name: PanelGroupModule

Module Name: PanelGroupModule

Panels are used to organize components in the view.

Showcase
Basic Usage
Register Fields
FirstName
LastName
Birthday
Phone
<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
Register Fields
FirstName
LastName
Birthday
Phone
Gender
<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
NameTypeDefaultDescriptionOptions
backgroundColorstringnullThe background color of the PanelGroup Hex | RGBA
borderColorstringnullColor of PanelGroup border Hex | RGBA
fontColorCaptionstringnullFont color of caption of the PanelGroup Hex | RGBA
fontSizeCaptionstringnullFont size of caption of the PanelGroup px | % | em
labelGroupstringPanel GroupLabel of PanelGroup any text
showButtonActionbooleanfalseProperty that shows or not an action button after panel label true | false
widthstring100%Width of panel group. px | % | em
Events
NameDescription
buttonActionDispacthed when the button action is clicked.