1.0.0 ā€¢ Published 6 months ago

battery-component v1.0.0

Weekly downloads
-
License
-
Repository
-
Last release
6 months ago

Battery Component

The battery-component is a custom web component that displays a battery icon along with battery-related information. This component is designed to visualize and present battery details with the help of customizable attributes.

Usage

To use the battery-component in your HTML document, follow these steps:

  1. Include the component script in your HTML file:

    <script src="path-to-battery-component.js"></script>
  2. Place the battery-component in your HTML:

    <battery-component
      hasBattery="true"
      cycleCount="0"
      isCharging="false"
      designedCapacity="66600"
      maxCapacity="46453"
      currentCapacity="30068"
      voltage="12.218"
      capacityUnit="mWh"
      percent="64"
      timeRemaining="null"
      acConnected="false"
      type="Unknown"
      model="ABC"
      manufacturer="XYZ"
      serial="SDF"
    ></battery-component>

Available Attributes

The battery-component accepts the following attributes to customize its appearance and display battery information:

  • hasBattery (boolean): Indicates whether there is a battery (true/false).
  • cycleCount (number): The battery cycle count.
  • isCharging (boolean): Indicates if the battery is charging (true/false).
  • designedCapacity (number): Designed battery capacity.
  • maxCapacity (number): Maximum battery capacity.
  • currentCapacity (number): Current battery capacity.
  • voltage (number): Battery voltage.
  • capacityUnit (string): Unit for capacity (e.g., "mWh").
  • percent (number): Battery percentage.
  • timeRemaining (string/number): Estimated time remaining (null for unknown).
  • acConnected (boolean): Indicates if the AC adapter is connected (true/false).
  • type (string): Battery type (e.g., "Unknown").
  • model (string): Battery model information.
  • manufacturer (string): Battery manufacturer information.
  • serial (string): Battery serial number.

Example

Here's an example of how to use the battery-component:

<battery-component
  hasBattery="true"
  cycleCount="0"
  isCharging="false"
  designedCapacity="66600"
  maxCapacity="46453"
  currentCapacity="30068"
  voltage="12.218"
  capacityUnit="mWh"
  percent="64"
  timeRemaining="null"
  acConnected="false"
  type="Unknown"
  model="DELL 6HY5983S"
  manufacturer="SANYO"
  serial="08EF"
></battery-component>

About the Author

šŸ‘‹ Hemant Agrawal

Get in Touch

Feel free to reach out for collaboration, tech discussions, or just to say hello.

1.0.0

6 months ago