add slider

example/app/components/Slider/Slider.component.js

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

example/app/components/Slider/Slider.controller.js

@@ -0,0 +1,15 @@
+/**
+ * @description xxxx
+ *
+ * @author XXXXX@wandan.cn
+ * @date Mon May 08 2017 09:23:25 GMT+0800 (CST)
+ * @example: http://www.fancyui.org/#/zh-cn/component/Slider
+ */
+
+import Base from '../../base';
+export default class SliderController extends Base{
+  constructor($state,$translate) {
+    'ngInject';
+    super($state,$translate)
+  }
+}

example/app/components/Slider/Slider.html

@@ -0,0 +1,49 @@
+<section class="intro-content">
+	<h1 translate='{{vm.$state.current.name}}'></h1>
+	<p>XXXXXXXXX</p>
+</section>
+
+<section class="intro-content">
+	<h2>{{'Install' | translate}}</h2>
+	<p>xxxxxxxx</p>
+</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>
+	<p>XXXX</p>
+</section>
+
+<div class="example-block">
+	<div class="highlight no-border" hljs hljs-language="javascript">
+		XXX.js 代码
+	</div>
+</div>
+
+<!--示例-->
+<h2>{{'Example'|translate}}</h2>
+<div class="example-block">
+	<div class="bs-example pop-confirm-example">
+    <f-slider></f-slider>
+	</div>
+</div>
+
+<!--基础用法-->
+<h2>{{'Basic_Usage'|translate}}</h2>
+<h3>View</h3>
+<div class="example-block">
+<div class="highlight no-border" hljs hljs-language="html">
+</div>
+</div>
+
+<h3>controller</h3>
+
+<div class="example-block">
+<div class="highlight no-border" hljs hljs-language="javascript">
+controller
+</div>
+</div>

example/app/components/Slider/Slider.js

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

example/app/router/routerConfig.js

@@ -577,5 +577,18 @@ export default [
     tracking: {
       key: 'breadcrumb'
     }
+  },
+  {
+    name: 'slider',
+    moduleName: {
+      'en-us': 'slider',
+      'zh-cn': '滑动输入条'
+    },
+    url: "/component/slider",
+    template: '<slider></slider>',
+    lazyload: require("bundle?lazy&name=slider!../components/Slider/Slider.js"),
+    tracking: {
+      key: 'slider'
+    }
   }
 ]

lib/Slider/README.md

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

lib/Slider/Slider.component.js

@@ -0,0 +1,25 @@
+import template from './Slider.html';
+import controller from './Slider.controller';
+import './Slider.less';
+
+let SliderComponent = {
+  restrict: 'E',
+  bindings: {
+    range: '<',
+    min: '<',
+    max: '<',
+    step: '<',
+    marks: '<',
+    dots: '<',
+    defaultValue: '<',
+    disabled: '<',
+    vertical: '<',
+    onChange: '<',
+    tipFormatter: '<'
+  },
+  template,
+  controller,
+  controllerAs: 'vm'
+};
+
+export default SliderComponent;

lib/Slider/Slider.controller.js

@@ -0,0 +1,18 @@
+/**
+ * @description xxxx
+ *
+ * @author XXXXX@wandan.cn
+ * @date Mon May 08 2017 09:23:25 GMT+0800 (CST)
+ * @example: http://www.fancyui.org/#/zh-cn/component/Slider
+ */
+
+class SliderController {
+  constructor() {
+    this.name = 'Slider';
+  }
+  mousemoveHandler(e) {
+    console.log(e);
+  }
+}
+
+export default SliderController;

lib/Slider/Slider.html

@@ -0,0 +1,7 @@
+<div class="f-slider">
+  <div class="f-slider-rail"></div>
+  <div class="f-slider-track" style="visibility: visible; left: 0%; width: 30%;"></div>
+  <div class="f-slider-step"></div>
+  <div class="f-slider-handle" style="left: 30%;" ng-mousemove="vm.mousemoveHandler($event)"></div>
+  <div class="f-slider-mark"></div>
+</div>

lib/Slider/Slider.less

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

lib/Slider/Slider.spec.js

@@ -0,0 +1,37 @@
+/**
+ * @description xxxx
+ *
+ * @author XXXXX@wandan.cn
+ * @date 2016-12-31
+ * @example: http://www.fancyui.org/#/zh-cn/component/Slider
+ */
+
+import angular from 'angular';
+import mocks from 'angular-mocks';
+
+import SliderModule from './index';
+
+class ElementFinder {
+  constructor(element) {
+    this.element = angular.element(element)[0];
+  }
+
+  controllerInstance() {
+    return angular.element(this.element).scope().$$childHead.vm;
+  }
+}
+
+describe('Slider', () => {
+  let $rootScope,$compile;
+
+  beforeEach(window.module(SliderModule.name));
+  beforeEach(inject((_$rootScope_,_$compile_) => {
+    $rootScope = _$rootScope_.$new();
+    $compile = _$compile_;
+  }));
+
+  describe('测试组件', () => {
+    describe('测试基本用法', () => {});
+  });
+
+});

lib/Slider/index.js

@@ -0,0 +1,16 @@
+/**
+ * @description xxxx
+ *
+ * @author XXXXX@wandan.cn
+ * @date Mon May 08 2017 09:23:25 GMT+0800 (CST)
+ * @example: http://www.fancyui.org/#/zh-cn/component/Slider
+ */
+
+import SliderComponent from './Slider.component';
+
+let SliderModule = angular.module('f-Slider', [
+])
+
+.component('fSlider', SliderComponent);
+
+export default SliderModule;