1107 lines
38 KiB
Vue
1107 lines
38 KiB
Vue
|
<script>
|
||
|
|
import Layout from "../../layouts/main";
|
||
|
|
import PageHeader from "../../components/page-header";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Form-element component
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Layout,
|
||
|
|
PageHeader,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: "Form Elements",
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
text: "Forms",
|
||
|
|
href: "/",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Form Elements",
|
||
|
|
active: true,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
selectedprimary: "primary",
|
||
|
|
selectedinfo: "info",
|
||
|
|
selecteddanger: "danger",
|
||
|
|
selectedwarning: "warning",
|
||
|
|
selectedsuccess: "success",
|
||
|
|
selectedToogle: "A",
|
||
|
|
selectedDefault: "a",
|
||
|
|
status: "accepted",
|
||
|
|
rightcheck: "accepted",
|
||
|
|
primarycheck: "accepted",
|
||
|
|
successcheck: "accepted",
|
||
|
|
infocheck: "accepted",
|
||
|
|
warningcheck: "accepted",
|
||
|
|
dangercheck: "accepted",
|
||
|
|
primaryoutlinecheck: "accepted",
|
||
|
|
infooutlinecheck: "accepted",
|
||
|
|
warningoutlinecheck: "accepted",
|
||
|
|
dangeroutlinecheck: "accepted",
|
||
|
|
checked: true,
|
||
|
|
smchecked: true,
|
||
|
|
lgchecked: true,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Layout>
|
||
|
|
<PageHeader :title="title" :items="items" />
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">Textual inputs</h4>
|
||
|
|
<p class="card-title-desc">
|
||
|
|
Here are examples of
|
||
|
|
<code>.form-control</code> applied to each textual HTML5
|
||
|
|
<code><input></code>
|
||
|
|
<code>type</code>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12">
|
||
|
|
<form class="form-horizontal" role="form">
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
id="example text"
|
||
|
|
label-cols-lg="2"
|
||
|
|
label="Text"
|
||
|
|
label-for="text"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
for="text"
|
||
|
|
value="Artisanal kale"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
id="example-search"
|
||
|
|
label-cols-sm="2"
|
||
|
|
label-cols-lg="2"
|
||
|
|
label="Search"
|
||
|
|
label-for="search"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="search"
|
||
|
|
value="How do I shoot web"
|
||
|
|
type="search"
|
||
|
|
name="search"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
id="example-email"
|
||
|
|
label-cols-sm="2"
|
||
|
|
label-cols-lg="2"
|
||
|
|
label="Email"
|
||
|
|
label-for="email"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="email"
|
||
|
|
value="bootstrap@example.com"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
id="example-url"
|
||
|
|
label-cols-sm="2"
|
||
|
|
label-cols-lg="2"
|
||
|
|
label="URL"
|
||
|
|
label-for="url"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="url"
|
||
|
|
value="https://getbootstrap.com"
|
||
|
|
type="url"
|
||
|
|
name="url"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
id="example-tel"
|
||
|
|
label-cols-sm="2"
|
||
|
|
label-cols-lg="2"
|
||
|
|
label="Telephone"
|
||
|
|
label-for="tele"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="tele"
|
||
|
|
value="1-(555)-555-5555"
|
||
|
|
type="tel"
|
||
|
|
name="tel"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
id="example-password"
|
||
|
|
label-cols-sm="2"
|
||
|
|
label-cols-lg="2"
|
||
|
|
label="Password"
|
||
|
|
label-for="pwd"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="pwd"
|
||
|
|
type="password"
|
||
|
|
value="password"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
id="example-number"
|
||
|
|
label-cols-sm="2"
|
||
|
|
label-cols-lg="2"
|
||
|
|
label="Number"
|
||
|
|
label-for="number"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="number"
|
||
|
|
value="42"
|
||
|
|
type="number"
|
||
|
|
name="number"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
id="example-date-time"
|
||
|
|
label-cols-sm="2"
|
||
|
|
label-cols-lg="2"
|
||
|
|
label="Date and time"
|
||
|
|
label-for="date-time"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="date-time"
|
||
|
|
value="2019-08-19T13:45:00"
|
||
|
|
type="datetime-local"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
id="example-date"
|
||
|
|
label-cols-sm="2"
|
||
|
|
label-cols-lg="2"
|
||
|
|
label="Date"
|
||
|
|
label-for="date"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="date"
|
||
|
|
value="2019-08-19"
|
||
|
|
type="date"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
id="example-month"
|
||
|
|
label-cols-sm="2"
|
||
|
|
label-cols-lg="2"
|
||
|
|
label="Month"
|
||
|
|
label-for="month"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="month"
|
||
|
|
value="2019-08"
|
||
|
|
type="month"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
id="example-week"
|
||
|
|
label-cols-sm="2"
|
||
|
|
label-cols-lg="2"
|
||
|
|
label="Week"
|
||
|
|
label-for="week"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="week"
|
||
|
|
value="2019-W33"
|
||
|
|
type="week"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
id="example-time"
|
||
|
|
label-cols-sm="2"
|
||
|
|
label-cols-lg="2"
|
||
|
|
label="Time"
|
||
|
|
label-for="time"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="time"
|
||
|
|
value="13:45:00"
|
||
|
|
type="time"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
id="example-color"
|
||
|
|
label-cols-sm="2"
|
||
|
|
label-cols-lg="2"
|
||
|
|
label="Color"
|
||
|
|
label-for="color"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
class="form-control-color mw-100"
|
||
|
|
id="color"
|
||
|
|
type="color"
|
||
|
|
name="color"
|
||
|
|
value="#556ee6"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<div class="mb-3 row">
|
||
|
|
<label class="col-md-2 col-form-label">Select</label>
|
||
|
|
<div class="col-md-10">
|
||
|
|
<select class="form-control">
|
||
|
|
<option>Select</option>
|
||
|
|
<option>Large select</option>
|
||
|
|
<option>Small select</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<label for="exampleDataList" class="col-md-2 col-form-label"
|
||
|
|
>Datalists</label
|
||
|
|
>
|
||
|
|
<div class="col-md-10">
|
||
|
|
<input
|
||
|
|
class="form-control"
|
||
|
|
list="datalistOptions"
|
||
|
|
id="exampleDataList"
|
||
|
|
placeholder="Type to search..."
|
||
|
|
/>
|
||
|
|
<datalist id="datalistOptions">
|
||
|
|
<option value="San Francisco"></option>
|
||
|
|
<option value="New York"></option>
|
||
|
|
<option value="Seattle"></option>
|
||
|
|
<option value="Los Angeles"></option>
|
||
|
|
<option value="Chicago"></option>
|
||
|
|
</datalist>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end card -->
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">Sizing</h4>
|
||
|
|
<p class="card-title-desc">
|
||
|
|
Set heights using size like
|
||
|
|
<code>lg</code> and <code>sm</code>.
|
||
|
|
</p>
|
||
|
|
<div>
|
||
|
|
<div class="mb-4">
|
||
|
|
<b-form-input
|
||
|
|
id="input-md"
|
||
|
|
placeholder="Default input"
|
||
|
|
></b-form-input>
|
||
|
|
</div>
|
||
|
|
<div class="mb-4">
|
||
|
|
<b-form-input
|
||
|
|
id="input-small"
|
||
|
|
size="sm"
|
||
|
|
placeholder=".form-control-sm"
|
||
|
|
></b-form-input>
|
||
|
|
</div>
|
||
|
|
<div class="mb-4">
|
||
|
|
<b-form-input
|
||
|
|
id="input-lg"
|
||
|
|
size="lg"
|
||
|
|
placeholder=".form-control-lg"
|
||
|
|
></b-form-input>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">Range Inputs</h4>
|
||
|
|
<p class="card-title-desc">
|
||
|
|
Set horizontally scrollable range inputs using
|
||
|
|
<code>.form-control-range</code>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h5 class="font-size-14">Example</h5>
|
||
|
|
<input
|
||
|
|
id="formControlRange"
|
||
|
|
type="range"
|
||
|
|
class="form-control-range form-range"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="mt-4">
|
||
|
|
<h5 class="font-size-14">Custom Range</h5>
|
||
|
|
<b-form-input
|
||
|
|
id="custom-range"
|
||
|
|
type="range"
|
||
|
|
class="form-range"
|
||
|
|
></b-form-input>
|
||
|
|
|
||
|
|
<b-form-input
|
||
|
|
id="customRange2"
|
||
|
|
class="mt-4 form-range"
|
||
|
|
type="range"
|
||
|
|
min="0"
|
||
|
|
max="5"
|
||
|
|
></b-form-input>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-12">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">Checkboxes</h4>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-3 col-sm-6">
|
||
|
|
<div class="mt-4">
|
||
|
|
<h5 class="font-size-14 mb-4">
|
||
|
|
<i class="mdi mdi-arrow-right text-primary me-1"></i>
|
||
|
|
Default Checkboxes
|
||
|
|
</h5>
|
||
|
|
<b-form-checkbox
|
||
|
|
value="accepted"
|
||
|
|
unchecked-value="not_accepted"
|
||
|
|
class="mb-3"
|
||
|
|
checked
|
||
|
|
plain
|
||
|
|
>Default checkbox</b-form-checkbox
|
||
|
|
>
|
||
|
|
|
||
|
|
<b-form-checkbox
|
||
|
|
value="accepted"
|
||
|
|
unchecked-value="not_accepted"
|
||
|
|
class="form-check-right"
|
||
|
|
v-model="rightcheck"
|
||
|
|
plain
|
||
|
|
>Default checkbox Right</b-form-checkbox
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-3 col-sm-6">
|
||
|
|
<div class="mt-4">
|
||
|
|
<h5 class="font-size-14 mb-4">
|
||
|
|
<i class="mdi mdi-arrow-right text-primary me-1"></i> Form
|
||
|
|
Checkboxes Right
|
||
|
|
</h5>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="form-check form-check-right mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="formCheckRight1"
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formCheckRight1">
|
||
|
|
Form Checkbox Right
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="form-check form-check-right">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="formCheckRight2"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formCheckRight2">
|
||
|
|
Form Checkbox Right checked
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-3 col-sm-6">
|
||
|
|
<div class="mt-4">
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
<i class="mdi mdi-arrow-right text-primary me-1"></i> Custom
|
||
|
|
Checkboxes colors
|
||
|
|
</h5>
|
||
|
|
<p class="sub-header mb-4">
|
||
|
|
Add class
|
||
|
|
<code>.form-check-*</code> for a color Checkboxes
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="form-check form-check-primary mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="formCheckcolor1"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formCheckcolor1">
|
||
|
|
Checkbox Primary
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-check form-check-success mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="formCheckcolor1"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formCheckcolor1">
|
||
|
|
Checkbox Success
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-check form-check-info mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="formCheckcolor1"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formCheckcolor1">
|
||
|
|
Checkbox Info
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-check form-check-warning mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="formCheckcolor1"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formCheckcolor1">
|
||
|
|
Checkbox Warning
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-check form-check-danger mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="formCheckcolor1"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formCheckcolor1">
|
||
|
|
Checkbox Danger
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-3 col-sm-6">
|
||
|
|
<div class="mt-4">
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
<i class="mdi mdi-arrow-right text-primary me-1"></i> Custom
|
||
|
|
Checkboxes Outline
|
||
|
|
</h5>
|
||
|
|
<p class="sub-header mb-4">
|
||
|
|
Add class
|
||
|
|
<code>.form-checkbox-outline</code> &
|
||
|
|
<code>.form-check-*</code> for a color Checkboxes
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div>
|
||
|
|
<div
|
||
|
|
class="form-check form-checkbox-outline form-check-primary mb-3"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="customCheckcolor1"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="customCheckcolor1">
|
||
|
|
Checkbox Outline Primary
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="form-check form-checkbox-outline form-check-success mb-3"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="customCheckcolor2"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="customCheckcolor2">
|
||
|
|
Checkbox Outline Success
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="form-check form-checkbox-outline form-check-info mb-3"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="customCheckcolor3"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="customCheckcolor3">
|
||
|
|
Checkbox Outline Info
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="form-check form-checkbox-outline form-check-warning mb-3"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="customCheckcolor4"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="customCheckcolor4">
|
||
|
|
Checkbox Outline Warning
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="form-check form-checkbox-outline form-check-danger"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="customCheckcolor5"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="customCheckcolor5">
|
||
|
|
Checkbox Outline Danger
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-12">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">Radios</h4>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-3 col-sm-6">
|
||
|
|
<div class="mt-4">
|
||
|
|
<h5 class="font-size-14 mb-4">Default Radios</h5>
|
||
|
|
|
||
|
|
<b-form-group>
|
||
|
|
<b-form-radio
|
||
|
|
v-model="selectedDefault"
|
||
|
|
class="mb-3"
|
||
|
|
value="a"
|
||
|
|
plain
|
||
|
|
>Default radio</b-form-radio
|
||
|
|
>
|
||
|
|
<b-form-radio
|
||
|
|
v-model="selectedDefault"
|
||
|
|
class="form-check-right"
|
||
|
|
value="b"
|
||
|
|
plain
|
||
|
|
>Default radio Right</b-form-radio
|
||
|
|
>
|
||
|
|
</b-form-group>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-xl-3 col-sm-6">
|
||
|
|
<div class="mt-4">
|
||
|
|
<h5 class="font-size-14 mb-4">Form Radios Right</h5>
|
||
|
|
<div>
|
||
|
|
<div class="form-check form-check-right mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="radio"
|
||
|
|
name="formRadiosRight"
|
||
|
|
id="formRadiosRight1"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formRadiosRight1">
|
||
|
|
Form Radio Right
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="form-check form-check-right">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="radio"
|
||
|
|
name="formRadiosRight"
|
||
|
|
id="formRadiosRight2"
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formRadiosRight2">
|
||
|
|
Form Radio Right checked
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-xl-3 col-sm-6">
|
||
|
|
<div class="mt-4">
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
<i class="mdi mdi-arrow-right text-primary mr-1"></i> Form
|
||
|
|
Radio colors
|
||
|
|
</h5>
|
||
|
|
<p class="sub-header mb-4">
|
||
|
|
Add class <code>.form-radio-* </code> for a color Radios
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="form-check form-radio-primary mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="radio"
|
||
|
|
name="formRadioColor1"
|
||
|
|
id="formRadioColor1"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formRadioColor1">
|
||
|
|
Radio Primary
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-check form-radio-success mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="radio"
|
||
|
|
name="formRadioColor2"
|
||
|
|
id="formRadioColor2"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formRadioColor2">
|
||
|
|
Radio Success
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-check form-radio-info mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="radio"
|
||
|
|
name="formRadioColor3"
|
||
|
|
id="formRadioColor3"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formRadioColor3">
|
||
|
|
Radio Info
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-check form-radio-warning mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="radio"
|
||
|
|
name="formRadioColor4"
|
||
|
|
id="formRadioColor4"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formRadioColor4">
|
||
|
|
Radio warning
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-check form-radio-danger mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="radio"
|
||
|
|
name="formRadioColor5"
|
||
|
|
id="formRadioColor5"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formRadioColor5">
|
||
|
|
Radio Danger
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-3 col-sm-6">
|
||
|
|
<div class="mt-4">
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
<i class="mdi mdi-arrow-right text-primary mr-1"></i> Form
|
||
|
|
Radio Outline
|
||
|
|
</h5>
|
||
|
|
<p class="sub-header mb-4">
|
||
|
|
Add class <code>form-radio-outline</code> &
|
||
|
|
<code>.form-radio-* </code> for a color Checkboxes
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div
|
||
|
|
class="form-check form-radio-outline form-radio-primary mb-3"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="radio"
|
||
|
|
name="formRadio1"
|
||
|
|
id="formRadio1"
|
||
|
|
checked
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formRadio1">
|
||
|
|
Radio Outline Primary
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="form-check form-radio-outline form-radio-success mb-3"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="radio"
|
||
|
|
name="formRadio2"
|
||
|
|
id="formRadio2"
|
||
|
|
checked
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formRadio2">
|
||
|
|
Radio Outline Success
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="form-check form-radio-outline form-radio-info mb-3"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="radio"
|
||
|
|
name="formRadio3"
|
||
|
|
id="formRadio3"
|
||
|
|
checked
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formRadio3">
|
||
|
|
Radio Outline Info
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="form-check form-radio-outline form-radio-warning mb-3"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="radio"
|
||
|
|
name="formRadio4"
|
||
|
|
id="formRadio4"
|
||
|
|
checked
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formRadio4">
|
||
|
|
Radio Outline Warning
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="form-check form-radio-outline form-radio-danger mb-3"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="radio"
|
||
|
|
name="formRadio5"
|
||
|
|
id="formRadio5"
|
||
|
|
checked
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="formRadio5">
|
||
|
|
Radio Outline Danger
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-12">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">Switches</h4>
|
||
|
|
<p class="card-title-desc">
|
||
|
|
A switch has the markup of a custom checkbox but uses the
|
||
|
|
<code>.custom-switch</code> class to render a toggle switch.
|
||
|
|
Switches also support the <code>disabled</code> attribute.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<div>
|
||
|
|
<h5 class="font-size-14 mb-3">Switch examples</h5>
|
||
|
|
<div class="form-check form-switch mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="flexSwitchCheckDefault"
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="flexSwitchCheckDefault"
|
||
|
|
>Default switch checkbox input</label
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="form-check form-switch mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="flexSwitchCheckChecked"
|
||
|
|
checked=""
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="flexSwitchCheckChecked"
|
||
|
|
>Checked switch checkbox input</label
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="form-check form-switch mb-3">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="flexSwitchCheckDisabled"
|
||
|
|
disabled=""
|
||
|
|
/>
|
||
|
|
<label
|
||
|
|
class="form-check-label"
|
||
|
|
for="flexSwitchCheckDisabled"
|
||
|
|
>Disabled switch checkbox input</label
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="form-check form-switch">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="flexSwitchCheckCheckedDisabled"
|
||
|
|
checked=""
|
||
|
|
disabled=""
|
||
|
|
/>
|
||
|
|
<label
|
||
|
|
class="form-check-label"
|
||
|
|
for="flexSwitchCheckCheckedDisabled"
|
||
|
|
>Disabled checked switch checkbox input</label
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<div class="mt-4 mt-sm-0">
|
||
|
|
<h5 class="font-size-14 mb-3">Switch sizes</h5>
|
||
|
|
|
||
|
|
<div class="form-check form-switch mb-3" dir="ltr">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="SwitchCheckSizesm"
|
||
|
|
checked
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="SwitchCheckSizesm"
|
||
|
|
>Small Size Switch</label
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="form-check form-switch form-switch-md mb-3"
|
||
|
|
dir="ltr"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="SwitchCheckSizemd"
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="SwitchCheckSizemd"
|
||
|
|
>Medium Size Switch</label
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="form-check form-switch form-switch-lg mb-3"
|
||
|
|
dir="ltr"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="SwitchCheckSizelg"
|
||
|
|
checked
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="SwitchCheckSizelg"
|
||
|
|
>Large Size Switch</label
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-12">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title mb-4">File browser</h4>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
<i class="mdi mdi-arrow-right text-primary"></i> Default file
|
||
|
|
input
|
||
|
|
</h5>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<div class="mt-3">
|
||
|
|
<label for="formFile" class="form-label"
|
||
|
|
>Default file input example</label
|
||
|
|
>
|
||
|
|
<input class="form-control" type="file" id="formFile" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<div class="mt-4">
|
||
|
|
<div>
|
||
|
|
<label for="formFileSm" class="form-label"
|
||
|
|
>Small file input example</label
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
class="form-control form-control-sm"
|
||
|
|
id="formFileSm"
|
||
|
|
type="file"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<div class="mt-4">
|
||
|
|
<div>
|
||
|
|
<label for="formFileLg" class="form-label"
|
||
|
|
>Large file input example</label
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
class="form-control form-control-lg"
|
||
|
|
id="formFileLg"
|
||
|
|
type="file"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-4 pt-2">
|
||
|
|
<h5 class="font-size-14 mb-0">
|
||
|
|
<i class="mdi mdi-arrow-right text-primary"></i> Custom file
|
||
|
|
input
|
||
|
|
</h5>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<div class="mt-4">
|
||
|
|
<div>
|
||
|
|
<label class="form-label">With Label</label>
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<label class="input-group-text" for="inputGroupFile01"
|
||
|
|
>Upload</label
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
class="form-control"
|
||
|
|
id="inputGroupFile01"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="input-group">
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
class="form-control"
|
||
|
|
id="inputGroupFile02"
|
||
|
|
/>
|
||
|
|
<label class="input-group-text" for="inputGroupFile02"
|
||
|
|
>Upload</label
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<div class="mt-4">
|
||
|
|
<div>
|
||
|
|
<label class="form-label">With Button</label>
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<button
|
||
|
|
class="btn btn-primary"
|
||
|
|
type="button"
|
||
|
|
id="inputGroupFileAddon03"
|
||
|
|
>
|
||
|
|
Button
|
||
|
|
</button>
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
class="form-control"
|
||
|
|
id="inputGroupFile03"
|
||
|
|
aria-describedby="inputGroupFileAddon03"
|
||
|
|
aria-label="Upload"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-group">
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
class="form-control"
|
||
|
|
id="inputGroupFile04"
|
||
|
|
aria-describedby="inputGroupFileAddon04"
|
||
|
|
aria-label="Upload"
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
class="btn btn-primary"
|
||
|
|
type="button"
|
||
|
|
id="inputGroupFileAddon04"
|
||
|
|
>
|
||
|
|
Button
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
</Layout>
|
||
|
|
</template>
|