装载管理 MDB Pro component
加载管理-Bootstrap 5和Material Design 2.0
在加载数据时在容器(例如表)中显示动画。
注意:阅读 API 标签以找到所有可用选项,然后 高级定制
基本例子
将class loading
添加到元素时,将自动加载init。载入中
自动附加到 body
元素,因此如果您想将加载附加到该元素
您已经添加了带有父类或ID的 data-mdb-parent-selector
带有 parentSelector
选项的javascript。
Loading...
JavaScript初始化
您可以通过以下方式使用JavaScript初始化加载组件:
新加载(元素,选项)
。
Loading...
色彩
您可以使用 text-*
颜色为加载程序设置不同的颜色,例如主要,成功,危险,警告。
Loading...
定制微调器
MDB增长微调器
如果您不喜欢边框微调器,请切换到增长微调器。虽然没有 从技术上讲,它确实会反复增长!
Loading...
字体很棒
Loading...
延迟
全屏
装载管理 - API
用法
通过类
<div id="loading-test" style="height: 300px; width: 100%">
<div class="loading" data-mdb-parent-selector="#loading-test">
<div class="spinner-border loading-icon" role="status"></div>
<span class="loading-text">Loading...</span>
</div>
</div>
通过数据属性
<div id="loading-test" style="height: 300px; width: 100%">
<div class="loading" data-mdb-parent-selector="#loading-test" data-mdb-delay="500" data-mdb-backdrop="false">
<div class="spinner-border loading-icon" role="status"></div>
<span class="loading-text">Loading...</span>
</div>
</div>
通过JavaScript
const myLoader = new mdb.LoadingManagement(document.getElementById('myLoader'), options);
通过jQuery
注意:默认情况下,MDB 不包含jQuery,并且您拥有 自行添加到项目中。
$('.example-class').loading(options);
Options
Name | Type | Default | Description |
---|---|---|---|
backdrop
|
null || boolean | true |
Set loader backdrop/td> |
backdropColor
|
string | rgba(0, 0, 0) |
Set loader backdrop color |
backdropOpacity
|
number || string | 0.4 |
Set loader backdrop opacity |
backdropID
|
null || number | '' |
Set loader backdrop ID |
delay |
null | null |
Set deley to show loader |
loader |
string | '' |
Set ID of loader |
parentSelector
|
null | null |
Set parent of loader. It can be every element with class or id |
scroll |
boolean | true |
Set scroll to backdrop |
loadingText
|
boolean | true |
Set text to loader |
loadingIcon
|
boolean | true |
Set loading icon to lader |
方法
Name | Description | Example |
---|---|---|
toggle |
Manually toggles a loader |
myLoader.toggle()
|
const myLoader = document.getElementById('myLoaderID');
const loader = new mdb.LoadingManagement(myLoader);
loader.toggle();
进口
MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:
import { Loading } from 'mdb-ui-kit';