Skip to content

Commit

Permalink
perf(UI组件模块): 调整card模块由共享模块到UI组件模块
Browse files Browse the repository at this point in the history
  • Loading branch information
@jiayisheji
jiayisheji committed Nov 30, 2017
1 parent 724e330 commit 3b28059
Show file tree
Hide file tree
Showing 6 changed files with 134 additions and 125 deletions.
94 changes: 47 additions & 47 deletions src/app/shared/card/README.md → src/app/simple/card/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,48 +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>
# 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>
```
157 changes: 81 additions & 76 deletions src/app/shared/card/card.component.scss → src/app/simple/card/card.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,82 @@
$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%
}
$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;
&:after,
&:before {
content: " ";
display: table;
}
}
&[sim-card-paddings],
&[card-paddings] {
padding: $sim-card-default-padding;
.sim-card-header,
.sim-card-content {
padding: 0;
}
.sim-divider+.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%
}
}
0 src/app/shared/card/card.component.spec.ts → src/app/simple/card/card.component.spec.ts
View file
File renamed without changes.
6 changes: 5 additions & 1 deletion src/app/shared/card/card.component.ts → src/app/simple/card/card.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { element } from 'protractor';
import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, Input } from '@angular/core';

@Component({
// tslint:disable-next-line:component-selector
selector: 'sim-card,[sim-card]',
exportAs: 'simCard',
template: '<ng-content></ng-content>',
Expand All @@ -16,6 +17,7 @@ export class CardComponent {


@Component({
// tslint:disable-next-line:component-selector
selector: 'sim-card-header,[sim-card-header]',
exportAs: 'simCardHeader',
template: '<ng-content></ng-content>',
Expand All @@ -28,6 +30,7 @@ export class CardHeaderComponent {
}

@Component({
// tslint:disable-next-line:component-selector
selector: 'sim-card-content,[sim-card-content]',
exportAs: 'simCardContent',
template: `
Expand Down Expand Up @@ -55,7 +58,7 @@ export class CardHeaderComponent {
export class CardContentComponent {
@HostBinding('class.sim-card-content') _simCardContent = true;

_loading: boolean = false;
_loading = false;
@Input()
get loading(): boolean {
return this._loading;
Expand All @@ -66,6 +69,7 @@ export class CardContentComponent {
}

@Component({
// tslint:disable-next-line:component-selector
selector: 'sim-divider,[sim-divider]',
exportAs: 'simDivider',
template: '',
Expand Down
0 src/app/shared/card/card.module.ts → src/app/simple/card/card.module.ts
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion src/app/shared/card/index.ts → src/app/simple/card/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from './card.module';
export * from './card.module';

0 comments on commit 3b28059

Please sign in to comment.