feat(共享模块): 添加Card模块 Card组件 CardHeader组件 CardContent组件 Divider组件

src/app/shared/card/README.md

@@ -0,0 +1,48 @@
+# card 【卡】
+
+## Component 【组件】
+
+### CardComponent 【卡容器组件】
+
+#### Selector(选择器)：sim-card,[sim-card]
+
+#### Attributes(css属性选择器): 
+- [sim-card-bordered],[card-bordered] 加这属性就会带上边框
+- [sim-card-hovering],[card-hovering] 加这属性就会没有阴影效果，hover时候才有。默认是有阴影效果的
+- [sim-card-paddings],[card-paddings] 加这属性就会有padding效果，子级无padding。默认是无padding，子级带padding
+
+### CardHeaderComponent 【卡容器头部组件】
+
+#### Selector(选择器)：sim-card-header,[sim-card-header]
+
+### CardContentComponent 【对话框尾部】
+
+#### Selector(选择器)：sim-card-content,[sim-card-content]
+
+#### Bindings(属性绑定):
+
+##### Inputs(输入属性绑定):
+- loading 参数：布尔值，默认false。 说明：如果有这属性就会有占位加载loading效果
+
+
+### DividerComponent 【分割线组件】
+
+#### Selector(选择器)：sim-divider,[sim-divider]
+
+## Examples
+示例
+
+```html
+<sim-card sim-card-paddings>
+    <sim-card-header>sim-card-header-1</sim-card-header>
+    <sim-divider></sim-divider>
+    <sim-card-content [loading]="_loading">sim-card-content-1</sim-card-content>
+</sim-card>
+<button (click)="_loading = false">打开弹窗</button>
+
+<div sim-card sim-card-hovering>
+    <div sim-card-header>sim-card-header-2</div>
+    <div sim-divider></div>
+    <div sim-card-content [loading]="_loading">sim-card-content-2</div>
+</div>
+```

src/app/shared/card/card.component.scss

@@ -0,0 +1,77 @@
+$sim-card-default-padding: 20px !default;
+$sim-card-border-radius: 2px !default;
+%sim-card-section-base {
+    display: block;
+    position: relative;
+}
+
+.sim-card {
+    @extend %sim-card-section-base;
+    border-radius: $sim-card-border-radius;
+    background-color: #fff;
+    transition: all 280ms cubic-bezier(.4, 0, .2, 1);
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+    &[sim-card-bordered],
+    &[card-bordered] {
+        border: 1px solid #e9e9e9;
+    }
+    &[sim-card-hovering],
+    &[card-hovering] {
+        box-shadow: none;
+        &:hover {
+            box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+        }
+    }
+    &-header {
+        @extend %sim-card-section-base;
+        padding: 0 20px;
+        min-height: 48px;
+        line-height: 48px;
+    }
+    &-content {
+        @extend %sim-card-section-base;
+        padding: $sim-card-default-padding;
+    }
+    &[sim-card-paddings],
+    &[card-paddings] {
+        padding: $sim-card-default-padding;
+        .sim-card-header,
+        .sim-card-content {
+            padding: 0;
+        }
+        .sim-card-content {
+            padding-top: 20px;
+        }
+    }
+    &-loading {
+        user-select: none;
+        padding: 0;
+        &-block {
+            display: inline-block;
+            margin: 5px 1% 0;
+            height: 14px;
+            border-radius: 2px;
+            background: linear-gradient(90deg, rgba(207, 216, 220, .2), rgba(207, 216, 220, .4), rgba(207, 216, 220, .2));
+            animation: card-loading 1.4s ease infinite;
+            background-size: 600% 600%;
+        }
+    }
+}
+
+.sim-divider {
+    display: block;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    background-color: rgba(0, 0, 0, .12);
+}
+
+@-webkit-keyframes card-loading {
+    0%,
+    to {
+        background-position: 0 50%
+    }
+    50% {
+        background-position: 100% 50%
+    }
+}

src/app/shared/card/card.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/card/card.component.ts

@@ -0,0 +1,78 @@
+import { element } from 'protractor';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, Input } from '@angular/core';
+
+@Component({
+  selector: 'sim-card,[sim-card]',
+  exportAs: 'simCard',
+  template: '<ng-content></ng-content>',
+  styleUrls: ['./card.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CardComponent {
+  @HostBinding('class.sim-card') _simCard = true;
+}
+
+
+@Component({
+  selector: 'sim-card-header,[sim-card-header]',
+  exportAs: 'simCardHeader',
+  template: '<ng-content></ng-content>',
+  encapsulation: ViewEncapsulation.None,
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CardHeaderComponent {
+  @HostBinding('class.sim-card-header') _simCardHeader = true;
+}
+
+@Component({
+  selector: 'sim-card-content,[sim-card-content]',
+  exportAs: 'simCardContent',
+  template: `
+    <ng-content *ngIf="!_loading"></ng-content>
+    <div class="sim-card-loading"  *ngIf="_loading">
+        <p class="sim-card-loading-block" style="width: 94%;"></p>
+        <p>
+            <span class="sim-card-loading-block" style="width: 28%;"></span><span class="sim-card-loading-block" style="width: 62%;"></span>
+        </p>
+        <p>
+            <span class="sim-card-loading-block" style="width: 22%;"></span><span class="sim-card-loading-block" style="width: 66%;"></span>
+        </p>
+        <p>
+            <span class="sim-card-loading-block" style="width: 56%;"></span><span class="sim-card-loading-block" style="width: 39%;"></span>
+        </p>
+        <p>
+            <span class="sim-card-loading-block" style="width: 21%;"></span><span class="sim-card-loading-block" style="width: 15%;"></span><span class="card-loading-block" style="width: 40%;"></span>
+        </p>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CardContentComponent {
+  @HostBinding('class.sim-card-content') _simCardContent = true;
+
+  _loading: boolean = false;
+  @Input()
+  get loading(): boolean {
+    return this._loading;
+  }
+  set loading(value: boolean) {
+    this._loading = value;
+  }
+}
+
+@Component({
+  selector: 'sim-divider,[sim-divider]',
+  exportAs: 'simDivider',
+  template: '',
+  encapsulation: ViewEncapsulation.None,
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DividerComponent {
+  @HostBinding('class.sim-divider') _simDivider = true;
+}

src/app/shared/card/card.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CardComponent, CardHeaderComponent, CardContentComponent, DividerComponent } from './card.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [CardComponent, CardHeaderComponent, CardContentComponent, DividerComponent],
+  exports: [CardComponent, CardHeaderComponent, CardContentComponent, DividerComponent]
+})
+export class CardModule { }

src/app/shared/card/index.ts

@@ -0,0 +1 @@
+export * from './card.module';