2017-08-31 15:49:19 +03:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< title >
Drawers · Bootstrap Material Design
< / title >
<!-- Twitter -->
2020-10-06 09:46:19 +03:00
< meta name = "twitter:site" content = "@MDBootstrap" >
< meta name = "twitter:creator" content = "@MDBootstrap" >
2017-08-31 15:49:19 +03:00
< meta name = "twitter:card" content = "summary" >
< meta name = "twitter:title" content = "Drawers" >
< meta name = "twitter:description" content = "" >
2020-10-06 09:46:19 +03:00
< meta name = "twitter:image" content = "https://mdbootstrap.github.io/assets/brand/bootstrap-social-logo.png" >
2017-08-31 15:49:19 +03:00
<!-- Facebook -->
2020-10-06 09:46:19 +03:00
< meta property = "og:url" content = "https://mdbootstrap.github.io/docs/4.0/material-design/drawers/" >
2017-08-31 15:49:19 +03:00
< meta property = "og:title" content = "Drawers" >
< meta property = "og:description" content = "" >
< meta property = "og:type" content = "website" >
2020-10-06 09:46:19 +03:00
< meta property = "og:image" content = "https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/mdb5-about-v2.jpg" >
< meta property = "og:image:secure_url" content = "https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/mdb5-about-v2.jpg" >
2017-08-31 15:49:19 +03:00
< meta property = "og:image:type" content = "image/png" >
< meta property = "og:image:width" content = "1200" >
< meta property = "og:image:height" content = "630" >
<!-- Meta -->
< meta name = "description" content = "The most popular HTML, CSS, and JS Material Design library in the world." >
2020-10-06 09:46:19 +03:00
< meta name = "author" content = "MDB Team" >
2017-08-31 15:49:19 +03:00
<!-- Bootstrap core CSS -->
2017-08-31 15:57:09 +03:00
< link href = "/bootstrap-material-design/dist/css/bootstrap-material-design.css" rel = "stylesheet" >
2017-08-31 15:49:19 +03:00
2017-09-05 15:07:16 +03:00
< link href = "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel = "stylesheet" >
< link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" >
2017-08-31 15:49:19 +03:00
<!-- Documentation extras -->
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" / >
2017-08-31 15:57:09 +03:00
< link href = "/bootstrap-material-design/assets/css/docs.min.css" rel = "stylesheet" >
2017-08-31 15:49:19 +03:00
<!-- Favicons -->
2017-08-31 15:57:09 +03:00
< link rel = "apple-touch-icon" href = "/bootstrap-material-design/apple-touch-icon.png" >
< link rel = "icon" href = "/bootstrap-material-design/favicon.ico" >
2017-08-31 15:49:19 +03:00
< / head >
< body class = "bd-docs" data-spy = "scroll" data-target = ".bd-sidenav-active" >
< a id = "skippy" class = "sr-only sr-only-focusable" href = "#content" >
< div class = "container" >
< span class = "skiplink-text" > Skip to main content< / span >
< / div >
< / a >
< header class = "navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar" >
2017-08-31 15:57:09 +03:00
< a class = "navbar-brand mr-0 mr-md-2" href = "/bootstrap-material-design/" aria-label = "Bootstrap" >
2017-08-31 15:49:19 +03:00
< svg class = "d-block" width = "36" height = "36" viewbox = "0 0 612 612" xmlns = "http://www.w3.org/2000/svg" focusable = "false" > < title > Bootstrap< / title > < path fill = "currentColor" d = "M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z" / > < path fill = "currentColor" d = "M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z" / > < / svg >
< / a >
< div class = "navbar-nav-scroll" >
< ul class = "navbar-nav bd-navbar-nav flex-row" >
< li class = "nav-item" >
2020-10-09 14:33:49 +03:00
< a class = "nav-link " href = "/bootstrap-material-design/" > Home< / a >
2017-08-31 15:49:19 +03:00
< / li >
< li class = "nav-item" >
2020-10-09 14:33:49 +03:00
< a class = "nav-link active" href = "/bootstrap-material-design/docs/4.0/getting-started/introduction/" > Documentation< / a >
2017-08-31 15:49:19 +03:00
< / li >
< li class = "nav-item" >
2020-10-09 14:33:49 +03:00
< a class = "nav-link " href = "/bootstrap-material-design/docs/4.0/examples/" > Examples< / a >
2017-08-31 15:49:19 +03:00
< / li >
2020-10-09 14:33:49 +03:00
< li class = "nav-item" >
< a class = "nav-link" href = "https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683" > Material Kit PRO< / a >
2017-08-31 15:49:19 +03:00
< / li >
2020-10-05 16:40:56 +03:00
2017-08-31 15:49:19 +03:00
< / ul >
< / div >
< ul class = "navbar-nav flex-row ml-md-auto d-none d-md-flex" >
< li class = "nav-item dropdown" >
< a class = "nav-item nav-link dropdown-toggle mr-md-2" href = "#" id = "bd-versions" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
2020-10-06 09:46:19 +03:00
v4.x
2017-08-31 15:49:19 +03:00
< / a >
< div class = "dropdown-menu dropdown-menu-right" aria-labelledby = "bd-versions" >
2020-10-09 14:33:49 +03:00
< a class = "dropdown-item" href = "https://mdbootstrap.com/docs/standard/?utm_ref_id=28683" > Latest (5.x)< / a >
2020-10-06 09:22:43 +03:00
< a class = "dropdown-item active" href = "/bootstrap-material-design/docs/4.0/" > Default (4.x)< / a >
2020-10-06 09:46:19 +03:00
2017-08-31 15:49:19 +03:00
< / div >
< / li >
< li class = "nav-item" >
2020-10-05 16:31:38 +03:00
< a class = "nav-link p-2" href = "https://github.com/mdbootstrap" target = "_blank" rel = "noopener" aria-label = "GitHub" >
2017-08-31 15:49:19 +03:00
< svg class = "navbar-nav-svg" xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 512 499.36" focusable = "false" > < title > GitHub< / title > < path d = "M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill = "currentColor" fill-rule = "evenodd" / > < / svg >
< / a >
< / li >
< li class = "nav-item" >
2020-10-05 16:31:38 +03:00
< a class = "nav-link p-2" href = "https://twitter.com/MDBootstrap" target = "_blank" rel = "noopener" aria-label = "Twitter" >
2017-08-31 15:49:19 +03:00
< svg class = "navbar-nav-svg" xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 512 416.32" focusable = "false" > < title > Twitter< / title > < path d = "M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill = "currentColor" / > < / svg >
< / a >
< / li >
< / ul >
2020-10-05 16:31:38 +03:00
< a class = "btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href = "https://github.com/mdbootstrap/bootstrap-material-design/releases" > Download< / a >
2017-08-31 15:49:19 +03:00
< / header >
< div class = "container-fluid" >
< div class = "row flex-xl-nowrap" >
< div class = "col-12 col-md-3 col-xl-2 bd-sidebar" >
< form class = "bd-search d-flex align-items-center" >
< input type = "search" class = "form-control" id = "search-input" placeholder = "Search..." aria-label = "Search for..." autocomplete = "off" >
< button class = "btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type = "button" data-toggle = "collapse" data-target = "#bd-docs-nav" aria-controls = "bd-docs-nav" aria-expanded = "false" aria-label = "Toggle docs avigation" >
< svg class = "" xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 30 30" width = "30" height = "30" focusable = "false" > < title > Menu< / title > < path stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-miterlimit = "10" d = "M4 7h22M4 15h22M4 23h22" / > < / svg >
< / button >
< / form >
< nav class = "collapse bd-links" id = "bd-docs-nav" >
< div class = "bd-toc-item " >
2017-08-31 15:57:09 +03:00
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/getting-started/introduction/" >
2017-08-31 15:49:19 +03:00
Getting started
< / a >
< ul class = "nav bd-sidenav" >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/introduction/" >
2017-08-31 15:49:19 +03:00
Introduction
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/download/" >
2017-08-31 15:49:19 +03:00
Download
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/contents/" >
2017-08-31 15:49:19 +03:00
Contents
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/browsers-devices/" >
2017-08-31 15:49:19 +03:00
Browsers & devices
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/javascript/" >
2017-08-31 15:49:19 +03:00
JavaScript
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/theming/" >
Theming
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/build-tools/" >
2017-08-31 15:49:19 +03:00
Build tools
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/webpack/" >
2017-08-31 15:49:19 +03:00
Webpack
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/accessibility/" >
2017-08-31 15:49:19 +03:00
Accessibility
< / a >
< / li >
< / ul >
< / div >
< div class = "bd-toc-item " >
2017-08-31 15:57:09 +03:00
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/layout/overview/" >
2017-08-31 15:49:19 +03:00
Layout
< / a >
< ul class = "nav bd-sidenav" >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/layout/overview/" >
2017-08-31 15:49:19 +03:00
Overview
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/layout/grid/" >
2017-08-31 15:49:19 +03:00
Grid
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/layout/media-object/" >
2017-08-31 15:49:19 +03:00
Media object
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/layout/utilities-for-layout/" >
2017-08-31 15:49:19 +03:00
Utilities for layout
< / a >
< / li >
< / ul >
< / div >
< div class = "bd-toc-item " >
2017-08-31 15:57:09 +03:00
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/content/reboot/" >
2017-08-31 15:49:19 +03:00
Content
< / a >
< ul class = "nav bd-sidenav" >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/content/reboot/" >
2017-08-31 15:49:19 +03:00
Reboot
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/content/typography/" >
2017-08-31 15:49:19 +03:00
Typography
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/content/code/" >
2017-08-31 15:49:19 +03:00
Code
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/content/images/" >
2017-08-31 15:49:19 +03:00
Images
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/content/tables/" >
2017-08-31 15:49:19 +03:00
Tables
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/content/figures/" >
2017-08-31 15:49:19 +03:00
Figures
< / a >
< / li >
< / ul >
< / div >
2018-01-23 15:38:38 +03:00
< div class = "bd-toc-item active" >
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/material-design/buttons/" >
Material Design
2017-08-31 15:49:19 +03:00
< / a >
< ul class = "nav bd-sidenav" >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/buttons/" >
Buttons
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/collapse-inline/" >
Collapse inline
2017-08-31 15:49:19 +03:00
< / a >
< / li >
2018-01-23 15:38:38 +03:00
< li class = "active bd-sidenav-active" >
< a href = "/bootstrap-material-design/docs/4.0/material-design/drawers/" >
Drawers
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/extensions/" >
Extensions
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/forms/" >
Forms
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/labels/" >
Labels
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/list-groups/" >
List groups
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/menus/" >
Menus
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/navs/" >
Navs
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/selections/" >
Selections
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/snackbars/" >
Snackbars
2017-08-31 15:49:19 +03:00
< / a >
< / li >
2018-01-23 15:38:38 +03:00
< / ul >
< / div >
< div class = "bd-toc-item " >
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/" >
Bootstrap Components
< / a >
< ul class = "nav bd-sidenav" >
2017-08-31 15:49:19 +03:00
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/" >
Alerts
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/badge/" >
Badge
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/" >
Breadcrumb
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/" >
Buttons
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/" >
Button group
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/card/" >
Card
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/" >
Carousel
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/" >
Collapse
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/" >
Dropdowns
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/forms/" >
Forms
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/" >
Input group
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/" >
Jumbotron
2017-08-31 15:49:19 +03:00
< / a >
< / li >
2018-01-23 15:38:38 +03:00
< li class = "" >
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/" >
List group
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/modal/" >
Modal
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/navs/" >
Navs
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/" >
Navbar
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/" >
Pagination
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/" >
Popovers
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/progress/" >
Progress
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/" >
Scrollspy
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/" >
Tooltips
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< / ul >
< / div >
< div class = "bd-toc-item " >
2017-08-31 15:57:09 +03:00
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/utilities/borders/" >
2017-08-31 15:49:19 +03:00
Utilities
< / a >
< ul class = "nav bd-sidenav" >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/borders/" >
2017-08-31 15:49:19 +03:00
Borders
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/clearfix/" >
2017-08-31 15:49:19 +03:00
Clearfix
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/close-icon/" >
2017-08-31 15:49:19 +03:00
Close icon
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/colors/" >
2017-08-31 15:49:19 +03:00
Colors
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/display/" >
2017-08-31 15:49:19 +03:00
Display
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/embed/" >
2017-08-31 15:49:19 +03:00
Embed
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/flex/" >
2017-08-31 15:49:19 +03:00
Flex
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/float/" >
2017-08-31 15:49:19 +03:00
Float
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/image-replacement/" >
2017-08-31 15:49:19 +03:00
Image replacement
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/position/" >
2017-08-31 15:49:19 +03:00
Position
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/screenreaders/" >
2017-08-31 15:49:19 +03:00
Screenreaders
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/sizing/" >
2017-08-31 15:49:19 +03:00
Sizing
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/spacing/" >
2017-08-31 15:49:19 +03:00
Spacing
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/text/" >
2017-08-31 15:49:19 +03:00
Text
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/vertical-align/" >
2017-08-31 15:49:19 +03:00
Vertical align
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/visibility/" >
2017-08-31 15:49:19 +03:00
Visibility
< / a >
< / li >
< / ul >
< / div >
< div class = "bd-toc-item " >
2018-01-23 15:38:38 +03:00
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/extend/approach/" >
2017-08-31 15:49:19 +03:00
Extend
< / a >
< ul class = "nav bd-sidenav" >
2018-01-23 15:38:38 +03:00
< li class = "" >
< a href = "/bootstrap-material-design/docs/4.0/extend/approach/" >
Approach
< / a >
< / li >
2017-08-31 15:49:19 +03:00
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/extend/icons/" >
2017-08-31 15:49:19 +03:00
Icons
< / a >
< / li >
< / ul >
< / div >
< div class = "bd-toc-item " >
2017-08-31 15:57:09 +03:00
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/migration/" >
2017-08-31 15:49:19 +03:00
Migration
< / a >
< ul class = "nav bd-sidenav" >
< / ul >
< / div >
2018-01-23 15:38:38 +03:00
< div class = "bd-toc-item " >
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/about/overview/" >
About
< / a >
< ul class = "nav bd-sidenav" >
< li class = "" >
< a href = "/bootstrap-material-design/docs/4.0/about/overview/" >
Overview
< / a >
< / li >
< li class = "" >
2020-10-06 09:46:19 +03:00
< a href = "https://mdbootstrap.com/" >
Homepage
2018-01-23 15:38:38 +03:00
< / a >
< / li >
< li class = "" >
< a href = "/bootstrap-material-design/docs/4.0/about/license/" >
License
< / a >
< / li >
2020-10-06 09:46:19 +03:00
2018-01-23 15:38:38 +03:00
< / ul >
< / div >
2017-08-31 15:49:19 +03:00
< / nav >
< / div >
< main class = "col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role = "main" >
< h1 class = "bd-title" id = "content" > Drawers< / h1 >
< p class = "bd-lead" > < / p >
2020-10-09 14:33:49 +03:00
< div class = "row" >
2020-11-20 17:39:49 +03:00
< div class = "col-12 text-center" >
2020-11-20 17:32:12 +03:00
< div class = "alert alert-dark" role = "alert" >
< p class = "font-weight-bold" > 90% OFF for BLACK WEEK< / p >
2020-10-09 14:33:49 +03:00
< hr >
2020-11-20 17:32:12 +03:00
< p > UI KIT's, Templates, Plugins, Premium components for Bootstrap, Angular React & Vue - including the latest 🔥 Bootstrap 5 version!< / p >
< strong > Hurry up! All offers are LIMITED< / strong > < br >
< span class = "font-weight-bold text-poppy-red" id = "time-counter" > < / span > < br >
< strong >
< a type = "button" href = "https://mdbootstrap.com/sale/"
class="btn btn-outline-danger mt-3">CLAIM OFFER NOW< / a >
2020-10-09 16:02:32 +03:00
< / strong > < / div >
< / div >
2020-11-20 17:39:49 +03:00
< script >
2020-12-02 13:37:27 +03:00
const btn = document.getElementById('myBtn');
btn.addEventListener('click', () => {
setTimeout(() => {
window.location.href = 'https://mdbootstrap.com/docs/standard/?utm_ref_id=28683';
}, 500);
});
2020-11-20 17:39:49 +03:00
< / script >
2020-11-20 17:32:12 +03:00
2020-10-09 16:02:32 +03:00
2020-10-09 14:33:49 +03:00
< / div >
2017-08-31 15:49:19 +03:00
< p > The Material Design for Bootstrap < code class = "highlighter-rouge" > Drawer< / code > provides a markup structure and plugin that allows you to display content on the bounds of any containing element. Drawers are commonly referred to as a side nav or offcanvas nav. The BMD implementation allows for positioning top, left, bottom, right, as well as two styles including push (default) as well as overlay. Both the drawer position and style can be set statically or responsively with the provided classes.< / p >
< h2 id = "contents" > Contents< / h2 >
< ul id = "markdown-toc" >
< li > < a href = "#contents" id = "markdown-toc-contents" > Contents< / a > < / li >
< li > < a href = "#overview" id = "markdown-toc-overview" > Overview< / a > < ul >
< li > < a href = "#templates-and-examples" id = "markdown-toc-templates-and-examples" > Templates and examples< / a > < / li >
< li > < a href = "#behavior" id = "markdown-toc-behavior" > Behavior< / a > < / li >
< li > < a href = "#markup" id = "markdown-toc-markup" > Markup< / a > < / li >
< li > < a href = "#toggle" id = "markdown-toc-toggle" > Toggle< / a > < / li >
< / ul >
< / li >
< li > < a href = "#styles" id = "markdown-toc-styles" > Styles< / a > < ul >
< li > < a href = "#push" id = "markdown-toc-push" > Push< / a > < / li >
< li > < a href = "#overlay" id = "markdown-toc-overlay" > Overlay< / a > < / li >
< / ul >
< / li >
< li > < a href = "#positions" id = "markdown-toc-positions" > Positions< / a > < ul >
< li > < a href = "#fixed-left" id = "markdown-toc-fixed-left" > Fixed left< / a > < / li >
< li > < a href = "#fixed-right" id = "markdown-toc-fixed-right" > Fixed right< / a > < / li >
< li > < a href = "#fixed-top" id = "markdown-toc-fixed-top" > Fixed top< / a > < / li >
< li > < a href = "#fixed-bottom" id = "markdown-toc-fixed-bottom" > Fixed bottom< / a > < / li >
< / ul >
< / li >
< li > < a href = "#customization" id = "markdown-toc-customization" > Customization< / a > < ul >
< li > < a href = "#variables" id = "markdown-toc-variables" > Variables< / a > < / li >
< li > < a href = "#custom-responsive-drawer" id = "markdown-toc-custom-responsive-drawer" > Custom responsive drawer< / a > < / li >
< li > < a href = "#custom-static-drawer" id = "markdown-toc-custom-static-drawer" > Custom static drawer< / a > < / li >
< / ul >
< / li >
< / ul >
< h2 id = "overview" > Overview< / h2 >
< h3 id = "templates-and-examples" > Templates and examples< / h3 >
< p > The following examples provide a good starting point:< / p >
< ul >
2017-08-31 15:57:09 +03:00
< li > < a href = "/bootstrap-material-design/examples/drawer/" > Drawer template< / a > is a basic fully responsive template.< / li >
< li > < a href = "/bootstrap-material-design/examples/dashboard/" > Dashboard example< / a > is a comprehensive fully responsive demonstration.< / li >
2017-08-31 15:49:19 +03:00
< / ul >
< h3 id = "behavior" > Behavior< / h3 >
< p > The default behavior for any drawer is to be < em > out< / em > of the frame of view. It can be set < em > in< / em > the frame of view either by using using one of the gridpoint responsive classes such as < code class = "highlighter-rouge" > bmd-drawer-in-lg-up< / code > , or by using < code class = "highlighter-rouge" > bmd-drawer-in< / code > . Any drawer, be it responsive or statically set to < em > in< / em > can be < em > forced< / em > out by using < code class = "highlighter-rouge" > bmd-drawer-out< / code > .< / p >
< h3 id = "markup" > Markup< / h3 >
< p > In order to use the drawer component you must use BMD’ < code class = "highlighter-rouge" > < body> < / code > , be sure that the containing element has set < code class = "highlighter-rouge" > position: relative< / code > as this layout structure utilizes an outer element that is absolutely positioned in order to enable features such as content scrolling and sticky header.< / p >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-container"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < header< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-header"< / span > < span class = "nt" > > < / span > < span class = "nt" > < /header> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-drawer"< / span > < span class = "nt" > > < / span > < span class = "nt" > < /div> < / span >
< span class = "nt" > < main< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-content"< / span > < span class = "nt" > > < / span > < span class = "nt" > < /main> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h3 id = "toggle" > Toggle< / h3 >
< p > A manual drawer toggle can be integrated with data attributes. For responsive display or hiding, use the standard Bootstrap classes. The following example will target a drawer with the id of < code class = "highlighter-rouge" > my-drawer< / code > < / p >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-toggler hidden-lg-up"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "drawer"< / span > < span class = "na" > data-target=< / span > < span class = "s" > "#my-drawer"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "nt" > > < / span > Toggle drawer< span class = "nt" > < /span> < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > menu< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span > < / code > < / pre > < / figure >
< h2 id = "styles" > Styles< / h2 >
< h3 id = "push" > Push< / h3 >
< p > The default behavior is for content to be pushed.< / p >
< div class = "bd-example" data-example-id = "drawer-s1" >
< div class = "bmd-layout-container bmd-drawer-f-l" >
< header class = "bmd-layout-header" >
< div class = "navbar navbar-light bg-faded" >
< button class = "navbar-toggler" type = "button" data-toggle = "drawer" data-target = "#dw-s1" >
< span class = "sr-only" > Toggle drawer< / span >
< i class = "material-icons" > menu< / i >
< / button >
< ul class = "nav navbar-nav" >
< li class = "nav-item" > Title< / li >
< / ul >
< / div >
< / header >
< div id = "dw-s1" class = "bmd-layout-drawer bg-faded" >
< header >
< a class = "navbar-brand" > Title< / a >
< / header >
< ul class = "list-group" >
< a class = "list-group-item" > Link 1< / a >
< a class = "list-group-item" > Link 2< / a >
< a class = "list-group-item" > Link 3< / a >
< / ul >
< / div >
< main class = "bmd-layout-content" >
< div class = "container" >
< p > Main content< / p >
< / div >
< / main >
< / div >
< / div >
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-container bmd-drawer-f-l"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < header< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-header"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar navbar-light bg-faded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-toggler"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "drawer"< / span > < span class = "na" > data-target=< / span > < span class = "s" > "#dw-s1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "nt" > > < / span > Toggle drawer< span class = "nt" > < /span> < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > menu< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span >
< span class = "nt" > < ul< / span > < span class = "na" > class=< / span > < span class = "s" > "nav navbar-nav"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < li< / span > < span class = "na" > class=< / span > < span class = "s" > "nav-item"< / span > < span class = "nt" > > < / span > Title< span class = "nt" > < /li> < / span >
< span class = "nt" > < /ul> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /header> < / span >
< span class = "nt" > < div< / span > < span class = "na" > id=< / span > < span class = "s" > "dw-s1"< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-drawer bg-faded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < header> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-brand"< / span > < span class = "nt" > > < / span > Title< span class = "nt" > < /a> < / span >
< span class = "nt" > < /header> < / span >
< span class = "nt" > < ul< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 1< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 2< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 3< span class = "nt" > < /a> < / span >
< span class = "nt" > < /ul> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < main< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-content"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "container"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p> < / span > Main content< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /main> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< h3 id = "overlay" > Overlay< / h3 >
< p > Optional behavior will overlay the drawer and provide a backdrop. This can be marked with < code class = "highlighter-rouge" > bmd-drawer-overlay< / code > to always overlay, or you can use a responsive class such as < code class = "highlighter-rouge" > bmd-drawer-overlay-md-down< / code > .< / p >
< div class = "bd-example" data-example-id = "drawer-s2" >
< div class = "bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay" >
< header class = "bmd-layout-header" >
< div class = "navbar navbar-light bg-faded" >
< button class = "navbar-toggler" type = "button" data-toggle = "drawer" data-target = "#dw-s2" >
< span class = "sr-only" > Toggle drawer< / span >
< i class = "material-icons" > menu< / i >
< / button >
< ul class = "nav navbar-nav" >
< li class = "nav-item" > Title< / li >
< / ul >
< / div >
< / header >
< div id = "dw-s2" class = "bmd-layout-drawer bg-faded" >
< header >
< a class = "navbar-brand" > Title< / a >
< / header >
< ul class = "list-group" >
< a class = "list-group-item" > Link 1< / a >
< a class = "list-group-item" > Link 2< / a >
< a class = "list-group-item" > Link 3< / a >
< / ul >
< / div >
< main class = "bmd-layout-content" >
< div class = "container" >
< p > Main content< / p >
< / div >
< / main >
< / div >
< / div >
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < header< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-header"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar navbar-light bg-faded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-toggler"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "drawer"< / span > < span class = "na" > data-target=< / span > < span class = "s" > "#dw-s2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "nt" > > < / span > Toggle drawer< span class = "nt" > < /span> < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > menu< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span >
< span class = "nt" > < ul< / span > < span class = "na" > class=< / span > < span class = "s" > "nav navbar-nav"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < li< / span > < span class = "na" > class=< / span > < span class = "s" > "nav-item"< / span > < span class = "nt" > > < / span > Title< span class = "nt" > < /li> < / span >
< span class = "nt" > < /ul> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /header> < / span >
< span class = "nt" > < div< / span > < span class = "na" > id=< / span > < span class = "s" > "dw-s2"< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-drawer bg-faded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < header> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-brand"< / span > < span class = "nt" > > < / span > Title< span class = "nt" > < /a> < / span >
< span class = "nt" > < /header> < / span >
< span class = "nt" > < ul< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 1< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 2< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 3< span class = "nt" > < /a> < / span >
< span class = "nt" > < /ul> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < main< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-content"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "container"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p> < / span > Main content< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /main> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< h2 id = "positions" > Positions< / h2 >
< p > The following positioning marker classes should be placed on the < code class = "highlighter-rouge" > bmd-layout-container< / code > element:< / p >
< table >
< thead >
< tr >
< th > Classes< / th >
< th > Notes< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td >
< code > .bmd-drawer-f-t< / code >
< / td >
< td >
< p > Fixed top< / p >
< / td >
< / tr >
< tr >
< td >
< code > .bmd-drawer-f-r< / code >
< / td >
< td >
< p > Fixed right< / p >
< / td >
< / tr >
< tr >
< td >
< code > .bmd-drawer-f-b< / code >
< / td >
< td >
< p > Fixed bottom< / p >
< / td >
< / tr >
< tr >
< td >
< code > .bmd-drawer-f-l< / code >
< / td >
< td >
< p > Fixed left< / p >
< / td >
< / tr >
< / tbody >
< / table >
< h3 id = "fixed-left" > Fixed left< / h3 >
< div class = "bd-example" data-example-id = "drawer-p1" >
< div class = "bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay" >
< header class = "bmd-layout-header" >
< div class = "navbar navbar-light bg-faded" >
< button class = "navbar-toggler" type = "button" data-toggle = "drawer" data-target = "#dw-p1" >
< span class = "sr-only" > Toggle drawer< / span >
< i class = "material-icons" > menu< / i >
< / button >
< ul class = "nav navbar-nav" >
< li class = "nav-item" > Title< / li >
< / ul >
< / div >
< / header >
< div id = "dw-p1" class = "bmd-layout-drawer bg-faded" >
< header >
< a class = "navbar-brand" > Title< / a >
< / header >
< ul class = "list-group" >
< a class = "list-group-item" > Link 1< / a >
< a class = "list-group-item" > Link 2< / a >
< a class = "list-group-item" > Link 3< / a >
< / ul >
< / div >
< main class = "bmd-layout-content" >
< div class = "container" >
<!-- main content -->
< / div >
< / main >
< / div >
< / div >
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < header< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-header"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar navbar-light bg-faded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-toggler"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "drawer"< / span > < span class = "na" > data-target=< / span > < span class = "s" > "#dw-p1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "nt" > > < / span > Toggle drawer< span class = "nt" > < /span> < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > menu< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span >
< span class = "nt" > < ul< / span > < span class = "na" > class=< / span > < span class = "s" > "nav navbar-nav"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < li< / span > < span class = "na" > class=< / span > < span class = "s" > "nav-item"< / span > < span class = "nt" > > < / span > Title< span class = "nt" > < /li> < / span >
< span class = "nt" > < /ul> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /header> < / span >
< span class = "nt" > < div< / span > < span class = "na" > id=< / span > < span class = "s" > "dw-p1"< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-drawer bg-faded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < header> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-brand"< / span > < span class = "nt" > > < / span > Title< span class = "nt" > < /a> < / span >
< span class = "nt" > < /header> < / span >
< span class = "nt" > < ul< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 1< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 2< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 3< span class = "nt" > < /a> < / span >
< span class = "nt" > < /ul> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < main< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-content"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "container"< / span > < span class = "nt" > > < / span >
< span class = "c" > < !-- main content --> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /main> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< h3 id = "fixed-right" > Fixed right< / h3 >
< div class = "bd-example" data-example-id = "drawer-p2" >
< div class = "bmd-layout-container bmd-drawer-f-r bmd-drawer-overlay" >
< header class = "bmd-layout-header" >
< div class = "navbar navbar-light bg-faded" >
< button class = "navbar-toggler" type = "button" data-toggle = "drawer" data-target = "#dw-p2" >
< span class = "sr-only" > Toggle drawer< / span >
< i class = "material-icons" > menu< / i >
< / button >
< ul class = "nav navbar-nav" >
< li class = "nav-item" > Title< / li >
< / ul >
< / div >
< / header >
< div id = "dw-p2" class = "bmd-layout-drawer bg-faded" >
< header >
< a class = "navbar-brand" > Title< / a >
< / header >
< ul class = "list-group" >
< a class = "list-group-item" > Link 1< / a >
< a class = "list-group-item" > Link 2< / a >
< a class = "list-group-item" > Link 3< / a >
< / ul >
< / div >
< main class = "bmd-layout-content" >
< div class = "container" >
<!-- main content -->
< / div >
< / main >
< / div >
< / div >
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-container bmd-drawer-f-r bmd-drawer-overlay"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < header< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-header"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar navbar-light bg-faded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-toggler"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "drawer"< / span > < span class = "na" > data-target=< / span > < span class = "s" > "#dw-p2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "nt" > > < / span > Toggle drawer< span class = "nt" > < /span> < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > menu< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span >
< span class = "nt" > < ul< / span > < span class = "na" > class=< / span > < span class = "s" > "nav navbar-nav"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < li< / span > < span class = "na" > class=< / span > < span class = "s" > "nav-item"< / span > < span class = "nt" > > < / span > Title< span class = "nt" > < /li> < / span >
< span class = "nt" > < /ul> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /header> < / span >
< span class = "nt" > < div< / span > < span class = "na" > id=< / span > < span class = "s" > "dw-p2"< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-drawer bg-faded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < header> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-brand"< / span > < span class = "nt" > > < / span > Title< span class = "nt" > < /a> < / span >
< span class = "nt" > < /header> < / span >
< span class = "nt" > < ul< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 1< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 2< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 3< span class = "nt" > < /a> < / span >
< span class = "nt" > < /ul> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < main< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-content"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "container"< / span > < span class = "nt" > > < / span >
< span class = "c" > < !-- main content --> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /main> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< h3 id = "fixed-top" > Fixed top< / h3 >
< div class = "bd-example" data-example-id = "drawer-p3" >
< div class = "bmd-layout-container bmd-drawer-f-t bmd-drawer-overlay" >
< header class = "bmd-layout-header" >
< div class = "navbar navbar-light bg-faded" >
< button class = "navbar-toggler" type = "button" data-toggle = "drawer" data-target = "#dw-p3" >
< span class = "sr-only" > Toggle drawer< / span >
< i class = "material-icons" > menu< / i >
< / button >
< ul class = "nav navbar-nav" >
< li class = "nav-item" > Title< / li >
< / ul >
< / div >
< / header >
< div id = "dw-p3" class = "bmd-layout-drawer bg-faded" >
< header >
< a class = "navbar-brand" > Title< / a >
< / header >
< ul class = "list-group" >
< a class = "list-group-item" > Link 1< / a >
< a class = "list-group-item" > Link 2< / a >
< a class = "list-group-item" > Link 3< / a >
< / ul >
< / div >
< main class = "bmd-layout-content" >
< div class = "container" >
<!-- main content -->
< / div >
< / main >
< / div >
< / div >
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-container bmd-drawer-f-t bmd-drawer-overlay"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < header< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-header"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar navbar-light bg-faded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-toggler"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "drawer"< / span > < span class = "na" > data-target=< / span > < span class = "s" > "#dw-p3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "nt" > > < / span > Toggle drawer< span class = "nt" > < /span> < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > menu< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span >
< span class = "nt" > < ul< / span > < span class = "na" > class=< / span > < span class = "s" > "nav navbar-nav"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < li< / span > < span class = "na" > class=< / span > < span class = "s" > "nav-item"< / span > < span class = "nt" > > < / span > Title< span class = "nt" > < /li> < / span >
< span class = "nt" > < /ul> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /header> < / span >
< span class = "nt" > < div< / span > < span class = "na" > id=< / span > < span class = "s" > "dw-p3"< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-drawer bg-faded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < header> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-brand"< / span > < span class = "nt" > > < / span > Title< span class = "nt" > < /a> < / span >
< span class = "nt" > < /header> < / span >
< span class = "nt" > < ul< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 1< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 2< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 3< span class = "nt" > < /a> < / span >
< span class = "nt" > < /ul> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < main< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-content"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "container"< / span > < span class = "nt" > > < / span >
< span class = "c" > < !-- main content --> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /main> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< h3 id = "fixed-bottom" > Fixed bottom< / h3 >
< div class = "bd-example" data-example-id = "drawer-p4" >
< div class = "bmd-layout-container bmd-drawer-f-b bmd-drawer-overlay" >
< header class = "bmd-layout-header" >
< div class = "navbar navbar-light bg-faded" >
< button class = "navbar-toggler" type = "button" data-toggle = "drawer" data-target = "#dw-p4" >
< span class = "sr-only" > Toggle drawer< / span >
< i class = "material-icons" > menu< / i >
< / button >
< ul class = "nav navbar-nav" >
< li class = "nav-item" > Title< / li >
< / ul >
< / div >
< / header >
< div id = "dw-p4" class = "bmd-layout-drawer bg-faded" >
< header >
< a class = "navbar-brand" > Title< / a >
< / header >
< ul class = "list-group" >
< a class = "list-group-item" > Link 1< / a >
< a class = "list-group-item" > Link 2< / a >
< a class = "list-group-item" > Link 3< / a >
< / ul >
< / div >
< main class = "bmd-layout-content" >
< div class = "container" >
<!-- main content -->
< / div >
< / main >
< / div >
< / div >
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-container bmd-drawer-f-b bmd-drawer-overlay"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < header< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-header"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar navbar-light bg-faded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-toggler"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "drawer"< / span > < span class = "na" > data-target=< / span > < span class = "s" > "#dw-p4"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "nt" > > < / span > Toggle drawer< span class = "nt" > < /span> < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > menu< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span >
< span class = "nt" > < ul< / span > < span class = "na" > class=< / span > < span class = "s" > "nav navbar-nav"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < li< / span > < span class = "na" > class=< / span > < span class = "s" > "nav-item"< / span > < span class = "nt" > > < / span > Title< span class = "nt" > < /li> < / span >
< span class = "nt" > < /ul> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /header> < / span >
< span class = "nt" > < div< / span > < span class = "na" > id=< / span > < span class = "s" > "dw-p4"< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-drawer bg-faded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < header> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "navbar-brand"< / span > < span class = "nt" > > < / span > Title< span class = "nt" > < /a> < / span >
< span class = "nt" > < /header> < / span >
< span class = "nt" > < ul< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 1< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 2< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "list-group-item"< / span > < span class = "nt" > > < / span > Link 3< span class = "nt" > < /a> < / span >
< span class = "nt" > < /ul> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < main< / span > < span class = "na" > class=< / span > < span class = "s" > "bmd-layout-content"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "container"< / span > < span class = "nt" > > < / span >
< span class = "c" > < !-- main content --> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /main> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< h2 id = "customization" > Customization< / h2 >
< h3 id = "variables" > Variables< / h3 >
< p > Globally, you may alter the size of < em > x< / em > vs < em > y< / em > drawers with the following variables:< / p >
< ul >
< li > < code class = "highlighter-rouge" > $bmd-drawer-x-size< / code > < / li >
< li > < code class = "highlighter-rouge" > $bmd-drawer-y-size< / code > < / li >
< / ul >
< h3 id = "custom-responsive-drawer" > Custom responsive drawer< / h3 >
< p > The following will create < em > x< / em > drawers (left/right) at the size of 500px that will respond to both marker classes and grid-based responsive classes such as < code class = "highlighter-rouge" > bmd-drawer-in-lg-up< / code > :< / p >
< figure class = "highlight" > < pre > < code class = "language-scss" data-lang = "scss" > < span class = "nc" > .kitchen-sink-drawer< / span > < span class = "p" > {< / span >
< span class = "nv" > $custom-size< / span > < span class = "p" > :< / span > < span class = "m" > 500px< / span > < span class = "p" > ;< / span >
< span class = "k" > @include< / span > < span class = "nd" > bmd-drawer-x-out< / span > < span class = "p" > (< / span > < span class = "nv" > $custom-size< / span > < span class = "p" > );< / span >
< span class = "k" > & < / span > < span class = "nd" > :not< / span > < span class = "o" > (< / span > < span class = "nc" > .bmd-drawer-out< / span > < span class = "o" > )< / span > < span class = "p" > {< / span >
< span class = "k" > @each< / span > < span class = "nv" > $breakpoint< / span > < span class = "n" > in< / span > < span class = "nf" > map-keys< / span > < span class = "p" > (< / span > < span class = "nv" > $grid-breakpoints< / span > < span class = "p" > )< / span > < span class = "p" > {< / span >
< span class = "k" > @include< / span > < span class = "nd" > bmd-drawer-x-in-up< / span > < span class = "p" > (< / span > < span class = "nv" > $custom-size< / span > < span class = "o" > ,< / span > < span class = "nv" > $breakpoint< / span > < span class = "p" > );< / span >
< span class = "p" > }< / span >
< span class = "p" > }< / span >
< span class = "p" > }< / span > < / code > < / pre > < / figure >
< h3 id = "custom-static-drawer" > Custom static drawer< / h3 >
< p > The following generates a custom drawer at the size of 500px that is < em > out< / em > by default and can be triggered < em > in< / em > with < code class = "highlighter-rouge" > bmd-drawer-in< / code > .< / p >
< figure class = "highlight" > < pre > < code class = "language-scss" data-lang = "scss" > < span class = "nc" > .kitchen-sink-drawer-static< / span > < span class = "p" > {< / span >
< span class = "nv" > $custom-size< / span > < span class = "p" > :< / span > < span class = "m" > 500px< / span > < span class = "p" > ;< / span >
< span class = "k" > @include< / span > < span class = "nd" > bmd-drawer-x-out< / span > < span class = "p" > (< / span > < span class = "nv" > $custom-size< / span > < span class = "p" > );< / span > < span class = "c1" > // closed by default
< / span > < span class = "k" > @include< / span > < span class = "nd" > bmd-drawer-x-in< / span > < span class = "p" > (< / span > < span class = "nv" > $custom-size< / span > < span class = "p" > );< / span > < span class = "c1" > // triggered with bmd-drawer-in
< / span > < span class = "k" > @include< / span > < span class = "nd" > bmd-drawer-x-overlay< / span > < span class = "p" > ();< / span > < span class = "c1" > // overlay by default, no other classes necessary
< / span > < span class = "p" > }< / span > < / code > < / pre > < / figure >
< / main >
< / div >
< / div >
2017-09-25 17:31:14 +03:00
< script src = "/bootstrap-material-design/assets/js/vendor/split.min.js" >
< / script >
< script >
Split.setup({
2020-10-05 16:31:38 +03:00
mdbootstrap: function () {document.body.classList.add('mdbootstrap')},
2017-09-25 17:47:18 +03:00
mdbootstrap: function () {document.body.classList.add('mdbootstrap')},
2018-05-08 17:53:09 +03:00
mdbootstrap2: function () {document.body.classList.add('mdbootstrap')},
2017-09-25 17:31:14 +03:00
});
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-80431047-1', 'auto');
ga('send', 'pageview');
< / script >
< script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous" > < / script >
2017-08-31 15:57:09 +03:00
< script > window . jQuery || document . write ( '<script src="/bootstrap-material-design/assets/js/vendor/jquery-slim.min.js"><\/script>' ) < / script >
2017-08-31 15:49:19 +03:00
2017-08-31 15:57:09 +03:00
< script src = "/bootstrap-material-design/assets/js/vendor/popper.min.js" > < / script >
2017-12-10 19:57:51 +03:00
< script src = "https://cdn.rawgit.com/FezVrasta/snackbarjs/1.1.0/dist/snackbar.min.js" crossorigin = "anonymous" > < / script >
2017-08-31 15:49:19 +03:00
2017-08-31 15:57:09 +03:00
< script src = "/bootstrap-material-design/dist/js/bootstrap-material-design.js" > < / script >
2017-08-31 15:49:19 +03:00
2017-08-31 15:57:09 +03:00
< script src = "/bootstrap-material-design/assets/js/vendor/anchor.min.js" > < / script >
< script src = "/bootstrap-material-design/assets/js/vendor/clipboard.min.js" > < / script >
< script src = "/bootstrap-material-design/assets/js/vendor/holder.min.js" > < / script >
< script src = "/bootstrap-material-design/assets/js/src/application.js" > < / script >
2017-08-31 15:49:19 +03:00
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
2017-08-31 15:57:09 +03:00
< script src = "/bootstrap-material-design/assets/js/ie10-viewport-bug-workaround.js" > < / script >
< script src = "/bootstrap-material-design/assets/js/ie-emulation-modes-warning.js" > < / script >
2017-08-31 15:49:19 +03:00
< script type = "text/javascript" src = "https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js" > < / script >
< script type = "text/javascript" >
var docsearch = docsearch({
2017-12-13 12:02:19 +03:00
apiKey: 'b5c13bef25101d81f781cc15f4485a52',
indexName: 'fezvrasta_bootstrap_material_design',
2017-08-31 15:49:19 +03:00
inputSelector: '#search-input',
handleSelected: function (input, event, suggestion) {
var url = suggestion.url;
url = suggestion.isLvl1 ? url.split('#')[0]: url;
// If it's a title we remove the anchor so it does not jump.
window.location.href = url;
},
transformData: function (hits) {
return hits.map(function (hit) {
2017-12-13 12:02:19 +03:00
console.log(hit.url);
2020-10-06 09:46:19 +03:00
hit.url = hit.url.replace('https://mdbootstrap.github.io/', '/');
2017-08-31 15:49:19 +03:00
return hit;
});
},
debug: false // Set debug to true if you want to inspect the dropdown
});
< / script >
< script >
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
})
< / script >
< / body >
< / html >
