476 lines
17 KiB
HTML
476 lines
17 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" />
|
||
|
|
<!-- Micon -->
|
||
|
|
<link rel="stylesheet" href="../../dev/css/micon.min.css" />
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@icon/micon@3.0.168/micon.min.css" />
|
||
|
|
<!-- 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>
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
<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 semibold mb-3">Typography</h2>
|
||
|
|
|
||
|
|
<!-- Seo title -->
|
||
|
|
<h1 class="h5 regular mb-3">Typography - Bootstrap 5 & Fluent Design component</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>
|
||
|
|
|
||
|
|
<p class="note note-light">
|
||
|
|
<strong>Note:</strong> Read the <strong>API</strong> tab to find all available
|
||
|
|
options and advanced customization
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
<!--Section: Introduction-->
|
||
|
|
|
||
|
|
<hr class="my-5" />
|
||
|
|
|
||
|
|
<!--Section: Basic example-->
|
||
|
|
<section id="section-basic-example">
|
||
|
|
<!-- Section title -->
|
||
|
|
<h2 class="semibold mb-4">Font</h2>
|
||
|
|
|
||
|
|
<p>You should use one font throughout your app's UI, and we recommend sticking with the default font for
|
||
|
|
Windows apps, Segoe UI. It's designed to maintain optimal legibility across sizes and pixel densities
|
||
|
|
and offers a clean, light, and open aesthetic that complements the content of the system.</p>
|
||
|
|
|
||
|
|
<!--Section: Demo-->
|
||
|
|
<section class="border p-4 mb-4">
|
||
|
|
|
||
|
|
<p class="header regular">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
|
||
|
|
<p class="header regular">abcdefghijklmnopqrstuvwxyz</p>
|
||
|
|
<p class="header regular">1234567890</p>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
<!--Section: Demo-->
|
||
|
|
|
||
|
|
<!--Section: Code-->
|
||
|
|
<section>
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
<mdbsnippet>
|
||
|
|
<code data-lang="html" data-name="HTML">
|
||
|
|
|
||
|
|
<p class="header regular">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
|
||
|
|
<p class="header regular">abcdefghijklmnopqrstuvwxyz</p>
|
||
|
|
<p class="header regular">1234567890</p>
|
||
|
|
|
||
|
|
</code>
|
||
|
|
|
||
|
|
</mdbsnippet>
|
||
|
|
</section>
|
||
|
|
<!--Section: Code-->
|
||
|
|
</section>
|
||
|
|
<!--Section: Basic example-->
|
||
|
|
|
||
|
|
<hr class="my-5" />
|
||
|
|
|
||
|
|
<!--Section: Hierarchy-->
|
||
|
|
<section id="section-hierarchy">
|
||
|
|
<!-- Section title -->
|
||
|
|
<h2 class="semibold mb-4">Hierarchy</h2>
|
||
|
|
|
||
|
|
<p>Users rely on visual hierarchy when scanning a page: headers summarize content, and body text
|
||
|
|
provides more detail. To create a clear visual hierarchy in your app, follow the Windows type ramp.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<!--Section: Demo-->
|
||
|
|
<section class="border p-4 mb-4">
|
||
|
|
|
||
|
|
<p class="header">Hierarchy</p>
|
||
|
|
<p class="subheader">lets the reader know</p>
|
||
|
|
<p class="subtitle">where to look first.</p>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
<!--Section: Demo-->
|
||
|
|
|
||
|
|
<!--Section: Code-->
|
||
|
|
<section>
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
<mdbsnippet>
|
||
|
|
<code data-lang="html" data-name="HTML">
|
||
|
|
|
||
|
|
<p class="header">Hierarchy</p>
|
||
|
|
<p class="subheader">lets the reader know</p>
|
||
|
|
<p class="subtitle">where to look first.</p>
|
||
|
|
|
||
|
|
</code>
|
||
|
|
|
||
|
|
</mdbsnippet>
|
||
|
|
</section>
|
||
|
|
<!--Section: Code-->
|
||
|
|
</section>
|
||
|
|
<!--Section: Hierarchy-->
|
||
|
|
|
||
|
|
<hr class="my-5" />
|
||
|
|
|
||
|
|
<!--Section: Type ramp-->
|
||
|
|
<section id="section-type-ramp">
|
||
|
|
<!-- Section title -->
|
||
|
|
<h2 class="semibold mb-4">Type ramp</h2>
|
||
|
|
|
||
|
|
<p>The Windows type ramp establishes crucial relationships between the type styles on a page, helping
|
||
|
|
users read content easily. All sizes are in effective pixels and are optimized for UWP apps running on
|
||
|
|
all devices.</p>
|
||
|
|
|
||
|
|
<!--Section: Demo-->
|
||
|
|
<section class="border p-4 mb-4">
|
||
|
|
|
||
|
|
<p class="header">Header</p>
|
||
|
|
<p class="subheader">Subheader</p>
|
||
|
|
<p class="title">Title</p>
|
||
|
|
<p class="subtitle">Subtitle</p>
|
||
|
|
<p class="base">Base</p>
|
||
|
|
<p>Body</p>
|
||
|
|
<p class="caption">Caption</p>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
<!--Section: Demo-->
|
||
|
|
|
||
|
|
<!--Section: Code-->
|
||
|
|
<section>
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
<mdbsnippet>
|
||
|
|
<code data-lang="html" data-name="HTML">
|
||
|
|
|
||
|
|
<p class="header">Header</p>
|
||
|
|
<p class="subheader">Subheader</p>
|
||
|
|
<p class="title">Title</p>
|
||
|
|
<p class="subtitle">Subtitle</p>
|
||
|
|
<p class="base">Base</p>
|
||
|
|
<p>Body</p>
|
||
|
|
<p class="caption">Caption</p>
|
||
|
|
|
||
|
|
</code>
|
||
|
|
|
||
|
|
</mdbsnippet>
|
||
|
|
</section>
|
||
|
|
<!--Section: Code-->
|
||
|
|
</section>
|
||
|
|
<!--Section: Type ramp-->
|
||
|
|
</section>
|
||
|
|
<!--Section: Docs content-->
|
||
|
|
</div>
|
||
|
|
<!--Grid column-->
|
||
|
|
|
||
|
|
<!--Grid column-->
|
||
|
|
<div class="col-md-2 mb-4">
|
||
|
|
<!-- Table of content -->
|
||
|
|
<div id="scrollspy" class="sticky-top">
|
||
|
|
<ul class="nav flex-column nav-pills menu-sidebar">
|
||
|
|
<!-- Links -->
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link active" href="#section-introduction">Introduction</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#section-basic-example">Basic example</a>
|
||
|
|
</li>
|
||
|
|
<!-- Subsections (if needed) -->
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#section-">Section</a>
|
||
|
|
<ul class="nav flex-column ps-3">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#subsection-">Subsection</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#subsection-">Subsection</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<!-- Links -->
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- 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="api-section-usage">
|
||
|
|
<!-- Section title -->
|
||
|
|
<h2>Usage</h2>
|
||
|
|
|
||
|
|
<h4 class="mt-5 mb-3">Via data attributes</h4>
|
||
|
|
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
<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="mt-5 mb-3">Via JavaScript</h4>
|
||
|
|
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
<mdbsnippet>
|
||
|
|
<code data-lang="js" data-name="JavaScript">
|
||
|
|
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
|
||
|
|
</code>
|
||
|
|
</mdbsnippet>
|
||
|
|
|
||
|
|
<h4 class="mt-5 mb-3">Via jQuery</h4>
|
||
|
|
|
||
|
|
<p class="note note-warning">
|
||
|
|
<strong>Note:</strong> By default, MDB <strong>does not</strong> include jQuery
|
||
|
|
and you have to add it to the project on your own.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
<mdbsnippet>
|
||
|
|
<code data-lang="js" data-name="jQuery">
|
||
|
|
$('.example-class').ripple(options);
|
||
|
|
</code>
|
||
|
|
</mdbsnippet>
|
||
|
|
</section>
|
||
|
|
<!--Section: Usage-->
|
||
|
|
|
||
|
|
<hr class="my-5" />
|
||
|
|
|
||
|
|
<!--Section: Options-->
|
||
|
|
<section id="api-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="api-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>
|
||
|
|
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
<mdbsnippet>
|
||
|
|
<code data-lang="js" data-name="JavaScript">
|
||
|
|
var myModalEl = document.getElementById('myModal')
|
||
|
|
var modal = new mdb.Modal(myModalEl)
|
||
|
|
modal.toggle()
|
||
|
|
</code>
|
||
|
|
</mdbsnippet>
|
||
|
|
</section>
|
||
|
|
<!--Section: Methods-->
|
||
|
|
|
||
|
|
<hr class="my-5" />
|
||
|
|
|
||
|
|
<!--Section: Events-->
|
||
|
|
<section id="api-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>
|
||
|
|
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
<mdbsnippet>
|
||
|
|
<code data-lang="js" data-name="JavaScript">
|
||
|
|
var myModalEl = document.getElementById('myModal')
|
||
|
|
myModalEl.addEventListener('show.bs.modal', function (e) {
|
||
|
|
// do something...
|
||
|
|
})
|
||
|
|
</code>
|
||
|
|
</mdbsnippet>
|
||
|
|
</section>
|
||
|
|
<!--Section: Events-->
|
||
|
|
|
||
|
|
<hr class="my-5" />
|
||
|
|
|
||
|
|
<!--Section: Import-->
|
||
|
|
<section id="api-section-import">
|
||
|
|
<!-- Section title -->
|
||
|
|
<h2 class="mb-4">Import</h2>
|
||
|
|
|
||
|
|
<!-- Description -->
|
||
|
|
<p>
|
||
|
|
<strong>MDB UI KIT</strong> also works with module bundlers. Use the following
|
||
|
|
code to import this component:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
<mdbsnippet>
|
||
|
|
<code data-lang="js" data-name="JavaScript">
|
||
|
|
import { Modal } from 'mdb-ui-kit';
|
||
|
|
</code>
|
||
|
|
</mdbsnippet>
|
||
|
|
</section>
|
||
|
|
<!--Section: Import-->
|
||
|
|
</section>
|
||
|
|
<!--Section: API content-->
|
||
|
|
</div>
|
||
|
|
<!--Grid column-->
|
||
|
|
|
||
|
|
<!--Grid column-->
|
||
|
|
<div class="col-md-2 mb-4">
|
||
|
|
<!-- Table of content -->
|
||
|
|
<div id="scrollspy" class="sticky-top">
|
||
|
|
<ul class="nav flex-column nav-pills menu-sidebar">
|
||
|
|
<!-- Links -->
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link active" href="#api-section-usage">Usage</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#api-section-options">Options</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#api-section-methods">Methods</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#api-section-events">Events</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#api-section-import">Import</a>
|
||
|
|
</li>
|
||
|
|
<!-- Links -->
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- 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"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|