侧 MDB Pro组件

Sidenav-Bootstrap 5和Material Design 2.0导航

侧面导航组件提供了一种轻松浏览网站的简便方法。它的 外观和行为可以通过data-mdb-attributes和方法轻松调整- 其他功能，如触摸事件和焦点陷阱（在过模式下）是 开箱即用。

注意：阅读 API 标签以找到所有可用选项，然后 高级定制

Video tutorial

View full screen demo

基本例子

在基本版本中，侧面导航将显示在您网站的内容之后 单击切换器。

注意：使用 show 和 hide 方法来切换导航 JavaScript。

注意：将 show 类添加到sidenav折叠元素中，将对此展开 渲染上的类别。

定位

在使用 side 和 push 模式时，可以指定选择器 为您页面的内容-这样，组件将自动更新填充和 利润。要以非标准方式自定义此行为，请结合使用媒体查询 ＆ update.mdb.sidenav 事件

Select mode:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, ornare quis interdum a, cursus in quam. Quisque risus libero, cursus eget eros vitae, aliquam placerat velit. Vivamus luctus eros id sagittis luctus. Pellentesque felis nulla, rhoncus viverra nunc vitae, viverra aliquam ante. Ut feugiat mattis tempor.

颜色示例

设置 color 属性将更改背景和字体颜色 活动/悬停的链接和类别。

注意：此选项适用于MDB 5主色-主，次，警告，危险，成功， 信息，黑暗与光明。

Select color:

黑暗的例子

在侧面导航中使用较暗的背景时，建议设置 将 color 属性设置为“浅”以获得更好的对比度。

内部滚动

将内部元素的选择器传递给 scrollContainer 选项将仅在此容器上初始化MDB滚动条（通过 默认情况下，它是在sidenav的main元素上初始化的）。

菜单项滚动

您可以使用自定义样式， 滚动条以添加内部 滚动查看菜单项。

苗条的例子

您可以通过设置在苗条模式下隐藏/显示元素 它们上的 data-mdb-slim 属性-根据值的不同，它们将是可见的 仅在苗条或扩展模式下。没有此属性的元素将同时出现在两种模式下。

手风琴的例子

使用 accordion 选项将只能一次扩展一个类别。

团体

您可以在侧面导航中使用多个菜单-在这种情况下，手风琴将 彼此独立。

对

通过将导航栏设置在另一侧 right 属性设置为 true 。

全屏示例

以下示例以全屏方式显示了侧面导航组件的各种设置 模式。

1。基本侧面导航

单击切换器以显示导航（上方模式）。

View full screen demo

2。。具有模式转换的侧面导航

调整窗口大小以将模式从 side 更改为 over 。

View full screen demo

3。。超薄侧面导航（深色）

不可扩展的超薄sidenav，具有深色背景和自定义宽度。

View full screen demo

4。。MDB导航

基于MDB文档的导航模板，具有以下设置：

  • 隐藏在小于 1400px 的屏幕上
  • 通过CSS将 padding-left：240px 添加到 header 和 屏幕上的 main 大于 1400px ，以将内容推出 西德纳夫地区的
  • Sidenav切换器已添加到导航栏中，并隐藏在屏幕上，其尺寸大于 1400px
  • 在小于1400px 的屏幕上，sidenav模式从 side 更改为 over 。
View full screen demo

侧 - API

用法

通过数据属性

具有 sidenav 类的元素将自动初始化-您可以设置 具有数据属性的所有可用选项。切换元素也可以不进行任何操作 其他Javascript代码-只需设置 data-mdb-toggle 和 导航切换器上的 data-mdb-target 属性。 


        <nav class="sidenav" id="sidenav" data-mdb-color="secondary">
          <!-- ... -->
        </nav>

        <button type="button" data-mdb-toggle="sidenav" data-mdb-target="#sidenav">
          Toggle sidenav
        </button>

通过JavaScript

您可以使用以下代码从Javascript代码访问实例： Sidenav类的 getInstance 静态方法-它允许使用所有 方法部分中列出的公共方法。 


        const sidenavInstance = mdb.Sidenav.getInstance(document.getElementById('sidenav'));

        sidenavInstance.update({ color: 'warning'});

通过jQuery

注意：默认情况下，MDB 不包含jQuery，并且您拥有 自行添加到项目中。


        $('#sidenav').sidenav('update', { color: 'warning'})

选件

Name Type Default Description
accordion Boolean false Enables accordion behaviour in a navigation container
backdrop Boolean true Adds/removes a backdrop in an over mode
backdropClass String - Adds a custom class to a backdrop
closeOnEsc Boolean true Closes a side drawer on ESC key (only when toggler is visible)
color String primary Changes a color of active/hovered links and categories
content String Selector for a content to which a component will add paddings/margins in push/side modes
expandOnHover Boolean false Expands/collapses slim mode on mouseover / mouseleave
hidden Boolean true Initializes navigation outside a viewport
mode String over Sets position mode - available options: over, side, push
scrollContainer String Selector for a scrollable container inside a side drawer
slim Boolean false Enables a slim mode
slimCollapsed Boolean false Initializes a component in a slim mode
slimWidth Number 70 A component's width in a slim mode (pixels)
position String fixed Sets CSS position - accepted values: fixed, absolute
right Boolean false Initializes sidenav on a right side
transitionDuration Number 300 Sets a length of transitions (in milliseconds)
width Number 70 A component's width (pixels)

方法

Name Description Example
changeMode Changes a position mode (options: over, side, push) sidenavInstance.changeMode('push')
dispose Removes mdb.Sidenav instance sidenavInstance.dispose()
hide Hides a navigation drawer sidenavInstance.hide()
show Shows a navigation drawer sidenavInstance.show()
toggle Manually toggles a component sidenavInstance.toggle()
toggleSlim Manually toggles a slim state sidenavInstance.toggleSlim()
update(options) Updates a component sidenavInstance.update({ mode: 'side' }) 

        const sidenav = document.getElementById('mySidenav') 
        const sidenavInstance = new mdb.Sidenav(sidenav)
        sidenavInstance.show()

大事记

Name Description
show.mdb.sidenav Emitted when a component has been toggled
shown.mdb.sidenav Emitted once a component is shown (after transition)
hide.mdb.sidenav Emitted when a component has been toggled
hidden.mdb.sidenav Emitted once a component is hidden (after transition)
expand.mdb.sidenav Emitted when a slim mode has been toggled
expanded.mdb.sidenav Emitted once a component has expanded from a slim mode (after transition)
collapse.mdb.sidenav Emitted when a slim mode has been toggled
collapsed.mdb.sidenav Emitted once a component has collapsed into a slim mode (after transition)
update.mdb.sidenav Emitted whenever a content's offset should be updated (push/side mode). You can access the suggested values by event.padding and event.margin properties 

        const sidenav = document.getElementById('mySidenav') 
        sidenav.addEventListener('update.mdb.sidenav', event => {
          console.log(event.margin, event.padding);
        }

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件：


        import { Sidenav } from 'mdb-ui-kit';