add breadcrumb

example/app/common/commonmenu/commonmenu.html

@@ -39,6 +39,7 @@
 						<div class="nav-group-title">{{'Navigation'|translate}}</div>
 						<ul>
 							<!--<li ui-sref-active="active"><a ui-sref="{{vm.globalRoute('tabs')}}">{{'tabs'|translate}}</a></li>-->
+							<li ui-sref-active="active"><a ui-sref="{{vm.globalRoute('breadcrumb')}}">{{'breadcrumb'|translate}}</a></li>
 							<li ui-sref-active="active"><a ui-sref="{{vm.globalRoute('steps')}}">{{'steps'|translate}}</a></li>
               <li ui-sref-active="active"><a ui-sref="{{vm.globalRoute('nav')}}">{{'nav'|translate}}</a></li>
               <li ui-sref-active="active"><a ui-sref="{{vm.globalRoute('menu')}}">{{'menu'|translate}}</a></li>

example/app/components/Breadcrumb/Breadcrumb.component.js

@@ -0,0 +1,11 @@
+import template from './Breadcrumb.html';
+import controller from './Breadcrumb.controller';
+import './Breadcrumb.less';
+
+export default {
+  restrict: 'E',
+  bindings: {},
+  template,
+  controller,
+  controllerAs: 'vm'
+};

example/app/components/Breadcrumb/Breadcrumb.controller.js

@@ -0,0 +1,37 @@
+/**
+ * @description xxxx
+ *
+ * @author XXXXX@wandan.cn
+ * @date Wed Apr 19 2017 11:18:31 GMT+0800 (CST)
+ * @example: http://www.fancyui.org/#/zh-cn/component/Breadcrumb
+ */
+
+import Base from '../../base';
+export default class BreadcrumbController extends Base{
+  constructor($state,$translate) {
+    'ngInject';
+    super($state,$translate)
+
+    this.datasource = [
+      {
+        name: 'Home',
+        icon: '<span class="glyphicon glyphicon-home"></span>'
+      },
+      {
+        name: 'Application Center',
+        icon: ''
+      },
+      {
+        name: 'Application List',
+        icon: ''
+      },
+      {
+        name: 'An Application',
+        icon: ''
+      },
+    ];
+    this.onClick = item => {
+      console.log(item);
+    };
+  }
+}

example/app/components/Breadcrumb/Breadcrumb.html

@@ -0,0 +1,72 @@
+<section class="intro-content">
+	<h1 translate='{{vm.$state.current.name}}'></h1>
+</section>
+
+<section class="intro-content">
+	<h2>{{'Install' | translate}}</h2>
+</section>
+
+<div class="example-block">
+<div class="highlight" hljs hljs-language="bash">
+npm install fancyui --save</div>
+</div>
+
+<section class="intro-content">
+	<h2>{{'Inject_Module' | translate}}</h2>
+</section>
+
+<div class="example-block">
+	<div class="highlight no-border" hljs hljs-language="javascript">
+import {Breadcrumb} from 'fancyui';
+
+export default angular.module('BreadcrumbDemo', [
+    Breadcrumb.name
+])
+
+	</div>
+</div>
+
+<!--示例-->
+<h2>{{'Example'|translate}}</h2>
+<div class="example-block">
+	<div class="bs-example pop-confirm-example">
+    <f-breadcrumb datasource="vm.datasource" on-click="vm.onClick" separator=">"></f-breadcrumb>
+	</div>
+</div>
+
+<!--基础用法-->
+<h2>{{'Basic_Usage'|translate}}</h2>
+<h3>View</h3>
+<div class="example-block">
+<div class="highlight no-border" hljs hljs-language="html">
+<f-breadcrumb datasource="vm.datasource" on-click="vm.onClick" separator=">"></f-breadcrumb>
+</div>
+</div>
+
+<h3>controller</h3>
+
+<div class="example-block">
+<div class="highlight no-border" hljs hljs-language="javascript">
+this.datasource = [
+{
+name: 'Home',
+icon: '<span class="glyphicon glyphicon-home"></span>'
+},
+{
+name: 'Application Center',
+icon: ''
+},
+{
+name: 'Application List',
+icon: ''
+},
+{
+name: 'An Application',
+icon: ''
+},
+];
+this.onClick = item => {
+console.log(item);
+};
+</div>
+</div>

example/app/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,7 @@
+import Breadcrumb from '../../../../lib/Breadcrumb/index.js';
+
+import BreadcrumbComponent from './Breadcrumb.component';
+export default angular.module('Breadcrumb', [
+  Breadcrumb.name
+])
+.component('breadcrumb', BreadcrumbComponent);

example/app/router/routerConfig.js

@@ -564,5 +564,18 @@ export default [
     tracking: {
       key: 'pagination'
     }
+  },
+  {
+    name: 'breadcrumb',
+    moduleName: {
+      'en-us': 'breadcrumb',
+      'zh-cn': '面包屑'
+    },
+    url: "/component/breadcrumb",
+    template: '<breadcrumb></breadcrumb>',
+    lazyload: require("bundle?lazy&name=breadcrumb!../components/Breadcrumb/Breadcrumb.js"),
+    tracking: {
+      key: 'breadcrumb'
+    }
   }
 ]

lib/Breadcrumb/Breadcrumb.component.js

@@ -0,0 +1,17 @@
+import template from './Breadcrumb.html';
+import controller from './Breadcrumb.controller';
+import './Breadcrumb.less';
+
+let BreadcrumbComponent = {
+  restrict: 'E',
+  bindings: {
+    datasource: '<',
+    onClick: '<',
+    separator: '@'
+  },
+  template,
+  controller,
+  controllerAs: 'vm'
+};
+
+export default BreadcrumbComponent;

lib/Breadcrumb/Breadcrumb.controller.js

@@ -0,0 +1,25 @@
+/**
+ * @description xxxx
+ *
+ * @author XXXXX@wandan.cn
+ * @date Wed Apr 19 2017 11:18:31 GMT+0800 (CST)
+ * @example: http://www.fancyui.org/#/zh-cn/component/Breadcrumb
+ */
+
+class BreadcrumbController {
+  constructor() {
+    if (!this.datasource || !Array.isArray(this.datasource) || !this.datasource.length) {
+      this.datasource = null;
+    }
+
+    if (!this.separator) {
+      this.separator = '/';
+    }
+
+    if (!this.onClick || typeof this.onClick != 'function') {
+      this.onClick = () => {}
+    }
+  }
+}
+
+export default BreadcrumbController;

lib/Breadcrumb/Breadcrumb.html

@@ -0,0 +1,9 @@
+<div class="f-breadcrumb" ng-if="vm.datasource">
+  <span ng-repeat="item in vm.datasource" ng-click="vm.onClick(item, $index)">
+    <span class="f-breadcrumb-link">
+      <span ng-if="item.icon" f-bind-html="item.icon"></span>
+      <span ng-if="item.name">{{item.name}}</span>
+    </span>
+    <span class="f-breadcrumb-separator">{{vm.separator}}</span>
+  </span>
+</div>

lib/Breadcrumb/Breadcrumb.less

@@ -0,0 +1,2 @@
+@import "~fancy-theme/components/breadcrumb/style/index.less";
+@ant-prefix: f;

lib/Breadcrumb/Breadcrumb.spec.js

@@ -0,0 +1,50 @@
+/**
+ * @description xxxx
+ *
+ * @author XXXXX@wandan.cn
+ * @date 2016-12-31
+ * @example: http://www.fancyui.org/#/zh-cn/component/Breadcrumb
+ */
+
+import angular from 'angular';
+import mocks from 'angular-mocks';
+
+import BreadcrumbModule from './index';
+
+class ElementFinder {
+  constructor(element) {
+    this.element = angular.element(element)[0];
+  }
+
+  controllerInstance() {
+    return angular.element(this.element).scope().$$childHead.vm;
+  }
+}
+
+describe('Breadcrumb', () => {
+  let $rootScope,$compile;
+
+  beforeEach(window.module(BreadcrumbModule.name));
+  beforeEach(inject((_$rootScope_,_$compile_) => {
+    $rootScope = _$rootScope_.$new();
+    $compile = _$compile_;
+  }));
+
+  describe('测试组件', () => {
+    describe('测试基本用法', () => {
+      it('测试选项默认值', () => {
+        let vm = {
+          datasource: []
+        };
+        $rootScope.vm = vm;
+
+        let element = $compile('<f-breadcrumb datasource="vm.datasource" on-click="vm.onClick"></f-breadcrumb>')($rootScope);
+        let controller = new ElementFinder(element).controllerInstance();
+        assert.equal(controller.datasource, null);
+        assert.equal(typeof controller.onClick, 'function');
+        assert.equal(controller.separator, '/');
+      });
+    });
+  });
+
+});

lib/Breadcrumb/README.md

@@ -0,0 +1,22 @@
+#按钮 Breadcrumb
+
+## Intro
+
+FancyUI Breadcrumb component
+
+## Usage
+
+```
+import {Breadcrumb} from 'fancyui';
+export default angular.module('BreadcrumbDemo', [
+  Breadcrumb.name
+])
+```
+
+```
+<f-Breadcrumb></f-Breadcrumb>
+```
+
+### See what happened && get all config options 
+
+http://www.fancyui.org/#/zh-cn/component/Breadcrumb

lib/Breadcrumb/index.js

@@ -0,0 +1,18 @@
+/**
+ * @description xxxx
+ *
+ * @author XXXXX@wandan.cn
+ * @date Wed Apr 19 2017 11:18:31 GMT+0800 (CST)
+ * @example: http://www.fancyui.org/#/zh-cn/component/Breadcrumb
+ */
+
+import BreadcrumbComponent from './Breadcrumb.component';
+import Directive from '../Directive/index';
+
+let BreadcrumbModule = angular.module('f-Breadcrumb', [
+  Directive.name
+])
+
+.component('fBreadcrumb', BreadcrumbComponent);
+
+export default BreadcrumbModule;