|
100 | 100 | label="Enter your name" |
101 | 101 | label-for="basicName" |
102 | 102 | :label-cols="3" |
103 | | - :horizontal="true"> |
| 103 | + > |
104 | 104 | <b-form-input id="basicName" type="text" autocomplete="name"></b-form-input> |
105 | 105 | </b-form-group> |
106 | 106 | <b-form-group |
107 | 107 | label="Static" |
108 | 108 | label-for="basicStatic" |
109 | 109 | :label-cols="3" |
110 | | - :horizontal="true"> |
| 110 | + > |
111 | 111 | <b-form-input plaintext id="basicStatic" type="text" value="Username"></b-form-input> |
112 | 112 | </b-form-group> |
113 | 113 | <b-form-group |
114 | 114 | description="This is a help text" |
115 | 115 | label="Text Input" |
116 | 116 | label-for="basicText" |
117 | 117 | :label-cols="3" |
118 | | - :horizontal="true"> |
| 118 | + > |
119 | 119 | <b-form-input id="basicText" type="text" placeholder="Text"></b-form-input> |
120 | 120 | </b-form-group> |
121 | 121 | <b-form-group |
122 | 122 | label="Date" label-for="date" |
123 | 123 | :label-cols="3" |
124 | | - :horizontal="true"> |
| 124 | + > |
125 | 125 | <b-form-input type="date" id="date"></b-form-input> |
126 | 126 | </b-form-group> |
127 | 127 | <b-form-group |
128 | 128 | description="Please enter your email" |
129 | 129 | label="Email Input" |
130 | 130 | label-for="basicEmail" |
131 | 131 | :label-cols="3" |
132 | | - :horizontal="true"> |
| 132 | + > |
133 | 133 | <b-form-input id="basicEmail" type="email" placeholder="Enter your email" autocomplete="email"></b-form-input> |
134 | 134 | </b-form-group> |
135 | 135 | <b-form-group |
136 | 136 | description="Please enter a complex password" |
137 | 137 | label="Password Input" |
138 | 138 | label-for="basicPassword" |
139 | 139 | :label-cols="3" |
140 | | - :horizontal="true"> |
| 140 | + > |
141 | 141 | <b-form-input id="basicPassword" type="password" placeholder="Enter your password" autocomplete="current-password"></b-form-input> |
142 | 142 | </b-form-group> |
143 | 143 | <b-form-group |
144 | 144 | label="Disabled Input" |
145 | 145 | label-for="basicInputDisabled" |
146 | 146 | :label-cols="3" |
147 | | - :horizontal="true"> |
| 147 | + > |
148 | 148 | <b-form-input id="basicInputDisabled" type="text" :disabled="true" placeholder="Disabled"></b-form-input> |
149 | 149 | </b-form-group> |
150 | 150 | <b-form-group |
151 | 151 | label="Textarea" |
152 | 152 | label-for="basicTextarea" |
153 | 153 | :label-cols="3" |
154 | | - :horizontal="true"> |
| 154 | + > |
155 | 155 | <b-form-input id="basicTextarea" :textarea="true" :rows="9" placeholder="Content.."></b-form-input> |
156 | 156 | </b-form-group> |
157 | 157 | <b-form-group |
158 | 158 | label="Select" |
159 | 159 | label-for="basicSelect" |
160 | 160 | :label-cols="3" |
161 | | - :horizontal="true"> |
| 161 | + > |
162 | 162 | <b-form-select id="basicSelect" |
163 | 163 | :plain="true" |
164 | 164 | :options="['Please select','Option 1', 'Option 2', 'Option 3']" |
|
169 | 169 | label="Select large" |
170 | 170 | label-for="basicSelectLg" |
171 | 171 | :label-cols="3" |
172 | | - :horizontal="true"> |
| 172 | + > |
173 | 173 | <b-form-select id="basicSelectLg" |
174 | 174 | size="lg" |
175 | 175 | :plain="true" |
|
181 | 181 | label="Select small" |
182 | 182 | label-for="basicSelectSm" |
183 | 183 | :label-cols="3" |
184 | | - :horizontal="true"> |
| 184 | + > |
185 | 185 | <b-form-select id="basicSelectSm" |
186 | 186 | size="sm" |
187 | 187 | :plain="true" |
|
193 | 193 | label="Disabled select" |
194 | 194 | label-for="basicSelectDisabled" |
195 | 195 | :label-cols="3" |
196 | | - :horizontal="true"> |
| 196 | + > |
197 | 197 | <b-form-select id="basicSelectDisabled" |
198 | 198 | :plain="true" |
199 | 199 | :options="['Please select','Option 1', 'Option 2', 'Option 3']" |
|
205 | 205 | label="Select" |
206 | 206 | label-for="basicMultiSelect" |
207 | 207 | :label-cols="3" |
208 | | - :horizontal="true"> |
| 208 | + > |
209 | 209 | <b-form-select id="basicMultiSelect" |
210 | 210 | :plain="true" |
211 | 211 | :multiple="true" |
|
235 | 235 | label="Radios" |
236 | 236 | label-for="basicRadios" |
237 | 237 | :label-cols="3" |
238 | | - :horizontal="true"> |
| 238 | + > |
239 | 239 | <b-form-radio-group id="basicRadios" |
240 | 240 | :plain="true" |
241 | 241 | :options="[ |
|
251 | 251 | label="Inline radios" |
252 | 252 | label-for="basicInlineRadios" |
253 | 253 | :label-cols="3" |
254 | | - :horizontal="true"> |
| 254 | + > |
255 | 255 | <b-form-radio-group id="basicInlineRadios" |
256 | 256 | :plain="true" |
257 | 257 | :options="[ |
|
267 | 267 | label="Checkboxes" |
268 | 268 | label-for="basicCheckboxes" |
269 | 269 | :label-cols="3" |
270 | | - horizontal> |
| 270 | + > |
271 | 271 | <b-form-checkbox-group stacked id="basicCheckboxes" name="Checkboxes" :plain="true" :checked="[2,3]"> |
272 | 272 | <b-form-checkbox value="1">Option 1</b-form-checkbox> |
273 | 273 | <b-form-checkbox value="2">Option 2</b-form-checkbox> |
|
278 | 278 | label="Inline checkboxes" |
279 | 279 | label-for="basicInlineCheckboxes" |
280 | 280 | :label-cols="3" |
281 | | - :horizontal="true"> |
| 281 | + > |
282 | 282 | <b-form-checkbox-group id="basicInlineCheckboxes" name="InlineCheckboxes" :plain="true" :checked="[1,3]"> |
283 | 283 | <b-form-checkbox :plain="true" value="1">Option 1</b-form-checkbox> |
284 | 284 | <b-form-checkbox :plain="true" value="2">Option 2</b-form-checkbox> |
|
290 | 290 | label="Radios - custom" |
291 | 291 | label-for="basicRadiosCustom" |
292 | 292 | :label-cols="3" |
293 | | - :horizontal="true"> |
| 293 | + > |
294 | 294 | <b-form-radio-group |
295 | 295 | id="basicRadiosCustom" |
296 | 296 | value="1" |
|
313 | 313 | label="Inline radios - custom" |
314 | 314 | label-for="basicCustomRadios1" |
315 | 315 | :label-cols="3" |
316 | | - :horizontal="true"> |
| 316 | + > |
317 | 317 | <b-form-radio-group |
318 | 318 | id="basicCustomRadios1" |
319 | 319 | name="customRadioInline1"> |
|
335 | 335 | label="Checkboxes - custom" |
336 | 336 | label-for="basicCustomCheckboxes" |
337 | 337 | :label-cols="3" |
338 | | - :horizontal="true"> |
| 338 | + > |
339 | 339 | <b-form-checkbox-group stacked id="basicCustomCheckboxes"> |
340 | 340 | <div class="custom-control custom-checkbox"> |
341 | 341 | <input type="checkbox" class="custom-control-input" id="customChk1" value="1" checked> |
|
355 | 355 | label="Inline checkboxes - custom" |
356 | 356 | label-for="basicInlineCustomCheckboxes" |
357 | 357 | :label-cols="3" |
358 | | - :horizontal="true"> |
| 358 | + > |
359 | 359 | <b-form-checkbox-group id="basicInlineCustomCheckboxes"> |
360 | 360 | <div class="custom-control custom-checkbox custom-control-inline"> |
361 | 361 | <input type="checkbox" class="custom-control-input" id="customInChk1" value="1"> |
|
375 | 375 | label="File input" |
376 | 376 | label-for="fileInput" |
377 | 377 | :label-cols="3" |
378 | | - :horizontal="true"> |
| 378 | + > |
379 | 379 | <b-form-file id="fileInput" :plain="true"></b-form-file> |
380 | 380 | </b-form-group> |
381 | 381 | <b-form-group |
382 | 382 | label="Multiple file input" |
383 | 383 | label-for="fileInputMulti" |
384 | 384 | :label-cols="3" |
385 | | - :horizontal="true"> |
| 385 | + > |
386 | 386 | <b-form-file id="fileInputMulti" :plain="true" :multiple="true"></b-form-file> |
387 | 387 | </b-form-group> |
388 | 388 | <div slot="footer"> |
|
419 | 419 | label-for="horizEmail" |
420 | 420 | description="Please enter your email." |
421 | 421 | :label-cols="3" |
422 | | - :horizontal="true"> |
| 422 | + > |
423 | 423 | <b-form-input id="horizEmail" type="email" placeholder="Enter Email.." autocomplete="username email"></b-form-input> |
424 | 424 | </b-form-group> |
425 | 425 | <b-form-group |
426 | 426 | label="Password" |
427 | 427 | label-for="horizPass" |
428 | 428 | description="Please enter your password." |
429 | 429 | :label-cols="3" |
430 | | - :horizontal="true"> |
| 430 | + > |
431 | 431 | <b-form-input id="horizPass" type="password" placeholder="Enter Password.." autocomplete="current-password"></b-form-input> |
432 | 432 | </b-form-group> |
433 | 433 | <div slot="footer"> |
|
529 | 529 | label-for="smInput" |
530 | 530 | label-size="sm" |
531 | 531 | :label-cols="5" |
532 | | - :horizontal="true"> |
| 532 | + > |
533 | 533 | <b-form-input id="smInput" type="text" size="sm" placeholder="size='sm'"></b-form-input> |
534 | 534 | </b-form-group> |
535 | 535 | <b-form-group |
536 | 536 | label="Default input" |
537 | 537 | label-for="defaultInput" |
538 | 538 | :label-cols="5" |
539 | | - :horizontal="true"> |
| 539 | + > |
540 | 540 | <b-form-input id="defaultInput" type="text" placeholder="normal"></b-form-input> |
541 | 541 | </b-form-group> |
542 | 542 | <b-form-group |
543 | 543 | label="Large input" |
544 | 544 | label-for="lgInput" |
545 | 545 | label-size="lg" |
546 | 546 | :label-cols="5" |
547 | | - :horizontal="true"> |
| 547 | + > |
548 | 548 | <b-form-input id="lgInput" type="text" size="lg" placeholder="size='lg'"></b-form-input> |
549 | 549 | </b-form-group> |
550 | 550 | <div slot="footer"> |
|
608 | 608 | </b-col> |
609 | 609 | </b-row> |
610 | 610 | <b-row> |
611 | | - <b-col sm="4"> |
| 611 | + <b-col md="4"> |
612 | 612 | <b-card> |
613 | 613 | <div slot="header"> |
614 | 614 | <strong>Icon/Text</strong> Groups |
|
642 | 642 | </div> |
643 | 643 | </b-card> |
644 | 644 | </b-col> |
645 | | - <b-col sm="4"> |
| 645 | + <b-col md="4"> |
646 | 646 | <b-card> |
647 | 647 | <div slot="header"> |
648 | 648 | <strong>Buttons</strong> Groups |
|
686 | 686 | </div> |
687 | 687 | </b-card> |
688 | 688 | </b-col> |
689 | | - <b-col sm="4"> |
| 689 | + <b-col md="4" > |
690 | 690 | <b-card> |
691 | 691 | <div slot="header"> |
692 | 692 | <strong>Dropdowns</strong> Groups |
|
860 | 860 | </b-col> |
861 | 861 | </b-row> |
862 | 862 | <b-row> |
863 | | - <b-col sm="4"> |
| 863 | + <b-col md="4"> |
864 | 864 | <b-card> |
865 | 865 | <div slot="header"> |
866 | 866 | Example Form |
|
893 | 893 | </b-form> |
894 | 894 | </b-card> |
895 | 895 | </b-col> |
896 | | - <b-col sm="4"> |
| 896 | + <b-col md="4"> |
897 | 897 | <b-card> |
898 | 898 | <div slot="header"> |
899 | 899 | Example Form |
|
923 | 923 | </b-form> |
924 | 924 | </b-card> |
925 | 925 | </b-col> |
926 | | - <b-col sm="4"> |
| 926 | + <b-col md="4"> |
927 | 927 | <b-card> |
928 | 928 | <div slot="header"> |
929 | 929 | Example Form |
|
0 commit comments