UIStatsbar - adarshpastakia/aurelia-ui-framework GitHub Wiki

Statsbar

Usage
<ui-statsbar [bg | text] [vertical] [small]>
  <ui-stat [bg | text] label="" glyph="">Value</ui-stat>
  <ui-stat [bg | text] label="" glyph="">Value</ui-stat>
</ui-statsbar>
Attributes
  • Bg
    • light-bg
    • dark-bg
    • primary-bg
    • secondary-bg
    • info-bg
    • danger-bg
    • success-bg
    • warning-bg
  • Text
    • light
    • dark
    • muted
    • primary
    • secondary
    • info
    • danger
    • success
    • warning
Examples
  • Dark background with primary color text

    <ui-statsbar dark-bg primary>
      <ui-stat label="Users" glyph="icon-user">${98124 | number:'0.00a'}</ui-stat>
      <ui-stat label="Downloads" glyph="icon-download">${992364 | number:'0.00a'}</ui-stat>
    </ui-statsbar>
  • Light bg with individual colors

    <ui-statsbar light-bg>
      <ui-stat primary label="Users" glyph="icon-user">${98124 | number:'0.00a'}</ui-stat>
      <ui-stat secondary label="Downloads" glyph="icon-download">${992364 | number:'0.00a'}</ui-stat>
    </ui-statsbar>
  • Light text with individual backgrounds

    <ui-statsbar light>
      <ui-stat primary-bg label="Users" glyph="icon-user">${98124 | number:'0.00a'}</ui-stat>
      <ui-stat secondary-bg label="Downloads" glyph="icon-download">${992364 | number:'0.00a'}</ui-stat>
    </ui-statsbar>
⚠️ **GitHub.com Fallback** ⚠️