battery-status-icon
A web component that autodetects and displays the current battery status as an icon. It uses Polymer 1.x and the new HTML5 Navigator.getBattery() API. Alternatively the battery level and charging status can also be set from the outside (e.g. in combination with Cordova and the battery plugin).
Install:
bower i battery-status-icon -S
Example:
<battery-status-icon></battery-status-icon>
<battery-status-icon level="33" charging></battery-status-icon>
<battery-status-icon level="15" show-label></battery-status-icon>
<battery-status-icon level="50" show-label label-position="top"></battery-status-icon>
<battery-status-icon level="66" color-levels></battery-status-icon>
<battery-status-icon autodetect show-label color-levels></battery-status-icon>Attributes:
| Attribute | Description | Default |
|---|---|---|
autodetect |
Auto detect battery level, rather than static input | false |
charging |
Detects if device is charging (Can be set manually) | false |
color-levels |
Change color depending on remaining battery level | false |
label-position |
Where the label should render (top, right, bottom, left) | right |
level |
Container for battery level value(Can be set manually) | NULL |
show-label |
Shows label on mouse over if true. | false |
Styling
The following custom properties are available for styling:
| Custom property | Description | Default |
|---|---|---|
--battery-icon-size |
Size of battery icon displayed. | 24px |
--battery-default-color |
Color of battery when colorLevels is false. | #323 |
--battery-high-color |
Color of battery when above 80%. | Green |
--battery-mid-color |
Color of battery when between 80% >< 20%. | Orange |
--battery-low-color |
Color battery when below 20%. | Red |
--battery-label-background |
Background color of tooltip label. | #616161 |
--battery-label-opacity |
Opacity level of tooltip label. | 0.9 |
--battery-label-text-color |
Text color of tooltip label | White |
--battery-icon-rotate |
Use rotate(x) to rotate the battery icon. Sample: --battery-icon-rotate: rotate(270deg); |
rotate(0deg) |
Style example:
<style>
.changing-example {
--battery-low-color: #D32F2F;
--battery-mid-color: #F57C00;
--battery-high-color: #388E3C;
--battery-icon-size: 48px;
--battery-label-background: #455A64;
--battery-label-opacity: 1;
--battery-label-text-color: #CFD8DC;
}
/* Battery Icon is rotated by 270° (left to right) */
.left-to-right {
--battery-icon-rotate: rotate(270deg);
}
/* Battery Icon is rotated by 90° (right to left) */
.right-to-left {
--battery-icon-rotate: rotate(90deg);
}
</style>
<battery-status-icon label-position="bottom" class="changing-example" level="0" color-levels
charging show-label></battery-status-icon>
<battery-status-icon class="left-to-right" autodetect show-label color-levels></battery-status-icon>
<battery-status-icon class="right-to-left" autodetect show-label color-levels></battery-status-icon>
