Skip to content

Commit

Permalink
Updated to reflect recent changes
Browse files Browse the repository at this point in the history
Also added attribute list
  • Loading branch information
Link2Twenty committed Mar 17, 2016
1 parent 02d16b3 commit 0f03f6a
Showing 1 changed file with 42 additions and 8 deletions.
50 changes: 42 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,54 @@ bower i battery-status-icon -S
<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`

![Preview](https://raw.githubusercontent.com/Protoss78/battery-status-icon/master/preview.png)

### Styling

The following custom properties are available for 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`

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`
__Style example:__

This part of the code needs to be within your head tags, or imported as part of your app-theme.html

```html
<style is="custom-style">
:root {
--battery-default-color: #455A64;
--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;
}
</style>
```

0 comments on commit 0f03f6a

Please sign in to comment.