1303 lines
54 KiB
HTML
1303 lines
54 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
<title>Material Design for Bootstrap</title>
|
|
<!-- MDB icon -->
|
|
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
|
|
<!-- Google Fonts Roboto -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
|
|
/>
|
|
<!-- MDB -->
|
|
<link rel="stylesheet" href="../../css/mdb.min.css" />
|
|
<!-- PRISM -->
|
|
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
|
|
<!-- Custom styles -->
|
|
<style></style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container my-5">
|
|
<!-- Navs -->
|
|
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
|
|
<!-- Overview tab -->
|
|
<li class="nav-item" role="presentation">
|
|
<a
|
|
class="nav-link active"
|
|
id="pills-overview-tab"
|
|
data-mdb-toggle="pill"
|
|
href="#pills-overview"
|
|
role="tab"
|
|
aria-controls="pills-overview"
|
|
aria-selected="true"
|
|
>Overview</a
|
|
>
|
|
</li>
|
|
<!-- Overview tab -->
|
|
|
|
<!-- Api tab -->
|
|
<li class="nav-item" role="presentation">
|
|
<a
|
|
class="nav-link"
|
|
id="pills-api-tab"
|
|
data-mdb-toggle="pill"
|
|
href="#pills-api"
|
|
role="tab"
|
|
aria-controls="pills-api"
|
|
aria-selected="false"
|
|
>API</a
|
|
>
|
|
</li>
|
|
<!-- Api tab -->
|
|
</ul>
|
|
<!-- Navs -->
|
|
|
|
<!-- Panels -->
|
|
<div class="tab-content mt-4" id="pills-tabContent">
|
|
<!-- Overview panel -->
|
|
<div
|
|
class="tab-pane fade show active"
|
|
id="pills-overview"
|
|
role="tabpanel"
|
|
aria-labelledby="pills-overview-tab"
|
|
>
|
|
<!--Grid row-->
|
|
<div class="row">
|
|
<!--Grid column-->
|
|
<div class="col-md-10 mb-4">
|
|
<!--Section: Docs content-->
|
|
<section>
|
|
<!--Section: Introduction-->
|
|
<section id="section-introduction">
|
|
<!-- Main title -->
|
|
<h2 class="h1 fw-bold">Title</h2>
|
|
|
|
<!-- Seo title -->
|
|
<h1 class="h5">Subtitle</h1>
|
|
|
|
<!-- Description -->
|
|
<p>
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui
|
|
aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem
|
|
sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.
|
|
</p>
|
|
</section>
|
|
<!--Section: Introduction-->
|
|
|
|
<hr class="my-5" />
|
|
|
|
<!--Section: Basic example-->
|
|
<section id="section-basic-example">
|
|
<!-- Section title -->
|
|
<h2 class="mb-4">White input</h2>
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border d-flex justify-content-center p-4 mb-4 bg-dark">
|
|
<div style="width: 23rem;">
|
|
<div class="form-outline form-white">
|
|
<input type="text" id="formWhite" class="form-control" />
|
|
<label class="form-label" for="formWhite">Example label</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<div class="form-outline form-white">
|
|
<input type="text" id="formWhite" class="form-control" />
|
|
<label class="form-label" for="formWhite">New label</label>
|
|
</div>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
|
|
<!-- Section title -->
|
|
<h2 class="mt-5 mb-4">Basic example</h2>
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border d-flex justify-content-center p-4 mb-4">
|
|
<div style="width: 23rem;">
|
|
<div class="form-outline">
|
|
<input type="text" id="form1" class="form-control" />
|
|
<label class="form-label" for="form1">Example label</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<div class="form-outline">
|
|
<input type="text" id="form1" class="form-control" />
|
|
<label class="form-label" for="form1">Example label</label>
|
|
</div>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border d-flex justify-content-center p-4 mb-4">
|
|
<div style="width: 23rem;">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
id="formControlLg"
|
|
class="form-control form-control-lg"
|
|
/>
|
|
<label class="form-label" for="formControlLg">Form control lg</label>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div class="form-outline">
|
|
<input type="text" id="formControlDefault" class="form-control" />
|
|
<label class="form-label" for="formControlDefault"
|
|
>Form control default</label
|
|
>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
id="formControlSm"
|
|
class="form-control form-control-sm"
|
|
/>
|
|
<label class="form-label" for="formControlSm">Form control sm</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
id="formControlLg"
|
|
class="form-control form-control-lg"
|
|
/>
|
|
<label class="form-label" for="formControlLg">Form control lg</label>
|
|
</div>
|
|
|
|
<div class="form-outline">
|
|
<input type="text" id="formControlDefault" class="form-control" />
|
|
<label class="form-label" for="formControlDefault"
|
|
>Form control default</label
|
|
>
|
|
</div>
|
|
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
id="formControlSm"
|
|
class="form-control form-control-sm"
|
|
/>
|
|
<label class="form-label" for="formControlSm">Form control sm</label>
|
|
</div>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border d-flex justify-content-center p-4 mb-4">
|
|
<div style="width: 23rem;">
|
|
<div class="form-outline mb-3">
|
|
<input
|
|
type="email"
|
|
id="formControlExample"
|
|
class="form-control"
|
|
placeholder="name@example.com"
|
|
/>
|
|
<label class="form-label" for="formControlExample">Email address</label>
|
|
</div>
|
|
|
|
<div class="form-outline mb-3">
|
|
<input
|
|
type="email"
|
|
id="formControlExample2"
|
|
class="form-control"
|
|
placeholder="name@example.com"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-outline mb-3">
|
|
<input
|
|
type="email"
|
|
id="formControlExample4"
|
|
value="test"
|
|
class="form-control"
|
|
placeholder="name@example.com"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-outline mb-3">
|
|
<textarea
|
|
type="text"
|
|
id="formControlTextarea"
|
|
class="form-control"
|
|
rows="3"
|
|
placeholder="name@example.com"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="form-outline">
|
|
<textarea
|
|
type="text"
|
|
id="formControlTextarea4"
|
|
class="form-control"
|
|
rows="3"
|
|
placeholder="name@example.com"
|
|
>
|
|
Test</textarea
|
|
>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<div class="form-outline mb-3">
|
|
<input
|
|
type="email"
|
|
id="formControlExample3"
|
|
class="form-control"
|
|
placeholder="name@example.com"
|
|
/>
|
|
<label class="form-label" for="formControlExample3">Email address</label>
|
|
</div>
|
|
|
|
<div class="form-outline">
|
|
<textarea
|
|
type="text"
|
|
id="formControlTextarea2"
|
|
class="form-control"
|
|
rows="3"
|
|
></textarea>
|
|
<label class="form-label" for="formControlTextarea2"
|
|
>Example textarea</label
|
|
>
|
|
</div>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border d-flex justify-content-center p-4 mb-4">
|
|
<div style="width: 23rem;">
|
|
<div class="form-outline">
|
|
<input
|
|
class="form-control"
|
|
id="formControlReadonly"
|
|
type="text"
|
|
placeholder="Readonly input here..."
|
|
aria-label="readonly input example"
|
|
readonly
|
|
/>
|
|
<label class="form-label" for="formControlReadonly">Readonly</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<div class="form-outline">
|
|
<input
|
|
class="form-control"
|
|
id="formControlReadonly"
|
|
type="text"
|
|
placeholder="Readonly input here..."
|
|
aria-label="readonly input example"
|
|
readonly
|
|
/>
|
|
<label class="form-label" for="formControlReadonly">Readonly</label>
|
|
</div>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<h1 class="text-danger mb-4">
|
|
Ta opcja poniżej u nas nie ma zastosowania bo my nie rozdzielamy labela od
|
|
inputa
|
|
</h1>
|
|
|
|
<h2 id="readonly-plain-text">
|
|
Readonly plain text<a
|
|
class="anchorjs-link"
|
|
aria-label="Anchor"
|
|
data-anchorjs-icon="#"
|
|
href="#readonly-plain-text"
|
|
style="padding-left: 0.375em;"
|
|
></a>
|
|
</h2>
|
|
|
|
<p>
|
|
If you want to have <code><input readonly></code> elements in your form
|
|
styled as plain text, use the <code>.form-control-plaintext</code> class to
|
|
remove the default form field styling and preserve the correct margin and
|
|
padding.
|
|
</p>
|
|
|
|
<div class="mb-3 row">
|
|
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
|
|
<div class="col-sm-10">
|
|
<input
|
|
type="text"
|
|
readonly
|
|
class="form-control-plaintext"
|
|
id="staticEmail"
|
|
value="email@example.com"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
|
|
<div class="col-sm-10">
|
|
<input type="password" class="form-control" id="inputPassword" />
|
|
</div>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<form class="row g-3">
|
|
<div class="col-auto">
|
|
<label for="staticEmail2" class="sr-only">Email</label>
|
|
<input
|
|
type="text"
|
|
readonly
|
|
class="form-control-plaintext"
|
|
id="staticEmail2"
|
|
value="email@example.com"
|
|
/>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label for="inputPassword2" class="sr-only">Password</label>
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
id="inputPassword2"
|
|
placeholder="Password"
|
|
/>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<form class="row g-3 d-flex justify-content-center align-items-center">
|
|
<div class="col-auto">
|
|
<div class="form-outline">
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
id="inputPassword3"
|
|
placeholder="Password"
|
|
/>
|
|
<label class="form-label" for="inputPassword2" class="sr-only"
|
|
>Password</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="submit" class="btn btn-primary">Confirm identity</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<form class="row g-3 d-flex justify-content-center align-items-center">
|
|
<div class="col-auto">
|
|
<div class="form-outline">
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
id="inputPassword2"
|
|
placeholder="Password"
|
|
/>
|
|
<label class="form-label" for="inputPassword2" class="sr-only"
|
|
>Password</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="submit" class="btn btn-primary">Confirm identity</button>
|
|
</div>
|
|
</form>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<h1 class="text-danger mb-4">Czy chcemy coś zrobić z tą opcją?</h1>
|
|
|
|
<label for="exampleColorInput" class="form-label">Color picker</label>
|
|
<input
|
|
type="color"
|
|
class="form-control form-control-color"
|
|
id="exampleColorInput"
|
|
value="#563d7c"
|
|
title="Choose your color"
|
|
/>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<label for="exampleColorInput" class="form-label">Color picker</label>
|
|
<input
|
|
type="color"
|
|
class="form-control form-control-color"
|
|
id="exampleColorInput"
|
|
value="#563d7c"
|
|
title="Choose your color"
|
|
/>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border d-flex justify-content-center p-4 mb-4">
|
|
<div style="width: 23rem;">
|
|
<div class="form-outline">
|
|
<input
|
|
class="form-control"
|
|
list="datalistOptions"
|
|
id="exampleDataList"
|
|
placeholder="Type to search..."
|
|
/>
|
|
<label for="exampleDataList" class="form-label">Datalist example</label>
|
|
<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>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<div class="form-outline">
|
|
<input
|
|
class="form-control"
|
|
list="datalistOptions"
|
|
id="exampleDataList"
|
|
placeholder="Type to search..."
|
|
/>
|
|
<label for="exampleDataList" class="form-label">Datalist example</label>
|
|
<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>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<form class="row g-3 mb-4">
|
|
<div class="col-4">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-lg"
|
|
id="inputExampleBtn"
|
|
placeholder="Type sth here..."
|
|
/>
|
|
<label class="form-label" for="inputExampleBtn"
|
|
>Form control default size</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<button type="submit" class="btn btn-primary btn-lg">Button</button>
|
|
</div>
|
|
</form>
|
|
|
|
<form class="row g-3 mb-4">
|
|
<div class="col-4">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="inputExampleBtn2"
|
|
placeholder="Type sth here..."
|
|
/>
|
|
<label class="form-label" for="inputExampleBtn2"
|
|
>Form control default size</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<button type="submit" class="btn btn-primary">Button</button>
|
|
</div>
|
|
</form>
|
|
|
|
<form class="row g-3">
|
|
<div class="col-4">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-sm"
|
|
id="inputExampleBtn3"
|
|
placeholder="Type sth here..."
|
|
/>
|
|
<label class="form-label" for="inputExampleBtn3"
|
|
>Form control default size</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<button type="submit" class="btn btn-primary btn-sm">Button</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<form class="row g-3 mb-4">
|
|
<div class="col-4">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-lg"
|
|
id="inputExampleBtn4"
|
|
placeholder="Type sth here..."
|
|
/>
|
|
<label class="form-label" for="inputExampleBtn4"
|
|
>Form control default size</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<button type="submit" class="btn btn-primary btn-lg">Button</button>
|
|
</div>
|
|
</form>
|
|
|
|
<form class="row g-3 mb-4">
|
|
<div class="col-4">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="inputExampleBtn"
|
|
placeholder="Type sth here..."
|
|
/>
|
|
<label class="form-label" for="inputExampleBtn"
|
|
>Form control default size</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<button type="submit" class="btn btn-primary">Button</button>
|
|
</div>
|
|
</form>
|
|
|
|
<form class="row g-3">
|
|
<div class="col-4">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-sm"
|
|
id="inputExampleBtn"
|
|
placeholder="Type sth here..."
|
|
/>
|
|
<label class="form-label" for="inputExampleBtn"
|
|
>Form control default size</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<button type="submit" class="btn btn-primary btn-sm">Button</button>
|
|
</div>
|
|
</form>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 my-4">
|
|
<!-- Button trigger modal -->
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
data-mdb-toggle="modal"
|
|
data-mdb-target="#exampleModal"
|
|
>
|
|
Launch demo modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div
|
|
class="modal fade"
|
|
id="exampleModal"
|
|
tabindex="-1"
|
|
aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
|
<button
|
|
type="button"
|
|
class="close"
|
|
data-dismiss="modal"
|
|
aria-label="Close"
|
|
>
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-outline mb-3">
|
|
<input type="text" id="form100" class="form-control" value="Test" />
|
|
<label class="form-label" for="form100">Example label</label>
|
|
</div>
|
|
<div class="form-outline mb-3">
|
|
<input type="text" id="form101" class="form-control" value="Test2" />
|
|
<label class="form-label" for="form101">Long Example label</label>
|
|
</div>
|
|
<div class="form-outline">
|
|
<input type="text" id="form102" class="form-control" />
|
|
<label class="form-label" for="form102">Label</label>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-primary dropdown-toggle"
|
|
type="button"
|
|
id="dropdownMenuButton"
|
|
data-mdb-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
Dropdown button
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<li><a class="dropdown-item" href="#">Something here</a></li>
|
|
<li>
|
|
<a class="dropdown-item">
|
|
<div class="form-outline">
|
|
<input type="text" id="form104" class="form-control" value="Test" />
|
|
<label class="form-label" for="form104">Example label</label>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item">
|
|
<div class="form-outline">
|
|
<input type="text" id="form105" class="form-control" value="Test2" />
|
|
<label class="form-label" for="form105">Long Example label</label>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Demo-->
|
|
<div class="card" style="width: 18rem;">
|
|
<img
|
|
src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg"
|
|
class="card-img-top"
|
|
alt="..."
|
|
/>
|
|
<div class="card-body">
|
|
<h5 class="card-title">Card title</h5>
|
|
<div class="form-outline my-3">
|
|
<input type="text" id="form106" class="form-control" />
|
|
<label class="form-label" for="form106">Long Example label</label>
|
|
</div>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
<!--Section: Demo-->
|
|
|
|
<p class="note note-warning mt-4">
|
|
If any form parent is hidden, after displaying it, update the input to
|
|
recalculate the width of the label using the following code:
|
|
</p>
|
|
<mdbsnippet>
|
|
<code data-lang="javascript" data-name="JS">
|
|
document.querySelectorAll('.form-outline').forEach((formOutline) => { new
|
|
mdb.Input(formOutline).update(); })
|
|
</code>
|
|
</mdbsnippet>
|
|
|
|
<h2 class="mt-4">Autofill</h2>
|
|
<!--Section: Demo-->
|
|
<form method="post" type="multipart/form-data" onsubmit="check(event)">
|
|
<div class="form-outline my-3">
|
|
<input type="email" id="form107" name="email" class="form-control" />
|
|
<label class="form-label" for="form107">Long Example label</label>
|
|
</div>
|
|
<div class="form-outline my-3">
|
|
<input type="password" id="form108" name="password" class="form-control" />
|
|
<label class="form-label" for="form108">Long Example label</label>
|
|
</div>
|
|
<button class="btn btn-primary">Submit</button>
|
|
</form>
|
|
<!--Section: Demo-->
|
|
|
|
<h2 class="mt-4">Input group</h2>
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<div class="input-group form-outline mb-3">
|
|
<span class="input-group-text" id="basic-addon1">@</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="input1"
|
|
placeholder="Username"
|
|
aria-label="Username"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
<label class="form-label" for="input1">Username</label>
|
|
</div>
|
|
|
|
<div class="input-group form-outline mb-3">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="input2"
|
|
placeholder="Recipient's username"
|
|
aria-label="Recipient's username"
|
|
aria-describedby="basic-addon2"
|
|
/>
|
|
<span class="input-group-text" id="basic-addon2">@example.com</span>
|
|
<label class="form-label" for="input2">Recipient's username</label>
|
|
</div>
|
|
|
|
<div class="input-group form-outline mb-3">
|
|
<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"
|
|
/>
|
|
<label class="form-label" for="basic-url">Your vanity URL</label>
|
|
</div>
|
|
|
|
<div class="input-group form-outline mb-3">
|
|
<span class="input-group-text">$</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="input3"
|
|
aria-label="Amount (to the nearest dollar)"
|
|
/>
|
|
<span class="input-group-text">.00</span>
|
|
<label class="form-label" for="input3">Your vanity URL</label>
|
|
</div>
|
|
|
|
<div class="input-group form-outline">
|
|
<span class="input-group-text">With textarea</span>
|
|
<textarea
|
|
class="form-control"
|
|
aria-label="With textarea"
|
|
id="textarea1"
|
|
></textarea>
|
|
<label class="form-label" for="textarea1">Textarea form</label>
|
|
</div>
|
|
|
|
<div class="form-outline my-3">
|
|
<input type="email" id="form118" name="email" class="form-control" />
|
|
<label class="form-label" for="form118">Long Example label</label>
|
|
</div>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<h2 class="mt-4">Tabs</h2>
|
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a
|
|
class="nav-link active"
|
|
id="home-tab"
|
|
data-mdb-toggle="tab"
|
|
href="#home"
|
|
role="tab"
|
|
aria-controls="home"
|
|
aria-selected="true"
|
|
>Home</a
|
|
>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a
|
|
class="nav-link"
|
|
id="profile-tab"
|
|
data-mdb-toggle="tab"
|
|
href="#profile"
|
|
role="tab"
|
|
aria-controls="profile"
|
|
aria-selected="false"
|
|
>Profile</a
|
|
>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a
|
|
class="nav-link"
|
|
id="contact-tab"
|
|
data-mdb-toggle="tab"
|
|
href="#contact"
|
|
role="tab"
|
|
aria-controls="contact"
|
|
aria-selected="false"
|
|
>Contact</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent">
|
|
<div
|
|
class="tab-pane fade show active"
|
|
id="home"
|
|
role="tabpanel"
|
|
aria-labelledby="home-tab"
|
|
>
|
|
<div class="form-outline mt-4">
|
|
<input type="text" id="form120" class="form-control" value="Test" />
|
|
<label class="form-label" for="form120">Example label</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="tab-pane fade"
|
|
id="profile"
|
|
role="tabpanel"
|
|
aria-labelledby="profile-tab"
|
|
>
|
|
<div class="form-outline mt-4">
|
|
<input type="text" id="form121" class="form-control" value="Test" />
|
|
<label class="form-label" for="form121">Example label</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="tab-pane fade"
|
|
id="contact"
|
|
role="tabpanel"
|
|
aria-labelledby="contact-tab"
|
|
>
|
|
<div class="form-outline mt-4">
|
|
<input type="text" id="form122" class="form-control" value="Test" />
|
|
<label class="form-label" for="form122">Example label</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--Section: Basic example-->
|
|
|
|
<h2 class="mt-4">Form reset</h2>
|
|
<form id="formReset" style="max-width: 22rem;" class="needs-validation" novalidate>
|
|
<!-- 2 column grid layout with text inputs for the first and last names -->
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<div class="form-outline">
|
|
<input type="text" id="form3Example1" class="form-control" required />
|
|
<label class="form-label" for="form3Example1">First name</label>
|
|
<div class="invalid-feedback">Input can't be empty</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="form-outline">
|
|
<input type="text" id="form3Example2" class="form-control" required />
|
|
<label class="form-label" for="form3Example2">Last name</label>
|
|
<div class="invalid-feedback">Input can't be empty</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email input -->
|
|
<div class="form-outline mb-4">
|
|
<input type="email" id="form3Example3" class="form-control" required />
|
|
<label class="form-label" for="form3Example3">Email address</label>
|
|
<div class="invalid-feedback">Input can't be empty</div>
|
|
</div>
|
|
|
|
<!-- Password input -->
|
|
<div class="form-outline mb-4">
|
|
<input type="password" id="form3Example4" class="form-control" required />
|
|
<label class="form-label" for="form3Example4">Password</label>
|
|
<div class="invalid-feedback">Input can't be empty</div>
|
|
</div>
|
|
|
|
<button class="btn btn-danger mt-3 ms-2" id="clear" type="button">
|
|
Clear form
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Section title -->
|
|
<h2 class="mt-4">Helper text</h2>
|
|
<!--Section: Demo-->
|
|
<section class="border d-flex justify-content-center p-4 mb-4">
|
|
<div style="width: 23rem">
|
|
<div class="form-outline">
|
|
<input type="text" id="form1" class="form-control" />
|
|
<label class="form-label" for="form1">Example label</label>
|
|
<div class="form-helper">Example helper</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
<!--Section: Demo-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<div class="form-outline">
|
|
<input type="text" id="form1" class="form-control" />
|
|
<label class="form-label" for="form1">Example label</label>
|
|
<div class="form-helper">Example helper</div>
|
|
</div>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
<hr class="my-5" />
|
|
|
|
<!-- Section title -->
|
|
<h2 class="mt-4">Character counter</h2>
|
|
<!--Section: Demo-->
|
|
<section class="border d-flex justify-content-center p-4 mb-4">
|
|
<div style="width: 23rem">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
id="form1"
|
|
class="form-control"
|
|
data-mdb-showcounter="true"
|
|
maxlength="20"
|
|
/>
|
|
<label class="form-label" for="form1">Example label</label>
|
|
<div class="form-helper"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--Section: Demo-->
|
|
<!--Section: Demo-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
id="form1"
|
|
class="form-control"
|
|
data-mdb-showcounter="true"
|
|
maxlength="20"
|
|
/>
|
|
<label class="form-label" for="form1">Example label</label>
|
|
<div class="form-helper"></div>
|
|
</div>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<hr class="my-5" />
|
|
|
|
<!-- Section title -->
|
|
<h2 class="mt-4">Icons</h2>
|
|
|
|
<!-- Section title -->
|
|
<h2 class="mt-4">Trailing icon</h2>
|
|
<!--Section: Demo-->
|
|
<section class="border d-flex justify-content-center p-4 mb-4">
|
|
<div style="width: 23rem">
|
|
<div class="form-outline">
|
|
<i class="fas fa-exclamation-circle trailing"></i>
|
|
<input type="text" id="form1" class="form-control form-icon-trailing" />
|
|
<label class="form-label" for="form1">Example label</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--Section: Demo-->
|
|
<!--Section: Demo-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<div class="form-outline">
|
|
<i class="fas fa-exclamation-circle trailing"></i>
|
|
<input type="text" id="form1" class="form-control form-icon-trailing" />
|
|
<label class="form-label" for="form1">Example label</label>
|
|
</div>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
</section>
|
|
<!--Section: Docs content-->
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-2 mb-4">
|
|
<!-- Table of content -->
|
|
<nav id="table-of-content">
|
|
<ul>
|
|
<li><a href="#section-introduction">Introduction</a></li>
|
|
<li><a href="#section-basic-example">Basic example</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- Table of content -->
|
|
</div>
|
|
<!--Grid column-->
|
|
</div>
|
|
<!--Grid row-->
|
|
</div>
|
|
<!-- Overview panel -->
|
|
|
|
<!-- API panel -->
|
|
<div class="tab-pane fade" id="pills-api" role="tabpanel" aria-labelledby="pills-api-tab">
|
|
<!--Grid row-->
|
|
<div class="row">
|
|
<!--Grid column-->
|
|
<div class="col-md-10 mb-4">
|
|
<!--Section: API content-->
|
|
<section>
|
|
<!--Section: Introduction-->
|
|
<section id="section-introduction">
|
|
<!-- Main title -->
|
|
<h2 class="h1 fw-bold">Title - API</h2>
|
|
</section>
|
|
<!--Section: Introduction-->
|
|
|
|
<hr class="my-5" />
|
|
|
|
<!--Section: Usage-->
|
|
<section id="section-usage">
|
|
<!-- Section title -->
|
|
<h2 class="mb-4">Usage</h2>
|
|
|
|
<h4 class="mb-4">Via data attributes</h4>
|
|
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<button type="button" data-mdb-toggle="modal" data-mdb-target="#myModal">
|
|
Launch modal
|
|
</button>
|
|
</code>
|
|
</mdbsnippet>
|
|
|
|
<h4 class="my-4">Via JavaScript</h4>
|
|
|
|
<mdbsnippet>
|
|
<code data-lang="js" data-name="JavaScript">
|
|
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Usage-->
|
|
|
|
<hr class="my-5" />
|
|
|
|
<!--Section: Options-->
|
|
<section id="section-options">
|
|
<!-- Section title -->
|
|
<h2 class="mb-4">Options</h2>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th class="th-sm">Name</th>
|
|
<th class="th-sm">Type</th>
|
|
<th class="th-sm">Default</th>
|
|
<th class="th-sm">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-nowrap"><code class="highlighter-rouge">tag</code></td>
|
|
<td><i>String</i></td>
|
|
<td><code>'button'</code></td>
|
|
<td>Changes button tag</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
<!--Section: Options-->
|
|
|
|
<hr class="my-5" />
|
|
|
|
<!--Section: Methods-->
|
|
<section id="section-methods">
|
|
<!-- Section title -->
|
|
<h2 class="mb-4">Methods</h2>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th class="th-sm">Name</th>
|
|
<th class="th-sm">Description</th>
|
|
<th class="th-sm">Example</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-nowrap"><code class="highlighter-rouge">toggle</code></td>
|
|
<td>Manually toggles a modal</td>
|
|
<td><code class="language-markup text-nowrap">myModal.toggle()</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
<!--Section: Methods-->
|
|
|
|
<hr class="my-5" />
|
|
|
|
<!--Section: Events-->
|
|
<section id="section-events">
|
|
<!-- Section title -->
|
|
<h2 class="mb-4">Events</h2>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th class="th-sm">Name</th>
|
|
<th class="th-sm">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-nowrap">
|
|
<code class="highlighter-rouge">show.bs.modal</code>
|
|
</td>
|
|
<td>
|
|
This event fires immediately when the show instance method is called. If
|
|
caused by a click, the clicked element is available as the relatedTarget
|
|
property of the event.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
<!--Section: Events-->
|
|
</section>
|
|
<!--Section: API content-->
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-2 mb-4">
|
|
<!-- Table of content -->
|
|
<nav id="table-of-content">
|
|
<ul>
|
|
<li><a href="#section-usage">Usage</a></li>
|
|
<li><a href="#section-options">Options</a></li>
|
|
<li><a href="#section-methods">Methods</a></li>
|
|
<li><a href="#section-events">Events</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- Table of content -->
|
|
</div>
|
|
<!--Grid column-->
|
|
</div>
|
|
<!--Grid row-->
|
|
</div>
|
|
<!-- API panel -->
|
|
</div>
|
|
<!-- Panels -->
|
|
</div>
|
|
|
|
<!-- PRISM -->
|
|
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
|
|
<!-- MDB SNIPPET -->
|
|
<script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
|
|
<!-- MDB -->
|
|
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
|
<!-- Custom scripts -->
|
|
<script type="text/javascript">
|
|
const check = (e) => {
|
|
e.preventDefault();
|
|
const form = new FormData(e.target);
|
|
const email = form.get('email');
|
|
const password = form.get('password');
|
|
alert(`email: ${email}, password: ${password}`);
|
|
};
|
|
|
|
const formReset = document.querySelector('#formReset');
|
|
const clearBtn = document.querySelector('#clear');
|
|
|
|
clearBtn.addEventListener('click', () => {
|
|
formReset.reset();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|