Button Group

There's a lot of ways to create a button group using Truly UI. Below, are some of those.

Basic

Returned Value: {{ itemSelected }}

Multiselect

Returned Value: {{ itemSelected2 }}

Basic With Preselection

Returned Value: {{ itemSelected3 }}

Multiselect With Preselection

Returned Value: {{ itemSelected4 }}

Custom Multiselect With Many Properties

Returned Value: {{ itemSelected5 }}

Properties

tl-button-group

Name	Type	Default	Description	Options
{{ item.name }}	{{ item.type }}	`{{ item.default }}`	{{ item.description }}	`{{ item.options }}`

tl-button-group-item

Name	Type	Default	Description	Options
{{ item.name }}	{{ item.type }}	`{{ item.default }}`	{{ item.description }}	`{{ item.options }}`

Examples

Basic

Multiselect

Basic With Preselection

Multiselect With Preselection

Custom Multiselect With Many Properties

<tl-button-group [multiSelect]="true"
                                                           (itemSelect)="showItemSelected5($event)">
          <tl-button-group-item [text]="'Button 1'" [buttonClass]="'buttonClass3'" [toggleClass]="'toggleClass3'">
          </tl-button-group-item>
          <tl-button-group-item [text]="'Button 2'" [checkedItem]="true" [buttonClass]="'buttonClass3'"
                                [toggleClass]="'toggleClass3'">
          </tl-button-group-item>
          <tl-button-group-item [text]="'Button 3'" [buttonClass]="'buttonClass3'" [toggleClass]="'toggleClass3'">
          </tl-button-group-item>
      </tl-button-group>

.buttonClass3:hover {
        background-color: #d6d600 !important;
      }

.buttonClass3:active {
        background-color: #d0d000 !important;
      }

.toggleClass3 {
        background-color: #d0d000 !important;
      }
      </style>