plumes/features/buttons/html/pl-button-indicator.html

Flying-fast Metro future vision components

<button class="pl-button-indicator {{cls}} {{showMessage ? 'opened' : ''}}" on-click="action">
  <div class="pl-button-indicator-bg {{showMessage ? 'accent-bg' : ''}}"></div>
  <div class="pl-button-indicator-image {{opened ? 'hide' : ''}}" style="background-image: url('{{image}}');" />
  {{#notificationPicture}}
    <img class="pl-button-indicator-notification-picture" src="{{notificationPicture}}" />
  {{/notificationPicture}}
  <p class="pl-button-indicator-notification-message">{{{notificationMessage}}}</p>
  <div class="pl-button-indicator-number accent-bg {{notificationsCount ? 'showed' : ''}}">
    {{notificationsCount > 99 ? '99+' : notificationsCount}}
  </div>
</button>