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">
|
e619a3b0
 Luigi Serra
Controllet cross ...
|
12
13
|
<link rel="import" href="../iron-behaviors/iron-control-state.html">
<link rel="import" href="../iron-behaviors/iron-button-state.html">
|
|
73bcce88
luigser
COMPONENTS
|
14
|
<link rel="import" href="../paper-styles/paper-styles.html">
|
|
e619a3b0
Luigi Serra
Controllet cross ...
|
15
|
<link rel="import" href="paper-item-shared-styles.html">
|
|
73bcce88
luigser
COMPONENTS
|
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!--
`<paper-icon-item>` is a convenience element to make an item with icon. It is a non interactive list
item with a fixed-width icon area, according to Material Design. This is useful if the icons are of
varying widths, but you want the item bodies to line up. Use this like a `<paper-item>`. The child
node with the attribute `item-icon` is placed in the icon area.
<paper-icon-item>
<iron-icon icon="favorite" item-icon></iron-icon>
Favorite
</paper-icon-item>
<paper-icon-item>
<div class="avatar" item-icon></div>
Avatar
</paper-icon-item>
### Styling
The following custom properties and mixins are available for styling:
|
|
eb240478
Luigi Serra
public room cards...
|
36
37
38
39
40
41
42
43
44
45
|
Custom property | Description | Default
------------------------------|------------------------------------------------|----------
`--paper-item-icon-width` | Width of the icon area | `56px`
`--paper-icon-item` | Mixin applied to the item | `{}`
`--paper-item-selected-weight`| The font weight of a selected item | `bold`
`--paper-item-selected` | Mixin applied to selected paper-items | `{}`
`--paper-item-disabled-color` | The color for disabled paper-items | `--disabled-text-color`
`--paper-item-disabled` | Mixin applied to disabled paper-items | `{}`
`--paper-item-focused` | Mixin applied to focused paper-items | `{}`
`--paper-item-focused-before` | Mixin applied to :before focused paper-items | `{}`
|
|
73bcce88
luigser
COMPONENTS
|
46
47
48
49
|
-->
<dom-module id="paper-icon-item">
|
|
73bcce88
luigser
COMPONENTS
|
50
|
<template>
|
|
e619a3b0
Luigi Serra
Controllet cross ...
|
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<style include="paper-item-shared-styles"></style>
<style>
:host {
@apply(--layout-horizontal);
@apply(--layout-center);
@apply(--paper-font-subhead);
@apply(--paper-item);
@apply(--paper-icon-item);
}
.content-icon {
width: var(--paper-item-icon-width, 56px);
}
</style>
|
|
73bcce88
luigser
COMPONENTS
|
67
68
69
70
71
72
|
<div id="contentIcon" class="content-icon layout horizontal center">
<content select="[item-icon]"></content>
</div>
<content></content>
</template>
|
|
e619a3b0
Luigi Serra
Controllet cross ...
|
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<script>
Polymer({
is: 'paper-icon-item',
hostAttributes: {
'role': 'listitem',
'tabindex': '0'
},
behaviors: [
Polymer.IronControlState,
Polymer.IronButtonState
]
});
</script>
|
|
73bcce88
luigser
COMPONENTS
|
88
|
</dom-module>
|
