侧 MDB Pro组件
Sidenav-Bootstrap 5和Material Design 2.0导航
侧面导航组件提供了一种轻松浏览网站的简便方法。它的 外观和行为可以通过data-mdb-attributes和方法轻松调整- 其他功能,如触摸事件和焦点陷阱(在过模式下)是 开箱即用。
注意:阅读 API 标签以找到所有可用选项,然后 高级定制
Video tutorial
基本例子
在基本版本中,侧面导航将显示在您网站的内容之后 单击切换器。
注意:使用 show
和 hide
方法来切换导航
JavaScript。
注意:将 show
类添加到sidenav折叠元素中,将对此展开
渲染上的类别。
内部滚动
将内部元素的选择器传递给
scrollContainer
选项将仅在此容器上初始化MDB滚动条(通过
默认情况下,它是在sidenav的main元素上初始化的)。
全屏示例
以下示例以全屏方式显示了侧面导航组件的各种设置 模式。
2。。具有模式转换的侧面导航
调整窗口大小以将模式从 side
更改为 over
。
3。。超薄侧面导航(深色)
不可扩展的超薄sidenav,具有深色背景和自定义宽度。
侧 - 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';