装载管理 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';