npm 包 mi-angular-bootstrap-ultron 使用教程-JavaScript中文网-JavaScript教程资源分享门户

mi-angular-bootstrap-ultron 是一个基于 AngularJS 和 Bootstrap 的的 UI 库，它提供了一些常用的 UI 组件，如菜单、分页、模态框等。本文将介绍如何使用该库。

安装

使用 npm 安装 mi-angular-bootstrap-ultron：

npm install mi-angular-bootstrap-ultron

引入

在 HTML 文件中引入所需的 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="node_modules/mi-angular-bootstrap-ultron/dist/mi-angular-bootstrap-ultron.css">

<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>
<script src="node_modules/moment/min/moment.min.js"></script>
<script src="node_modules/mi-angular-bootstrap-ultron/dist/mi-angular-bootstrap-ultron.js"></script>

在 AngularJS 应用中，需要将 mi-angular-bootstrap-ultron 添加为依赖项：

angular.module('myApp', ['mi-angular-bootstrap-ultron']);

使用

mi-angular-bootstrap-ultron 中提供了很多 UI 组件，下面介绍几个常用的组件。

mi-pagination

mi-pagination 是一个分页组件，它可以根据数据总量、每页显示的数据量以及当前页等参数自动生成分页页码并提供跳转功能。

使用示例

在 HTML 文件中添加 mi-pagination 指令：

<mi-pagination current-page="currentPage" total-items="totalItems" max-size="5" boundary-links="true" ng-model="currentPage" ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></mi-pagination>

在 controller 中定义 currentPage、totalItems 和 pageChanged 方法：

$scope.currentPage = 1;
$scope.totalItems = 100;

$scope.pageChanged = function() {
  // 获取数据
};

参数说明

mi-pagination 支持以下参数：

参数名	类型	默认值	说明
current-page	number	1	当前页码
total-items	number	0	数据总量
items-per-page	number	10	每页显示的数据量
max-size	number or string	null	最多显示的页码数量
boundary-links	boolean	false	是否显示首页和尾页链接
rotate	boolean	false	是否启用旋转
previous-text	string	'上一页'	上一页链接的文本
next-text	string	'下一页'	下一页链接的文本
first-text	string	'首页'	首页链接的文本
last-text	string	'尾页'	尾页链接的文本

mi-drop-menu

mi-drop-menu 是一个下拉菜单组件，它可以显示多级菜单。

使用示例

在 HTML 文件中添加 mi-drop-menu 指令：

<mi-drop-menu menu="menu"></mi-drop-menu>

在 controller 中定义 menu：

-- -------------------- ---- -------
----------- - -
  -
    ------ ------
    --------- -
      -
        ------ -------
        --------- -
          -
            ------ -------
          --
          -
            ------ -------
          -
        -
      --
      -
        ------ ------
      -
    -
  --
  -
    ------ ------
    --------- -
      -
        ------ -------
        --------- -
          -
            ------ -------
          --
          -
            ------ -------
          -
        -
      -
    -
  -
--

参数说明

mi-drop-menu 支持以下参数：

参数名	类型	默认值	说明
menu	array	[]	菜单项数组，每个菜单项包括 label 和 children 两个属性

总结

mi-angular-bootstrap-ultron 是一个非常实用的 UI 库，它提供了很多常用的 UI 组件，可以极大地提高开发效率。本文主要介绍了 mi-pagination 和 mi-drop-menu 两个组件的使用方法，更多组件的使用方法请参考官方文档。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066f461d8e776d08040f83