forked from jasongardnerlv/radium-combo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (107 loc) · 4.4 KB
/
index.html
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>radium-combo demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../radium-combo.html">
<style>body { font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; }</style>
<style is="custom-style">
#demo-container {
padding: 0px 2% !important;
height: 100%;
}
#config-container {
padding: 16px 2% !important;
background-color: #efefef;
margin-top: 48px
}
.example-title {
margin-top: 32px;
font-weight: bold;
font-size: 16px;
}
.example-selected {
font-style: italic;
font-size: 10px;
}
.example-col {
width: 48%;
display: inline-block;
vertical-align: top;
}
.event-label {
font-weight: bold;
font-size: 14px;
display: inline-block;
margin-top: 24px;
}
.event-string {
font-style: italic;
font-size: 10px;
display: inline-block;
padding-left: 16px;
line-height: 19px;
vertical-align: middle;
}
</style>
</head>
<body unresolved>
<template is="dom-bind" id="app">
<h2>radium-combo</h2>
<div id="demo-container">
<div class="example-col">
<div class="example-title">Select w/ empty option label</div>
<div class="example-selected">Selected - <span>[[_selected1.label]]</span></div>
<radium-combo options="[[_myoptions]]" value="{{_selected1}}" show-clear-button="[[_showClearButton]]"
empty-option-label="--unselect--" on-option-change="_optionSelected"></radium-combo>
<div class="example-title">Select w/ initial value</div>
<div class="example-selected">Selected - <span>[[_selected2.label]]</span></div>
<radium-combo options="[[_myoptions]]" value="{{_selected2}}" show-clear-button="[[_showClearButton]]"
on-option-change="_optionSelected"></radium-combo>
<div class="example-title">Select w/ no empty value (force selection)</div>
<div class="example-selected">Selected - <span>[[_selected3.label]]</span></div>
<radium-combo options="[[_myoptions]]" include-empty="false" value="{{_selected3}}" show-clear-button="[[_showClearButton]]"
on-option-change="_optionSelected"></radium-combo>
</div>
<div class="example-col" style="margin-left: 3%">
<div class="example-title">Disabled</div>
<div class="example-selected">Selected - <span>[[_selected4.label]]</span></div>
<radium-combo options="[[_myoptions]]" disabled value="{{_selected4}}" show-clear-button="[[_showClearButton]]"
on-option-change="_optionSelected"></radium-combo>
<div class="example-title">Typeahead</div>
<div class="example-selected">Selected - <span>[[_selected5.label]]</span></div>
<radium-combo options="[[_myoptions]]" type="typeahead" value="{{_selected5}}" show-clear-button="[[_showClearButton]]"
on-option-change="_optionSelected"></radium-combo>
<div class="example-title">Combobox</div>
<div class="example-selected">Selected - <span>[[_selected6.label]]</span></div>
<radium-combo options="[[_myoptions]]" type="combobox" value="{{_selected6}}" show-clear-button="[[_showClearButton]]"
on-option-change="_optionSelected"></radium-combo>
</div>
</div><br>
<div id="config-container">
<div>
<paper-toggle-button active="{{_showClearButton}}">Show Clear Button</paper-toggle-button>
</div>
<div class="event-label">Option Change Event:</div><div class="event-string">[[_lastEvent]]</div>
</div>
</template>
<script>
app._myoptions = [{label:'Joe', value:'1'}
, {label:'Steve', value:'2'}
, {label:'John', value:'3'}
, {label:'Mary', value:'4'}
, {label:'Sarah', value:'5'}
, {label:'Nancy', value:'6'}
];
//default selection for example #2
app._selected2 = app._myoptions[2];
app._optionSelected = function(e) {
app._lastEvent = JSON.stringify(e.detail);
}
</script>
</body>
</html>