SplitButton

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

Basic

With Action Icons

With Action Separator

With Click Event

Custom Style

Properties

tl-split-button

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

tl-split-button-action

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

Examples

Basic

With Action Icons

With Action Sepator

With Click Event

Custom Style

<tl-split-button
        [text]="'Button'"
        [buttonClass]="'buttonClass3'"
        [iconAddonBefore]="'ion-printer'"
        [buttonAddonBeforeClass]="'buttonAddonBeforeClass3'"
        [splitButtonClass]="'splitButtonClass3'"
        [actionMenuClass]="'actionMenuClass3'"
        [toggleClass]="'toggleClass3'">
      <tl-split-button-action [label]="'Action 1'" [separator]="true"></tl-split-button-action>
      <tl-split-button-action [label]="'Action 2'" [icon]="'fa fa-refresh'"></tl-split-button-action>
      <tl-split-button-action [label]="'Action 3'"></tl-split-button-action>
   </tl-split-button>

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

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

.buttonAddonBeforeClass3 {
     border-right: 1px solid #b9b900 !important;
   }

.splitButtonClass3, .actionMenuClass3 {
     background-color: #e0e000 !important;
     border-top: 1px solid #b9b900 !important;
     border-right: 1px solid #b9b900 !important;
     border-bottom: 1px solid #b9b900 !important;
   }

.splitButtonClass3:hover, .splitButtonClass3.ativo, .actionMenuClass3 li:hover {
     background-color: #d6d600 !important;
   }

.splitButtonClass3:active, .actionMenuClass3 li:active, .toggleClass3 {
     background-color: #d0d000 !important;
   }

.splitButtonClass3 i, .actionMenuClass3 li {
     color: #5d1b00 !important;
   }

.actionMenuClass3 li.separator {
     border-bottom: 1px solid #b9b900 !important;
   }
   </style>