UNPKG

8.52 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="{{@root.prefix}}--form-item">
9 {{#if featureFlags.componentsX}}
10 <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
11 {{/if}}
12 <label for="dropdown-id" class="{{@root.prefix}}--label">Dropdown label</label>
13 {{#unless inline}}
14 <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
15 {{/unless}}
16 <ul data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value id="dropdown-id"
17 class="{{@root.prefix}}--dropdown {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}} {{#if inline}}{{@root.prefix}}--dropdown--inline{{/if}}"
18 tabindex="0">
19 <li class="{{@root.prefix}}--dropdown-text">
20 {{#unless inline}} Dropdown option {{else}}
21 <span class="{{@root.prefix}}--dropdown-text__inner">Inline Dropdown label</span>
22 {{/unless}}
23 {{#unless inline}}
24 </li>
25 <li class="{{@root.prefix}}--dropdown__arrow-container">
26 {{/unless}}
27 {{#if featureFlags.componentsX}}
28 {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
29 {{else}}
30 <svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
31 <path d="M10 0L5 5 0 0z"></path>
32 </svg>
33 {{/if}}
34 </li>
35 <li>
36 <ul class="{{@root.prefix}}--dropdown-list">
37 {{#each items}}
38 <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
39 <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1">{{label}}</a>
40 </li>
41 {{/each}}
42 </ul>
43 </li>
44 </ul>
45 {{#if featureFlags.componentsX}}
46 </div>
47 {{/if}}
48</div>
49
50{{#unless inline}}
51<div class="{{@root.prefix}}--form-item">
52 {{#if featureFlags.componentsX}}
53 <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
54 {{/if}}
55 <label for="dropdown-id-longer-helper-text" class="{{@root.prefix}}--label">Dropdown label</label>
56 <div class="{{@root.prefix}}--form__helper-text">Optional helper text here; if message is more than one line text
57 should wrap (~100 character count maximum)</div>
58 <ul data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value id="dropdown-id-longer-helper-text"
59 class="{{@root.prefix}}--dropdown {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}} {{#if inline}}{{@root.prefix}}--dropdown--inline{{/if}}"
60 tabindex="0">
61 <li class="{{@root.prefix}}--dropdown-text">
62 {{#unless inline}} Dropdown option {{else}}
63 <span class="{{@root.prefix}}--dropdown-text__inner">Inline Dropdown label</span>
64 {{/unless}}
65 {{#unless inline}}
66 </li>
67 <li class="{{@root.prefix}}--dropdown__arrow-container">
68 {{/unless}}
69 {{#if featureFlags.componentsX}}
70 {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
71 {{else}}
72 <svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
73 <path d="M10 0L5 5 0 0z"></path>
74 </svg>
75 {{/if}}
76 </li>
77 <li>
78 <ul class="{{@root.prefix}}--dropdown-list">
79 {{#each items}}
80 <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
81 <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1">{{label}}</a>
82 </li>
83 {{/each}}
84 </ul>
85 </li>
86 </ul>
87 {{#if featureFlags.componentsX}}
88 </div>
89 {{/if}}
90</div>
91{{/unless}}
92
93<div class="{{@root.prefix}}--form-item">
94 {{#if featureFlags.componentsX}}
95 <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
96 {{/if}}
97 <label for="dropdown-id-disabled" class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled">Dropdown
98 label</label>
99 {{#unless inline}}
100 <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">Optional helper text
101 here; if message is more than one line text
102 should wrap (~100 character count maximum)</div>
103 {{/unless}}
104 <ul data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value id="dropdown-id-disabled"
105 class="{{@root.prefix}}--dropdown{{#if up}} {{@root.prefix}}--dropdown--up{{/if}}{{#if light}} {{@root.prefix}}--dropdown--light{{/if}}{{#if inline}} {{@root.prefix}}--dropdown--inline{{/if}} {{@root.prefix}}--dropdown--disabled"
106 tabindex="0">
107 <li class="{{@root.prefix}}--dropdown-text">
108 {{#unless inline}} Dropdown option {{else}}
109 <span class="{{@root.prefix}}--dropdown-text__inner">Inline Dropdown label</span>
110 {{/unless}}
111 {{#unless inline}}
112 </li>
113 <li class="{{@root.prefix}}--dropdown__arrow-container">
114 {{/unless}}
115 {{#if featureFlags.componentsX}}
116 {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
117 {{else}}
118 <svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
119 <path d="M10 0L5 5 0 0z"></path>
120 </svg>
121 {{/if}}
122 </li>
123 <li>
124 <ul class="{{@root.prefix}}--dropdown-list">
125 {{#each items}}
126 <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
127 <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1">{{label}}</a>
128 </li>
129 {{/each}}
130 </ul>
131 </li>
132 </ul>
133 {{#if featureFlags.componentsX}}
134 </div>
135 {{/if}}
136</div>
137
138<div class="{{@root.prefix}}--form-item">
139 {{#if featureFlags.componentsX}}
140 <div
141 class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline {{@root.prefix}}--dropdown__wrapper--inline--invalid{{/if}}">
142 {{/if}}
143 <label for="dropdown-id-invalid" class="{{@root.prefix}}--label">Dropdown
144 label</label>
145 {{#unless inline}}
146 <div class="{{@root.prefix}}--form__helper-text">Optional helper text
147 here; if message is more than one line text
148 should wrap (~100 character count maximum)</div>
149 {{/unless}}
150 <ul data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value id="dropdown-id-invalid"
151 class="{{@root.prefix}}--dropdown {{@root.prefix}}--dropdown--invalid {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}}{{#if inline}} {{@root.prefix}}--dropdown--inline{{/if}}"
152 tabindex="0" data-invalid>
153 {{#if featureFlags.componentsX}}
154 {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--dropdown__invalid-icon')}}
155 {{/if}}
156 <li class="{{@root.prefix}}--dropdown-text">
157 {{#unless inline}} Dropdown option {{else}}
158 <span class="{{@root.prefix}}--dropdown-text__inner">Inline Dropdown label</span>
159 {{/unless}}
160 {{#unless inline}}
161 </li>
162 <li class="{{@root.prefix}}--dropdown__arrow-container">
163 {{/unless}}
164 {{#if featureFlags.componentsX}}
165 {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
166 {{else}}
167 <svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
168 <path d="M10 0L5 5 0 0z"></path>
169 </svg>
170 {{/if}}
171 </li>
172 <li>
173 <ul class="{{@root.prefix}}--dropdown-list">
174 {{#each items}}
175 <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
176 <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1">{{label}}</a>
177 </li>
178 {{/each}}
179 </ul>
180 </li>
181 </ul>
182 {{#if inline}}
183 <div class="{{@root.prefix}}--form-requirement">
184 This is not a validation message
185 </div>
186 {{/if}}
187 {{#if featureFlags.componentsX}}
188 </div>
189 {{/if}}
190 {{#unless inline}}
191 <div class="{{@root.prefix}}--form-requirement">
192 This is not a validation message
193 </div>
194 {{/unless}}
195</div>
196
\No newline at end of file