github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Update general.astro

Browse Source
pull/5153/head
Daniel 2 years ago
parent 0c22f53b13
commit d8bde63c5e
1 changed files with 544 additions and 28 deletions
Show Stats Download Patch File Download Diff File

572
src/html/pages/forms/general.astro
Unescape View File

@ -1,14 +1,14 @@
--- ---
import Head from '@components/_head.astro'; import Head from "@components/_head.astro";
import Footer from '@components/dashboard/_footer.astro'; import Footer from "@components/dashboard/_footer.astro";
import Topbar from '@components/dashboard/_topbar.astro'; import Topbar from "@components/dashboard/_topbar.astro";
import Sidenav from '@components/dashboard/_sidenav.astro'; import Sidenav from "@components/dashboard/_sidenav.astro";
import Scripts from '@components/_scripts.astro'; import Scripts from "@components/_scripts.astro";
const title = 'AdminLTE 4 | General Form Elements'; const title = "AdminLTE 4 | General Form Elements";
const path = '../../../dist'; const path = "../../../dist";
const mainPage = 'forms'; const mainPage = "forms";
const page = 'general'; const page = "general";
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@ -38,7 +38,9 @@ const page = 'general';
<div class="col-sm-6"> <div class="col-sm-6">
<ol class="breadcrumb float-sm-end"> <ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Home</a></li> <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> </ol>
</div> </div>
</div> </div>
@ -53,42 +55,557 @@ const page = 'general';
<div class="container-fluid"> <div class="container-fluid">
<!--begin::Row--> <!--begin::Row-->
<div class="row g-4"> <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"> <div class="col-md-6">
<!-- general form elements --> <!--begin::Quick Example-->
<div class="card card-primary card-outline"> <div class="card card-primary card-outline">
<!--begin::Header-->
<div class="card-header"> <div class="card-header">
<div class="card-title"> <div class="card-title">Quick Example</div>
Quick Example
</div>
</div> </div>
<!--end::Header-->
<!--begin::Form-->
<form> <form>
<!--begin::Body-->
<div class="card-body"> <div class="card-body">
<div class="mb-3"> <div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label> <label for="exampleInputEmail1" class="form-label"
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> >Email address</label
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> >
<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>
<div class="mb-3"> <div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label> <label for="exampleInputPassword1" class="form-label"
<input type="password" class="form-control" id="exampleInputPassword1"> >Password</label
>
<input
type="password"
class="form-control"
id="exampleInputPassword1"
/>
</div> </div>
<div class="input-group mb-3"> <div class="input-group mb-3">
<input type="file" class="form-control" id="inputGroupFile02"> <input
<label class="input-group-text" for="inputGroupFile02">Upload</label> type="file"
class="form-control"
id="inputGroupFile02"
/>
<label class="input-group-text" for="inputGroupFile02"
>Upload</label
>
</div> </div>
<div class="mb-3 form-check"> <div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1"> <input
<label class="form-check-label" for="exampleCheck1">Check me out</label> type="checkbox"
class="form-check-input"
id="exampleCheck1"
/>
<label class="form-check-label" for="exampleCheck1"
>Check me out</label
>
</div> </div>
</div> </div>
<!--end::Body-->
<!--begin::Footer-->
<div class="card-footer"> <div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary"
>Submit</button
>
</div> </div>
<!--end::Footer-->
</form> </form>
<!--end::Form-->
</div>
<!--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> </div>
<!-- /.card --> <!--end::Form Validation-->
</div> </div>
<!--end::Col-->
</div> </div>
<!--end::Row--> <!--end::Row-->
</div> </div>
@ -103,6 +620,5 @@ const page = 'general';
<!--begin::Script--> <!--begin::Script-->
<Scripts path={path} /> <Scripts path={path} />
<!--end::Script--> <!--end::Script-->
</body> </body><!--end::Body-->
<!--end::Body-->
</html> </html>

Write Preview
Loading…
Cancel
Save