Blame view

bower_components/paper-badge/README.md 1.26 KB
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 | `{}`