mirror of https://github.com/ColorlibHQ/AdminLTE
Update general.astro
Daniel
parent
0c22f53b13
commit
d8bde63c5e
|
|
@ -1,14 +1,14 @@
|
|||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
import Head from "@components/_head.astro";
|
||||
import Footer from "@components/dashboard/_footer.astro";
|
||||
import Topbar from "@components/dashboard/_topbar.astro";
|
||||
import Sidenav from "@components/dashboard/_sidenav.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
|
||||
const title = 'AdminLTE 4 | General Form Elements';
|
||||
const path = '../../../dist';
|
||||
const mainPage = 'forms';
|
||||
const page = 'general';
|
||||
const title = "AdminLTE 4 | General Form Elements";
|
||||
const path = "../../../dist";
|
||||
const mainPage = "forms";
|
||||
const page = "general";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -38,7 +38,9 @@ const page = 'general';
|
|||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">General Form</li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
General Form
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -53,42 +55,557 @@ const page = 'general';
|
|||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row g-4">
|
||||
<!-- Start column -->
|
||||
<!--begin::Col-->
|
||||
<div class="col-12">
|
||||
<div class="callout callout-info">
|
||||
For detailed documentaion of Form visit <a
|
||||
href="https://getbootstrap.com/docs/5.3/forms/overview/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="fw-bold"
|
||||
>
|
||||
Bootstrap Form
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-6">
|
||||
<!-- general form elements -->
|
||||
<!--begin::Quick Example-->
|
||||
<div class="card card-primary card-outline">
|
||||
<!--begin::Header-->
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
Quick Example
|
||||
</div>
|
||||
<div class="card-title">Quick Example</div>
|
||||
</div>
|
||||
<!--end::Header-->
|
||||
<!--begin::Form-->
|
||||
<form>
|
||||
<!--begin::Body-->
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
|
||||
<label for="exampleInputEmail1" class="form-label"
|
||||
>Email address</label
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="exampleInputEmail1"
|
||||
aria-describedby="emailHelp"
|
||||
/>
|
||||
<div id="emailHelp" class="form-text">
|
||||
We'll never share your email with anyone else.
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword1" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1">
|
||||
<label for="exampleInputPassword1" class="form-label"
|
||||
>Password</label
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="exampleInputPassword1"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="file" class="form-control" id="inputGroupFile02">
|
||||
<label class="input-group-text" for="inputGroupFile02">Upload</label>
|
||||
<input
|
||||
type="file"
|
||||
class="form-control"
|
||||
id="inputGroupFile02"
|
||||
/>
|
||||
<label class="input-group-text" for="inputGroupFile02"
|
||||
>Upload</label
|
||||
>
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||||
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="exampleCheck1"
|
||||
/>
|
||||
<label class="form-check-label" for="exampleCheck1"
|
||||
>Check me out</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Body-->
|
||||
<!--begin::Footer-->
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
<button type="submit" class="btn btn-primary"
|
||||
>Submit</button
|
||||
>
|
||||
</div>
|
||||
<!--end::Footer-->
|
||||
</form>
|
||||
<!--end::Form-->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
<!--end::Quick Example-->
|
||||
<!--begin::Input Group-->
|
||||
<div class="card card-success card-outline">
|
||||
<!--begin::Header-->
|
||||
<div class="card-header">
|
||||
<div class="card-title">Input Group</div>
|
||||
</div>
|
||||
<!--end::Header-->
|
||||
<!--begin::Body-->
|
||||
<div class="card-body">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="basic-addon1">@</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Username"
|
||||
aria-label="Username"
|
||||
aria-describedby="basic-addon1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Recipient's username"
|
||||
aria-label="Recipient's username"
|
||||
aria-describedby="basic-addon2"
|
||||
/>
|
||||
<span class="input-group-text" id="basic-addon2"
|
||||
>@example.com</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="basic-url" class="form-label"
|
||||
>Your vanity URL</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="basic-addon3"
|
||||
>https://example.com/users/</span
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="basic-url"
|
||||
aria-describedby="basic-addon3 basic-addon4"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-text" id="basic-addon4">
|
||||
Example help text goes outside the input group.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">$</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
aria-label="Amount (to the nearest dollar)"
|
||||
/>
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Username"
|
||||
aria-label="Username"
|
||||
/>
|
||||
<span class="input-group-text">@</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Server"
|
||||
aria-label="Server"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">With textarea</span>
|
||||
<textarea class="form-control" aria-label="With textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Body-->
|
||||
<!--begin::Footer-->
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-success">Submit</button
|
||||
>
|
||||
</div>
|
||||
<!--end::Footer-->
|
||||
</div>
|
||||
<!--end::Input Group-->
|
||||
<!--begin::Horizontal Form-->
|
||||
<div class="card card-warning card-outline">
|
||||
<!--begin::Header-->
|
||||
<div class="card-header">
|
||||
<div class="card-title">Horizontal Form</div>
|
||||
</div>
|
||||
<!--end::Header-->
|
||||
<!--begin::Form-->
|
||||
<form>
|
||||
<!--begin::Body-->
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<label for="inputEmail3" class="col-sm-2 col-form-label"
|
||||
>Email</label
|
||||
>
|
||||
<div class="col-sm-10">
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="inputEmail3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label
|
||||
for="inputPassword3"
|
||||
class="col-sm-2 col-form-label">Password</label
|
||||
>
|
||||
<div class="col-sm-10">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="inputPassword3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<fieldset class="row mb-3">
|
||||
<legend class="col-form-label col-sm-2 pt-0"
|
||||
>Radios</legend
|
||||
>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="gridRadios"
|
||||
id="gridRadios1"
|
||||
value="option1"
|
||||
checked
|
||||
/>
|
||||
<label class="form-check-label" for="gridRadios1">
|
||||
First radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="gridRadios"
|
||||
id="gridRadios2"
|
||||
value="option2"
|
||||
/>
|
||||
<label class="form-check-label" for="gridRadios2">
|
||||
Second radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check disabled">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="gridRadios"
|
||||
id="gridRadios3"
|
||||
value="option3"
|
||||
disabled
|
||||
/>
|
||||
<label class="form-check-label" for="gridRadios3">
|
||||
Third disabled radio
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-10 offset-sm-2">
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="gridCheck1"
|
||||
/>
|
||||
<label class="form-check-label" for="gridCheck1">
|
||||
Example checkbox
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Body-->
|
||||
<!--begin::Footer-->
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-warning"
|
||||
>Sign in</button
|
||||
>
|
||||
<button type="submit" class="btn float-end">Cancel</button
|
||||
>
|
||||
</div>
|
||||
<!--end::Footer-->
|
||||
</form>
|
||||
<!--end::Form-->
|
||||
</div>
|
||||
<!--end::Horizontal Form-->
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-6">
|
||||
<!--begin::Different Height-->
|
||||
<div class="card card-secondary card-outline">
|
||||
<!--begin::Header-->
|
||||
<div class="card-header">
|
||||
<div class="card-title">Different Height</div>
|
||||
</div>
|
||||
<!--end::Header-->
|
||||
<!--begin::Body-->
|
||||
<div class="card-body">
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
type="text"
|
||||
placeholder=".form-control-lg"
|
||||
aria-label=".form-control-lg example"
|
||||
/>
|
||||
<br />
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
placeholder="Default input"
|
||||
aria-label="default input example"
|
||||
/>
|
||||
<br />
|
||||
<input
|
||||
class="form-control form-control-sm"
|
||||
type="text"
|
||||
placeholder=".form-control-sm"
|
||||
aria-label=".form-control-sm example"
|
||||
/>
|
||||
</div>
|
||||
<!--end::Body-->
|
||||
</div>
|
||||
<!--end::Different Height-->
|
||||
<!--begin::Different Width-->
|
||||
<div class="card card-danger card-outline">
|
||||
<!--begin::Header-->
|
||||
<div class="card-header">
|
||||
<div class="card-title">Different Width</div>
|
||||
</div>
|
||||
<!--end::Header-->
|
||||
<!--begin::Body-->
|
||||
<div class="card-body">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<!--begin::Col-->
|
||||
<div class="col-3">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder=".col-3"
|
||||
/>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-4">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder=".col-4"
|
||||
/>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-5">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder=".col-5"
|
||||
/>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Body-->
|
||||
</div>
|
||||
<!--end::Different Width-->
|
||||
<!--begin::Form Validation-->
|
||||
<div class="card card-info card-outline">
|
||||
<!--begin::Header-->
|
||||
<div class="card-header">
|
||||
<div class="card-title">Form Validation</div>
|
||||
</div>
|
||||
<!--end::Header-->
|
||||
<!--begin::Form-->
|
||||
<form class="needs-validation" novalidate>
|
||||
<!--begin::Body-->
|
||||
<div class="card-body">
|
||||
<!--begin::Row-->
|
||||
<div class="row g-3">
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustom01" class="form-label"
|
||||
>First name</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="validationCustom01"
|
||||
value="Mark"
|
||||
required
|
||||
/>
|
||||
<div class="valid-feedback">Looks good!</div>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustom02" class="form-label"
|
||||
>Last name</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="validationCustom02"
|
||||
value="Otto"
|
||||
required
|
||||
/>
|
||||
<div class="valid-feedback">Looks good!</div>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-6">
|
||||
<label
|
||||
for="validationCustomUsername"
|
||||
class="form-label">Username</label
|
||||
>
|
||||
<div class="input-group has-validation">
|
||||
<span
|
||||
class="input-group-text"
|
||||
id="inputGroupPrepend">@</span
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="validationCustomUsername"
|
||||
aria-describedby="inputGroupPrepend"
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">
|
||||
Please choose a username.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustom03" class="form-label"
|
||||
>City</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="validationCustom03"
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustom04" class="form-label"
|
||||
>State</label
|
||||
>
|
||||
<select
|
||||
class="form-select"
|
||||
id="validationCustom04"
|
||||
required
|
||||
>
|
||||
<option selected disabled value="">Choose...</option
|
||||
>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustom05" class="form-label"
|
||||
>Zip</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="validationCustom05"
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
id="invalidCheck"
|
||||
required
|
||||
/>
|
||||
<label class="form-check-label" for="invalidCheck">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
<div class="invalid-feedback">
|
||||
You must agree before submitting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Body-->
|
||||
<!--begin::Footer-->
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-info" type="submit"
|
||||
>Submit form</button
|
||||
>
|
||||
</div>
|
||||
<!--end::Footer-->
|
||||
</form>
|
||||
<!--end::Form-->
|
||||
<!--begin::JavaScript-->
|
||||
<script is:inline>
|
||||
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
||||
(() => {
|
||||
"use strict";
|
||||
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
const forms =
|
||||
document.querySelectorAll(".needs-validation");
|
||||
|
||||
// Loop over them and prevent submission
|
||||
Array.from(forms).forEach((form) => {
|
||||
form.addEventListener(
|
||||
"submit",
|
||||
(event) => {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
form.classList.add("was-validated");
|
||||
},
|
||||
false
|
||||
);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<!--end::JavaScript-->
|
||||
</div>
|
||||
<!--end::Form Validation-->
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
|
|
@ -103,6 +620,5 @@ const page = 'general';
|
|||
<!--begin::Script-->
|
||||
<Scripts path={path} />
|
||||
<!--end::Script-->
|
||||
</body>
|
||||
<!--end::Body-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue