Skip to content

thomasconner/battery-indicator-element

 
 

Repository files navigation

Battery Indicator Element

Battery status indicator custom element.

  • Uses LitElement, a lightweight class that extends HTMLElement.

Usage

<battery-indicator percentage="85"></<battery-indicator>

Theming

Example
battery-indicator {
  width: 48px;
  height: 48px;
  --charge-fill: #000;
  --charge-fill-opacity: 1.0;
  --background-fill: #000;
  --background-fill-opacity: 0.3;
  --status-fill: #fff;
  --status-fill-opacity: 1.0;
}
Available Variables
variable name default description
--charge-fill #000 Fill color of area that represents charge.
--charge-fill-opacity 1.0 Opacity of area that represents charge.
--background-fill #000 Fill color of background.
--background-fill-opacity 0.3 Opacity of background.
--status-fill #fff Fill color of status icon (unknown, alert, charging).
--status-fill-opacity 1.0 Opacity of status icon (unknown, alert, charging).
--percentage-font-size 16px Font size of the percentage.
--percentage-color #000 Color of the percentage.

Browser Support

This element requires ES2015 language features and the following browser APIs:

Development

  1. npm ci
  2. npm start
  3. http://localhost:8080

To Do

  • Make status scale to fill container with percentage
  • Add test suite

About

Battery status indicator custom element.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 45.6%
  • HTML 32.6%
  • JavaScript 21.8%