274 lines
8.2 KiB
Vue
274 lines
8.2 KiB
Vue
|
<script>
|
||
|
|
import Layout from "../../layouts/main";
|
||
|
|
import PageHeader from "../../components/page-header";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Form Layouts component
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
components: { Layout, PageHeader },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: "Form Layouts",
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
text: "Forms",
|
||
|
|
href: "/"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Form Layouts",
|
||
|
|
active: true
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Layout>
|
||
|
|
<PageHeader :title="title" :items="items" />
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title mb-4">Form grid layout</h4>
|
||
|
|
|
||
|
|
<b-form>
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
label="First name"
|
||
|
|
label-for="formrow-firstname-input"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="formrow-firstname-input"
|
||
|
|
type="text"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
label="Email"
|
||
|
|
label-for="formrow-email-input"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="formrow-email-input"
|
||
|
|
type="email"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="form-group">
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
label="Password"
|
||
|
|
label-for="formrow-password-input"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="formrow-password-input"
|
||
|
|
type="password"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
label="City"
|
||
|
|
label-for="formrow-inputCity"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="formrow-inputCity"
|
||
|
|
type="text"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3 form-label"
|
||
|
|
id="input-group-1"
|
||
|
|
label="State"
|
||
|
|
label-for="formrow-inputState"
|
||
|
|
>
|
||
|
|
<b-form-select
|
||
|
|
class="form-select"
|
||
|
|
id="formrow-inputState"
|
||
|
|
:options="['Choose...', '...']"
|
||
|
|
type="text"
|
||
|
|
></b-form-select>
|
||
|
|
</b-form-group>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
label="Zip"
|
||
|
|
label-for="formrow-inputZip"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="formrow-inputZip"
|
||
|
|
type="text"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-3">
|
||
|
|
<div class="form-check">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="gridCheck"
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="gridCheck">
|
||
|
|
Check me out
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<b-button variant="primary">Submit</b-button>
|
||
|
|
</div>
|
||
|
|
</b-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title mb-4">Horizontal form layout</h4>
|
||
|
|
|
||
|
|
<b-form>
|
||
|
|
<b-form-group
|
||
|
|
class="mb-3"
|
||
|
|
label="First name"
|
||
|
|
label-for="horizontal-firstname-input"
|
||
|
|
label-cols-sm="3"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="horizontal-firstname-input"
|
||
|
|
type="text"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<b-form-group
|
||
|
|
class="mb-4"
|
||
|
|
label="Email"
|
||
|
|
label-for="horizontal-email-input"
|
||
|
|
label-cols-sm="3"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="horizontal-email-input"
|
||
|
|
type="email"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<b-form-group
|
||
|
|
class="mb-4"
|
||
|
|
label="Password"
|
||
|
|
label-for="horizontal-password-input"
|
||
|
|
label-cols-sm="3"
|
||
|
|
>
|
||
|
|
<b-form-input
|
||
|
|
id="horizontal-password-input"
|
||
|
|
type="password"
|
||
|
|
></b-form-input>
|
||
|
|
</b-form-group>
|
||
|
|
|
||
|
|
<div class="row justify-content-end">
|
||
|
|
<div class="col-sm-9">
|
||
|
|
<div class="form-check mb-4">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="horizontalLayout-Check"
|
||
|
|
/>
|
||
|
|
<label
|
||
|
|
class="form-check-label"
|
||
|
|
for="horizontalLayout-Check"
|
||
|
|
>
|
||
|
|
Remember me
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<b-button variant="primary">Submit</b-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</b-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-12">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title mb-4">Inline forms layout</h5>
|
||
|
|
|
||
|
|
<b-form inline class="row gy-2 gx-3 align-items-center">
|
||
|
|
<div class="col-sm-auto">
|
||
|
|
<label class="visually-hidden" for="inlineFormInputName2"
|
||
|
|
>Name</label
|
||
|
|
>
|
||
|
|
<b-input
|
||
|
|
id="inlineFormInputName2"
|
||
|
|
class="mb-3"
|
||
|
|
placeholder="Jane Doe"
|
||
|
|
></b-input>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-auto">
|
||
|
|
<label class="sr-only" for="inlineFormemail2">Email</label>
|
||
|
|
<b-input-group prepend="@" class="mb-3">
|
||
|
|
<b-input
|
||
|
|
type="email"
|
||
|
|
id="inlineFormemail2"
|
||
|
|
placeholder="Enter Email"
|
||
|
|
></b-input>
|
||
|
|
</b-input-group>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-auto">
|
||
|
|
<label class="visually-hidden" for="autoSizingSelect"
|
||
|
|
>Preference</label
|
||
|
|
>
|
||
|
|
<select
|
||
|
|
class="form-select form-control form-select"
|
||
|
|
id="autoSizingSelect"
|
||
|
|
>
|
||
|
|
<option selected="">Choose...</option>
|
||
|
|
<option value="1">One</option>
|
||
|
|
<option value="2">Two</option>
|
||
|
|
<option value="3">Three</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-auto">
|
||
|
|
<div class="form-check">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="autoSizingCheck"
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="autoSizingCheck">
|
||
|
|
Remember me
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-auto">
|
||
|
|
<b-button variant="primary" class="w-md">Submit</b-button>
|
||
|
|
</div>
|
||
|
|
</b-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
</Layout>
|
||
|
|
</template>
|