UIButton

Usage

• Simple button

  <ui-button theme size style glyph="ui-icon-edit" click.trigger="fn($event)">
    Button</ui-button>

  • Themes
    • light
    • dark
    • primary
    • secondary
    • info
    • danger
    • success
    • warning
  • Sizes
    • normal
    • big
    • small
  • Styles
    • round : Round sides
    • square : Equal padding all sides
    • icon-top : Place icon above label
  • Bindable Attributes
    • theme : Use theme.bind when button theme needs to be updated after attached
    • label : Use label.bind when button label needs to be updated after attached
    • value : Used for button group toggle
    • width
    • disabled
    • busy : show busy indicator

• Button with dropdown

  <ui-button glyph="ui-icon-picture" dropdown.bind="btnMenu">Click Me</ui-button>
  <ui-menu ref="btnMenu">
    <ui-menu-section>Actions</ui-menu-section>
    <ui-menu-item glyph="ui-icon-edit">Edit</ui-menu-item>
    <ui-menu-item glyph="ui-icon-trash">Delete</ui-menu-item>
    <ui-menu-section>Options</ui-menu-section>
    <ui-menu-item glyph="ui-icon-cog">Settings</ui-menu-item>
  </ui-menu>

• Button with dropdown form

  <ui-button glyph="ui-icon-key" form.bind="btnForm">Login</ui-button>
  <ui-form ref="btnForm" class="ui-pad-all">
    <ui-loader busy.bind="isSaving"></ui-loader>
    <ui-input-group>
      <ui-input-label>Username</ui-input-label>
      <ui-input width="12em"></ui-input>
    </ui-input-group>
    <ui-input-group>
      <ui-input-label>Password</ui-input-label>
      <ui-input password></ui-input>
    </ui-input-group>
    <div class="ui-text-end">
      <ui-button dark>Login</ui-button>
    </div>
  </ui-form>