UNPKG

9.21 kBtext/x-handlebars-templateView Raw
1<!--
2 Copyright IBM Corp. 2016, 2018
3
4 This source code is licensed under the Apache-2.0 license found in the
5 LICENSE file in the root directory of this source tree.
6-->
7
8<div class="{{prefix}}--form-item">
9 <label for="time-picker-1" class="{{prefix}}--label">Select a time</label>
10 <div class="{{prefix}}--time-picker">
11 <div class="{{prefix}}--time-picker__input">
12 <input id="time-picker-1" type="text" class="{{prefix}}--text-input {{prefix}}--time-picker__input-field"
13 pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)" placeholder="hh:mm" maxlength="5" />
14 </div>
15 <div
16 class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
17 <label for="select-id-1" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
18 <select id="select-id-1" class="{{prefix}}--select-input">
19 <option class="{{prefix}}--select-option" value="AM">AM</option>
20 <option class="{{prefix}}--select-option" value="PM">PM</option>
21 </select>
22 {{#if componentsX}}
23 {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
24 {{else}}
25 <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
26 <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
27 </svg>
28 {{/if}}
29 </div>
30 <div
31 class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
32 <label for="select-id-2" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
33 zone</label>
34 <select id="select-id-2" class="{{prefix}}--select-input">
35 <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
36 <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
37 <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
38 </select>
39 {{#if componentsX}}
40 {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
41 {{else}}
42 <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
43 <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
44 </svg>
45 {{/if}}
46 </div>
47 </div>
48</div>
49<div class="{{prefix}}--form-item">
50 <label for="time-picker-2" class="{{prefix}}--label">Select a time</label>
51 <div class="{{prefix}}--time-picker" data-invalid>
52 <div class="{{prefix}}--time-picker__input">
53 <input id="time-picker-2" type="text" class="{{prefix}}--text-input {{prefix}}--time-picker__input-field"
54 pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)" placeholder="hh:mm" maxlength="5" />
55 {{#unless componentsX}}
56 <div class="{{prefix}}--form-requirement">
57 Invalid time.
58 </div>
59 {{/unless}}
60 </div>
61 <div
62 class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
63 <label for="select-id-3" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
64 <select id="select-id-3" class="{{prefix}}--select-input">
65 <option class="{{prefix}}--select-option" value="AM">AM</option>
66 <option class="{{prefix}}--select-option" value="PM">PM</option>
67 </select>
68 {{#if componentsX}}
69 {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
70 {{else}}
71 <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
72 <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
73 </svg>
74 {{/if}}
75 </div>
76 <div
77 class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
78 <label for="select-id-4" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
79 zone</label>
80 <select id="select-id-4" class="{{prefix}}--select-input">
81 <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
82 <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
83 <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
84 </select>
85 {{#if componentsX}}
86 {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
87 {{else}}
88 <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
89 <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
90 </svg>
91 {{/if}}
92 </div>
93 </div>
94 {{#if componentsX}}
95 <div class="{{prefix}}--form-requirement">
96 Invalid time.
97 </div>
98 {{/if}}
99</div>
100<div class="{{prefix}}--form-item">
101 <label for="time-picker-3" class="{{prefix}}--label {{prefix}}--label--disabled">Select a time</label>
102 <div class="{{prefix}}--time-picker">
103 <div class="{{prefix}}--time-picker__input">
104 <input id="time-picker-3" type="text" class="{{prefix}}--text-input {{prefix}}--time-picker__input-field"
105 pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)" placeholder="hh:mm" maxlength="5" disabled />
106 </div>
107 <div
108 class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
109 <label for="select-id-5" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
110 <select id="select-id-5" class="{{prefix}}--select-input" disabled>
111 <option class="{{prefix}}--select-option" value="AM">AM</option>
112 <option class="{{prefix}}--select-option" value="PM">PM</option>
113 </select>
114 {{#if componentsX}}
115 {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
116 {{else}}
117 <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
118 <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
119 </svg>
120 {{/if}}
121 </div>
122 <div
123 class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
124 <label for="select-id-6" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
125 zone</label>
126 <select id="select-id-6" class="{{prefix}}--select-input" disabled>
127 <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
128 <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
129 <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
130 </select>
131 {{#if componentsX}}
132 {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
133 {{else}}
134 <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
135 <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
136 </svg>
137 {{/if}}
138 </div>
139 </div>
140</div>
141<div class="{{prefix}}--form-item">
142 <label for="time-picker-4" class="{{prefix}}--label {{prefix}}--label--disabled">Select a time</label>
143 <div class="{{prefix}}--time-picker" data-invalid>
144 <div class="{{prefix}}--time-picker__input">
145 <input id="time-picker-4" type="text" class="{{prefix}}--text-input {{prefix}}--time-picker__input-field"
146 pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)" placeholder="hh:mm" maxlength="5" disabled />
147 {{#unless componentsX}}
148 <div class="{{prefix}}--form-requirement">
149 Invalid time.
150 </div>
151 {{/unless}}
152 </div>
153 <div
154 class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
155 <label for="select-id-7" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
156 <select id="select-id-7" class="{{prefix}}--select-input" disabled>
157 <option class="{{prefix}}--select-option" value="AM">AM</option>
158 <option class="{{prefix}}--select-option" value="PM">PM</option>
159 </select>
160 {{#if componentsX}}
161 {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
162 {{else}}
163 <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
164 <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
165 </svg>
166 {{/if}}
167 </div>
168 <div
169 class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
170 <label for="select-id-8" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
171 zone</label>
172 <select id="select-id-8" class="{{prefix}}--select-input" disabled>
173 <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
174 <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
175 <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
176 </select>
177 {{#if componentsX}}
178 {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
179 {{else}}
180 <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
181 <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
182 </svg>
183 {{/if}}
184 </div>
185 </div>
186 {{#if componentsX}}
187 <div class="{{prefix}}--form-requirement">
188 Invalid time.
189 </div>
190 {{/if}}
191</div>
192
\No newline at end of file