.row
.col-12
.row
.col-3.p-4
h3 Input
input.form-control(type="text", placeholder="Placeholder")
.col-3.p-4
h3 Input Disabled
input.form-control(type="text", placeholder="Placeholder", disabled)
.col-3.p-4
h3 Input With Icon
input.form-control.input-search(type="text", placeholder="Placeholder")
.col-3.p-4
h3 Input With Icon Disabled
input.form-control.input-search(type="text", placeholder="Placeholder", disabled)
.col-3.p-4
h3 Input Valid
input.form-control.input-valid(type="text", placeholder="Placeholder")
.col-3.p-4
h3 Input Invalid
input.form-control.input-invalid(type="text", placeholder="Placeholder")
.row
.col-6.p-4
h3 Textarea
textarea.form-control(rows="5", cols="50")
.col-6.p-4
h3 Textarea Disabled
textarea.form-control(disabled, rows="10", cols="50")
.row
.col-2.p-4
toggleSwitch(label="Toggle Switch")
.row
.col-3.p-4
h3 Checkbox
label.custom-control.custom-checkbox
input.custom-control-input(type='checkbox')
span.custom-control-indicator
span.custom-control-description Check this custom checkbox
.col-3.p-4
h3 Checkbox Disabled Checked
label.custom-control.custom-checkbox
input.custom-control-input(type='checkbox', disabled, checked)
span.custom-control-indicator
span.custom-control-description Check this custom checkbox
.col-3.p-4
h3 Checkbox Disabled Not Checked
label.custom-control.custom-checkbox
input.custom-control-input(type='checkbox', disabled)
span.custom-control-indicator
span.custom-control-description Check this custom checkbox
.col-6.p-4
h3 Radio Button
form
label.custom-control.custom-radio
input#radio1.custom-control-input(name='radio', type='radio')
span.custom-control-indicator
span.custom-control-description Toggle this custom radio
label.custom-control.custom-radio
input#radio2.custom-control-input(name='radio', type='radio')
span.custom-control-indicator
span.custom-control-description Toggle this custom radio
.col-3.p-4
h3 Radio Button Disabled Checked
form
label.custom-control.custom-radio
input#radio3.custom-control-input(name='radio', type='radio', disabled, checked)
span.custom-control-indicator
span.custom-control-description Toggle this custom radio
.col-3.p-4
h3 Radio Button Disabled Not Checked
form
label.custom-control.custom-radio
input#radio3.custom-control-input(name='radio', type='radio', disabled)
span.custom-control-indicator
span.custom-control-description Toggle this custom radio
.row
.col-3.p-4
h3 Main Button
button.btn.btn-primary Button
.col-3.p-4
h3 Secondary Button
button.btn.btn-secondary Button
.col-3.p-4
h3 Green Button
button.btn.btn-success Button
.col-3.p-4
h3 Blue Button
button.btn.btn-info Button
.col-3.p-4
h3 Red Button
button.btn.btn-danger Button
.row
.col-3.p-4
h3 Main Button Disabled
button.btn.btn-primary(disabled=true) Button
.col-3.p-4
h3 Secondary Button Disabled
button.btn.btn-secondary(disabled=true) Button
.col-3.p-4
h3 Green Button Disabled
button.btn.btn-success(disabled=true) Button
.col-3.p-4
h3 Blue Button Disabled
button.btn.btn-info(disabled=true) Button
.col-3.p-4
h3 Red Button Disabled
button.btn.btn-danger(disabled=true) Button
.row
.col-6.p-4
h3 Dropdown Menu
b-dropdown(text="Menu", right=false)
b-dropdown-item(href="#") Menu item 1
b-dropdown-item(href="#") Menu item 2
b-dropdown-item(href="#") Menu item 3
b-dropdown-item(href="#") Menu item 4
.col-6.p-4
h3 Dropdown Menu Disabled
b-dropdown(text="Menu", disabled)
b-dropdown-item(href="#") Menu item 1
b-dropdown-item(href="#") Menu item 2
b-dropdown-item(href="#") Menu item 3
b-dropdown-item(href="#") Menu item 4
.row
.col-6.p-4
h1 Heading 1
h2 Heading 2
h3 Heading 3
h4 Heading 4
.col-6.p-4
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula, purus sit amet sodales pharetra, ipsum ipsum mollis orci, id pharetra velit diam et dui. Sed placerat ipsum eget pharetra rutrum. Ut vitae rutrum lacus, eu imperdiet velit. Pellentesque eu velit cursus, scelerisque dui quis, dapibus magna. Vestibulum molestie sed sapien et ultricies. Nam porta ipsum leo, non congue magna vestibulum a. Etiam dictum felis sit amet augue varius tincidunt. Sed eget urna auctor, convallis felis in, pretium justo. Curabitur aliquet, ligula id tincidunt ullamcorper, orci lorem pharetra neque, in ornare arcu magna accumsan arcu. Maecenas dignissim lorem sed eros accumsan scelerisque.
p.small-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula, purus sit amet sodales pharetra, ipsum ipsum mollis orci, id pharetra velit diam et dui.
.row
.col(v-for="taskType in tasksTypes")
h3 {{taskType}}s
ul
task(v-for="task in tasks", v-if="task.type === taskType", :key="task.id", :task="task")