angular-ui-fugu

angular-ui-fugu - AngularJS directives

依赖说明

本组件的开发主要依赖于以下几个库:

• Angular JS(v1.2.29): 组件库在1.2.29版本下进行测试,适用于1.2.x-1.3.20的AngularJS。
• Bootstrap(v3.3.6): 支持组件库样式设计。

构建

如果需要所有的组件,直接引用dist目录下的文件即可,如果需要定制化组件,在项目目录下执行下面的命令安装依赖包

npm install

安装完成之后执行

gulp -m directive1,directive2,directive3

即可自动在dist下构建需要的directive1,directive2,directive3组件集合

安装

• 使用npm安装:

  npm install angular-ui-fugu
  

使用

• 文件引入

  • angular.min.js
  • bootstrap.css
  • ui.fugu.min.css
  • ui.fugu.min.js

  angular和bootstrap文件的引入要在fugu文件引入之前

• 具体使用

/**
 * js文件
 */
angular.module('myApp',['ui.fugu']);  // 组件依赖注入
// 以alert使用为例
angular.module('fuguDemo').controller('alertDemoCtrl',['$scope', function ($scope) {
    $scope.alerts = [
        { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
        { type: 'success', msg: 'Well done! You successfully read this important alert message.' },
        { type: 'warning', msg: 'FBI Warning! Manong would ignore anything about warning.' },
        { type: 'info', msg: 'I know that you wouldn\'t see this line.' }
    ];
    $scope.closeAlert = function(index) {
        $scope.alerts.splice(index, 1);
    };
}]);


/**
 * html文件
 */
 <div ng-controller="alertDemoCtrl">
    <fugu-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="true" close-func="closeAlert($index)" has-icon="true">{{alert.msg}}</fugu-alert>
</div>

鸣谢

• Gulp：https://github.com/gulpjs/gulp
• Jasmine：http://jasmine.github.io/
• Karma：https://github.com/karma-runner/karma
• ESLint：http://eslint.org
• UI Bootstrap：https://angular-ui.github.io/bootstrap/
• ui-select：https://github.com/angular-ui/ui-select
• angular-growl-2：https://github.com/JanStevens/angular-growl-2
• angular-drag-and-drop-lists：https://github.com/marceljuenemann/angular-drag-and-drop-lists

LICENSE

ISC

Changelog

1.0.0 (2016-06-16)

Bug Fixes

• alert: add word-break for alert (fcf12e1)
• calendar: fix calendar month error (829c8d1)
• calendar: fix date error bug (1936ad0)
• calendar: fix provider name and date compare (c402795)
• datepicker: fix #1 (86117a1)
• dropdown: fix style error (2359a3f)
• merge button and buttonGroup's demo to docs: fix(merge button and buttonGroup's demo to docs): (75463ad)
• notification: remove information about alert (3ed44ef)
• pager: fix pager text (564d91c)
• position: fix position for datepicker and timepicker (abca565)
• readme: fix readme (9ec426a)
• searchBox: search clear bug (4c8c52e)
• select: fix select (2300ad6)
• select: fix select offset (f4b8d41)
• switch: fix onChange attr (364b38b)
• timepicker: fix step undefined bug (4233ca6)
• tooltip: change display of tooltip #2 (b820cfd)
• tooltip: change position for positioned element (4006461)
• tooltip: fix issue: #2 (a9b3e45)
• tooltip: refix issue:#2 (66af711)
• tree: click root node can't select children (4e8362f)

Features

• button and buttonGroup: add demo and readme docs (15abcd4)
• calendar: add calendar (4c150d9)
• datepicker: add datepicker without test case (ade2463)
• datepicker: add readonly-input attr (57868c7)
• datepicker: add showTime and size attr (8c2128e)
• modal: add modal (448d4aa)
• notification: add notification (ef97bc0)
• pager: add pageChanged event for pager (1f11f97)
• picker: add onChange for picker (6c2732c)
• position: add position service;fix timepicker and datepicker position (3a06f34)
• searchBox: add fugu-search-box (aa0adbf)
• select: add select directive (f1ca313)
• sortable: add sortable (158d9c9)
• switch: add new attr for switch (77796d8)
• switch: add switch directive (55c9f03)
• timepanel: add minTime,maxTime,readonlyInput attr (ce0344d)
• timepanel,timepicker: add timepanel and timepicker (34adf1b)
• timepicker: add min-width (366ab45)
• timepicker: add minTime,maxTime,readonlyInput for timepicker (42b033a)
• timepicker: add type for timepicker (341e331)
• tooltip,popover: add template support (0384b2f)
• tooltip,popover: finish tooltip and popover (d9c0c4a)
• tree: add tree component,without test (d7e86b3)
• tree: tree code in dist (4aaded3)