73bcce88
luigser
COMPONENTS
|
1
2
3
4
5
6
7
8
9
10
11
|
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
|
73bcce88
luigser
COMPONENTS
|
12
|
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
eb240478
Luigi Serra
public room cards...
|
13
|
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
|
73bcce88
luigser
COMPONENTS
|
14
|
<link rel="import" href="../paper-styles/default-theme.html">
|
a1a3bc73
Luigi Serra
graphs updates
|
15
|
<link rel="import" href="../paper-styles/typography.html">
|
73bcce88
luigser
COMPONENTS
|
16
17
18
19
20
21
22
|
<!--
`<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.
|
a1a3bc73
Luigi Serra
graphs updates
|
23
24
25
26
27
28
|
Badges can also contain an icon by adding the `icon` attribute and setting
it to the id of the desired icon. Please note that you should still set the
`label` attribute in order to keep the element accessible. Also note that you will need to import
the `iron-iconset` that includes the icons you want to use. See [iron-icon](../iron-icon)
for more information on how to import and use icon sets.
|
73bcce88
luigser
COMPONENTS
|
29
30
31
32
33
34
35
36
|
Example:
<div style="display:inline-block">
<span>Inbox</span>
<paper-badge label="3"></paper-badge>
</div>
<div>
|
eb240478
Luigi Serra
public room cards...
|
37
|
<paper-button id="btn">Status</paper-button>
|
a1a3bc73
Luigi Serra
graphs updates
|
38
39
40
41
42
43
|
<paper-badge icon="favorite" for="btn" label="favorite icon"></paper-badge>
</div>
<div>
<paper-icon-button id="account-box" icon="account-box" alt="account-box"></paper-icon-button>
<paper-badge icon="social:mood" for="account-box" label="mood icon"></paper-badge>
|
73bcce88
luigser
COMPONENTS
|
44
45
46
47
48
49
50
51
52
53
54
|
</div>
### 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`
|
a1a3bc73
Luigi Serra
graphs updates
|
55
56
|
`--paper-badge-width` | The width of the badge circle | `20px`
`--paper-badge-height` | The height of the badge circle | `20px`
|
73bcce88
luigser
COMPONENTS
|
57
|
`--paper-badge-margin-left` | Optional spacing added to the left of the badge. | `0px`
|
a1a3bc73
Luigi Serra
graphs updates
|
58
|
`--paper-badge-margin-bottom` | Optional spacing added to the bottom of the badge. | `0px`
|
73bcce88
luigser
COMPONENTS
|
59
60
61
62
63
64
65
66
|
`--paper-badge` | Mixin applied to the badge | `{}`
@group Paper Elements
@element paper-badge
@demo demo/index.html
-->
<dom-module id="paper-badge">
|
73bcce88
luigser
COMPONENTS
|
67
|
<template>
|
eb240478
Luigi Serra
public room cards...
|
68
69
70
71
72
73
74
|
<style>
:host {
display: block;
position: absolute;
outline: none;
}
|
a1a3bc73
Luigi Serra
graphs updates
|
75
76
77
78
79
80
81
82
|
iron-icon {
--iron-icon-width: 12px;
--iron-icon-height: 12px;
}
.badge {
@apply(--layout);
@apply(--layout-center-center);
|
eb240478
Luigi Serra
public room cards...
|
83
|
@apply(--paper-font-common-base);
|
a1a3bc73
Luigi Serra
graphs updates
|
84
85
86
|
font-weight: normal;
font-size: 11px;
|
eb240478
Luigi Serra
public room cards...
|
87
88
89
|
border-radius: 50%;
margin-left: var(--paper-badge-margin-left, 0px);
margin-bottom: var(--paper-badge-margin-bottom, 0px);
|
a1a3bc73
Luigi Serra
graphs updates
|
90
91
|
width: var(--paper-badge-width, 20px);
height: var(--paper-badge-height, 20px);
|
eb240478
Luigi Serra
public room cards...
|
92
93
94
|
background-color: var(--paper-badge-background, --accent-color);
opacity: var(--paper-badge-opacity, 1.0);
color: var(--paper-badge-text-color, white);
|
eb240478
Luigi Serra
public room cards...
|
95
96
97
98
99
|
@apply(--paper-badge);
}
</style>
|
a1a3bc73
Luigi Serra
graphs updates
|
100
101
102
103
|
<div class="badge">
<iron-icon hidden$="{{!_computeIsIconBadge(icon)}}" icon="{{icon}}"></iron-icon>
<span id="badge-text" hidden$="{{_computeIsIconBadge(icon)}}">{{label}}</span>
</div>
|
73bcce88
luigser
COMPONENTS
|
104
|
</template>
|
eb240478
Luigi Serra
public room cards...
|
105
|
|
73bcce88
luigser
COMPONENTS
|
106
107
108
109
|
<script>
Polymer({
is: 'paper-badge',
|
eb240478
Luigi Serra
public room cards...
|
110
111
112
113
114
|
hostAttributes: {
tabindex: '0',
role: 'status'
},
|
73bcce88
luigser
COMPONENTS
|
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
behaviors: [
Polymer.IronResizableBehavior
],
listeners: {
'iron-resize': 'updatePosition'
},
properties: {
/**
* The id of the element that the badge is anchored to. This element
* must be a sibling of the badge.
*/
for: {
type: String,
observer: '_forChanged'
},
/**
* The label displayed in the badge. The label is centered, and ideally
* should have very few characters.
*/
label: {
|
eb240478
Luigi Serra
public room cards...
|
138
139
|
type: String,
observer: '_labelChanged'
|
a1a3bc73
Luigi Serra
graphs updates
|
140
141
142
143
144
145
146
147
148
149
150
|
},
/**
* An iron-icon ID. When given, the badge content will use an
* `<iron-icon>` element displaying the given icon ID rather than the
* label text. However, the label text will still be used for
* accessibility purposes.
*/
icon: {
type: String,
value: ''
|
73bcce88
luigser
COMPONENTS
|
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
}
},
attached: function() {
this._updateTarget();
},
_forChanged: function() {
// The first time the property is set is before the badge is attached,
// which means we're not ready to position it yet.
if (!this.isAttached) {
return;
}
this._updateTarget();
},
|
eb240478
Luigi Serra
public room cards...
|
167
168
169
170
|
_labelChanged: function() {
this.setAttribute('aria-label', this.label);
},
|
73bcce88
luigser
COMPONENTS
|
171
172
173
174
175
|
_updateTarget: function() {
this._target = this.target;
this.async(this.notifyResize, 1);
},
|
a1a3bc73
Luigi Serra
graphs updates
|
176
177
178
179
|
_computeIsIconBadge: function(icon) {
return icon.length > 0;
},
|
73bcce88
luigser
COMPONENTS
|
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
|
/**
* Returns the target element that this badge is anchored to. It is
* either the element given by the `for` attribute, or the immediate parent
* of the badge.
*/
get target () {
var parentNode = Polymer.dom(this).parentNode;
// If the parentNode is a document fragment, then we need to use the host.
var ownerRoot = Polymer.dom(this).getOwnerRoot();
var target;
if (this.for) {
target = Polymer.dom(ownerRoot).querySelector('#' + this.for);
} else {
target = parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE ?
ownerRoot.host : parentNode;
}
return target;
},
/**
* Repositions the badge relative to its anchor element. This is called
* automatically when the badge is attached or an `iron-resize` event is
* fired (for exmaple if the window has resized, or your target is a
* custom element that implements IronResizableBehavior).
*
* You should call this in all other cases when the achor's position
* might have changed (for example, if it's visibility has changed, or
* you've manually done a page re-layout).
*/
updatePosition: function() {
if (!this._target)
return;
if (!this.offsetParent)
return;
var parentRect = this.offsetParent.getBoundingClientRect();
var targetRect = this._target.getBoundingClientRect();
var thisRect = this.getBoundingClientRect();
this.style.left = targetRect.left - parentRect.left +
(targetRect.width - thisRect.width / 2) + 'px';
this.style.top = targetRect.top - parentRect.top -
(thisRect.height / 2) + 'px';
}
})
</script>
</dom-module>
|