[新增] 增加Rate组件，可用于评分, fixes #258

src/app/demo-list.component.ts

@@ -30,6 +30,7 @@ import {routerConfig as paginationConfig} from "./demo/pagination/demo-set.modul
 import {routerConfig as popupConfig} from "./demo/popup/demo-set.module";
 import {routerConfig as radioConfig} from "./demo/radio-group/demo-set.module";
 import {routerConfig as radioLiteConfig} from "./demo/radio-lite/demo-set.module";
+import {routerConfig as rateConfig} from "./demo/rate/demo-set.module";
 import {routerConfig as rangeTimeConfig} from "./demo/range-time/demo-set.module";
 import {routerConfig as scrollbarConfig} from "./demo/scrollbar/demo-set.module";
 import {routerConfig as selectConfig} from "./demo/select/demo-set.module";
@@ -126,6 +127,7 @@ export class DemoListManager {
         this._addRouterConfig(routerConfig, 'popup', popupConfig);
         this._addRouterConfig(routerConfig, 'radio-group', radioConfig);
         this._addRouterConfig(routerConfig, 'radio-lite', radioLiteConfig);
+        this._addRouterConfig(routerConfig, 'rate', rateConfig);
         this._addRouterConfig(routerConfig, 'range-time', rangeTimeConfig);
         this._addRouterConfig(routerConfig, 'scrollbar', scrollbarConfig);
         this._addRouterConfig(routerConfig, 'select', selectConfig);

src/app/demo/rate/demo-set.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from "@angular/core";
+import {RouterModule} from "@angular/router";
+import {RateFullModule} from "./full/demo.module";
+import {RateFullComponent} from "./full/demo.component";
+
+export const routerConfig = [
+    {
+        path: 'full', component: RateFullComponent
+    },
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routerConfig),
+        RateFullModule
+    ]
+})
+export class RateDemoModule {
+}

src/app/demo/rate/full/demo.component.css

@@ -0,0 +1,3 @@
+.rate-font-size{
+    font-size: 20px;
+}

src/app/demo/rate/full/demo.component.html

@@ -0,0 +1,28 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+<div class="live-demo-wrap">
+    <h2>Rate</h2>
+    <div class="clearfix">
+        <div class="demo-1 live-demo live-demo-block">
+            <h3>基本</h3>
+            <p class="comment">基本用法</p>
+            <jigsaw-rate class="rate-font-size" max="5" icon="fa fa-paper-plane" [(value)]="selectedValue" (valueChange)="selectChange($event)"></jigsaw-rate>
+        </div>
+
+        <div class="demo-2 live-demo live-demo-block">
+            <h3>半星</h3>
+            <p class="comment">支持选中半星</p>
+            <jigsaw-rate class="rate-font-size" max="5" [allowHalf]="true" [(value)]="selectedHalfValue" (valueChange)="selectChange($event)"></jigsaw-rate>
+        </div>
+
+        <div class="demo-2 live-demo live-demo-block">
+            <h3>只读</h3>
+            <p class="comment">支持标签和属性两种写法</p>
+            <jigsaw-rate class="rate-font-size" max="5" [disabled]="true" [(value)]="selectedValue"></jigsaw-rate>
+        </div>
+    </div>
+</div>

src/app/demo/rate/full/demo.component.ts

@@ -0,0 +1,22 @@
+import {Component} from "@angular/core";
+
+@Component({
+    templateUrl: './demo.component.html',
+    styleUrls: ['./demo.component.css']
+})
+export class RateFullComponent {
+
+    selectedValue = 3;
+    selectedHalfValue = 2.5;
+
+    selectChange(value: any) {
+        console.log(value);
+    }
+
+    // ====================================================================
+    // ignore the following lines, they are not important to this demo
+    // ====================================================================
+    summary: string = '演示了Rate组件的多种用法';
+    description: string = '';
+}
+

src/app/demo/rate/full/demo.module.ts

@@ -0,0 +1,14 @@
+import {NgModule} from "@angular/core";
+import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+import {JigsawRateModule} from "jigsaw/component/rate";
+import {RateFullComponent} from "./demo.component";
+import {CommonModule} from "@angular/common";
+
+@NgModule({
+    declarations: [RateFullComponent],
+    exports: [RateFullComponent],
+    imports: [JigsawRateModule, JigsawDemoDescriptionModule,CommonModule]
+})
+export class RateFullModule {
+
+}

src/app/router-config.ts

@@ -129,6 +129,10 @@ export const routerConfig = [
         path: "range-time",
         loadChildren: "./demo/range-time/demo-set.module#RangeTimeDemoModule",
     },
+    {
+        path: "rate",
+        loadChildren: "./demo/rate/demo-set.module#RateDemoModule",
+    },
     {
         path: "scrollbar",
         loadChildren: "./demo/scrollbar/demo-set.module#ScrollbarDemoModule",

src/jigsaw/component/rate/index.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { JigsawRateComponent } from './rate';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [JigsawRateComponent],
+  exports: [JigsawRateComponent]
+})
+export class JigsawRateModule { }

src/jigsaw/component/rate/rate.html

@@ -0,0 +1,13 @@
+<ul [ngClass]="_$classMap" (mouseleave)="_$leaveRate($event)">
+    <li *ngFor="let i of _$stars" [ngClass]="_$setClasses(i)"
+        (mouseover)="_$hoverRate($event, i, true)"
+        (click)="_$clickRate($event, i, true)">
+        <div class="jigsaw-rate-star-first" (mouseover)="_$hoverRate($event, i)" (click)="_$clickRate($event, i)">
+            <i [ngClass]="icon"></i>
+        </div>
+        <div class="jigsaw-rate-star-second" (mouseover)="_$hoverRate($event, i, true)"
+             (click)="_$clickRate($event, i, true)">
+            <i [ngClass]="icon"></i>
+        </div>
+    </li>
+</ul>

src/jigsaw/component/rate/rate.scss

@@ -0,0 +1,60 @@
+@import "../../assets/scss/core/base";
+
+.#{$jigsaw-prefix}-rate {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: inline-block;
+    vertical-align: middle;
+    &-disabled &-star {
+        cursor: not-allowed;
+        &:hover {
+            transform: scale(1);
+        }
+    }
+    &-star {
+        padding: 0;
+        display: inline-block;
+        margin: 0 8px 0 0;
+        position: relative;
+        transition: all .3s;
+        color: #e9e9e9;
+        cursor: pointer;
+
+        &-first,
+        &-second {
+            user-select: none;
+            transition: all .3s;
+        }
+
+        &:hover {
+            transform: scale(1.1);
+        }
+
+        &-first {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 50%;
+            height: 100%;
+            overflow: hidden;
+            opacity: 0;
+        }
+
+        &-half &-first,
+        &-half &-second {
+            opacity: 1;
+        }
+
+        &-half &-first,
+        &-full &-second {
+            color: #f5a623;
+        }
+
+        &-half:hover &-first,
+        &-full:hover &-second {
+            color: #f5a623;
+        }
+    }
+}
+