paper-badge.html
7.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
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
<!--
@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">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../paper-styles/typography.html">
<!--
`<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.
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.
Example:
<div style="display:inline-block">
<span>Inbox</span>
<paper-badge label="3"></paper-badge>
</div>
<div>
<paper-button id="btn">Status</paper-button>
<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>
</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`
`--paper-badge-width` | The width of the badge circle | `20px`
`--paper-badge-height` | The height of the badge circle | `20px`
`--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 | `{}`
@group Paper Elements
@element paper-badge
@demo demo/index.html
-->
<dom-module id="paper-badge">
<template>
<style>
:host {
display: block;
position: absolute;
outline: none;
}
iron-icon {
--iron-icon-width: 12px;
--iron-icon-height: 12px;
}
.badge {
@apply(--layout);
@apply(--layout-center-center);
@apply(--paper-font-common-base);
font-weight: normal;
font-size: 11px;
border-radius: 50%;
margin-left: var(--paper-badge-margin-left, 0px);
margin-bottom: var(--paper-badge-margin-bottom, 0px);
width: var(--paper-badge-width, 20px);
height: var(--paper-badge-height, 20px);
background-color: var(--paper-badge-background, --accent-color);
opacity: var(--paper-badge-opacity, 1.0);
color: var(--paper-badge-text-color, white);
@apply(--paper-badge);
}
</style>
<div class="badge">
<iron-icon hidden$="{{!_computeIsIconBadge(icon)}}" icon="{{icon}}"></iron-icon>
<span id="badge-text" hidden$="{{_computeIsIconBadge(icon)}}">{{label}}</span>
</div>
</template>
<script>
Polymer({
is: 'paper-badge',
hostAttributes: {
tabindex: '0',
role: 'status'
},
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: {
type: String,
observer: '_labelChanged'
},
/**
* 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: ''
}
},
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();
},
_labelChanged: function() {
this.setAttribute('aria-label', this.label);
},
_updateTarget: function() {
this._target = this.target;
this.async(this.notifyResize, 1);
},
_computeIsIconBadge: function(icon) {
return icon.length > 0;
},
/**
* 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>