c5169e0e
Renato De Donato
a new hope
|
1
|
# paper-badge
|
73bcce88
luigser
COMPONENTS
|
2
3
4
5
6
7
|
`<paper-badge>` is a circular text badge that is displayed on the top right
corner of an element, representing a status or a notification. It will badge
the anchor element specified in the `for` attribute, or, if that doesn't exist,
centered to the parent node containing it.
|
73bcce88
luigser
COMPONENTS
|
8
9
10
11
12
13
|
Example:
<div style="display:inline-block">
<span>Inbox</span>
<paper-badge label="3"></paper-badge>
</div>
|
73bcce88
luigser
COMPONENTS
|
14
|
<div>
|
eb240478
Luigi Serra
public room cards...
|
15
|
<paper-button id="btn">Status</paper-button>
|
c5169e0e
Renato De Donato
a new hope
|
16
|
<paper-badge for="btn" label="♥︎"></paper-badge>
|
73bcce88
luigser
COMPONENTS
|
17
|
</div>
|
c5169e0e
Renato De Donato
a new hope
|
18
19
|
|
73bcce88
luigser
COMPONENTS
|
20
21
22
23
24
25
26
27
28
|
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-badge-background` | The background color of the badge | `--accent-color`
`--paper-badge-opacity` | The opacity of the badge | `1.0`
`--paper-badge-text-color` | The color of the badge text | `white`
|
c5169e0e
Renato De Donato
a new hope
|
29
30
|
`--paper-badge-width` | The width of the badge circle | `22px`
`--paper-badge-height` | The height of the badge circle | `22px`
|
73bcce88
luigser
COMPONENTS
|
31
32
33
|
`--paper-badge-margin-left` | Optional spacing added to the left of the badge. | `0px`
`--paper-badge-margin-bottom` | Optional spacing added to the bottom of the badge. | `0px`
`--paper-badge` | Mixin applied to the badge | `{}`
|