<!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="h6">Title - Bootstrap 5 & Material Design 2.0 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="mb-4">Basic example</h2> <!-- 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: Demo--> <section class="border p-4 d-flex justify-content-center mb-4"> <button type="button" class="btn btn-primary">Primary</button> </section> <!--Section: Demo--> <!--Section: Code--> <section> <!-- prettier-ignore --> <mdbsnippet> <code data-lang="html" data-name="HTML"> <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </code> <code data-lang="css" data-name="CSS"> p { color: blue; } </code> <code data-lang="js" data-name="JavaScript"> var myModal = new bootstrap.Modal(document.getElementById('myModal'), options) </code> </mdbsnippet> </section> <!--Section: Code--> </section> <!--Section: Basic example--> </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>