1.0.0 ⢠Published 2 years ago
battery-component v1.0.0
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:
Include the component script in your HTML file:
<script src="path-to-battery-component.js"></script>Place the
battery-componentin 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
- GitHub: Hemant-Agrawal
- LinkedIn: Connect on LinkedIn
- Website: https://hemant-agrawal.github.io/
- Email: ha.hemantagrawal@gmail.com
Feel free to reach out for collaboration, tech discussions, or just to say hello.
1.0.0
2 years ago