battery-indicator-element
TypeScript icon, indicating that this package has built-in type declarations

1.1.6 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i battery-indicator-element

Weekly Downloads

6

Version

1.1.6

License

MIT

Unpacked Size

202 kB

Total Files

10

Last publish

Collaborators

  • adamvig