Skip to content

Commit

Permalink
feat(共享模块): 添加Button模块 Button组件 ButtonBloc，ButtonPill指令
Browse files Browse the repository at this point in the history
  • Loading branch information
@jiayisheji
jiayisheji committed Nov 17, 2017
1 parent bad597c commit 698c42f
Show file tree
Hide file tree
Showing 6 changed files with 410 additions and 0 deletions.
96 changes: 96 additions & 0 deletions src/app/shared/button/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
# Button 【按钮】

## Component 【组件】

## ButtonComponent 【按钮组件】

#### Selector(选择器)：[sim-button]、

#### Bindings(属性绑定):

##### Inputs(输入属性绑定):
- color 参数：字符串，默认default。颜色 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'link' | 'info'
- size 参数：字符串，默认default。 尺寸 'default' | 'lg' | 'md' | 'sm' | 'xs'
- shape 参数：字符串，默认default。形状 'default' | 'outline' | 'dashed' | 'pill'

## Directives 【指令】
### ButtonBlockDirective 【块级按钮】

#### Selector(选择器)：[simButtonBlock],[sim-button-block]

### ButtonPillDirective 【胶囊按钮】

#### Selector(选择器)：[simButtonPill],[sim-button-pill]

```html
<h2>color</h2>
<div>
<button sim-button>default</button>
<button sim-button [color]="'primary'">primary</button>
<button sim-button [color]="'secondary'">secondary</button>
<button sim-button [color]="'success'">success</button>
<button sim-button [color]="'danger'">danger</button>
<button sim-button [color]="'warning'">warning</button>
<button sim-button [color]="'info'">info</button>
<button sim-button [color]="'link'">link</button>
</div>
<br />
<h2>size</h2>
<div>
<button sim-button [color]="'primary'" [size]="'lg'">大按钮</button>
<button sim-button [color]="'info'">default|中等按钮</button>
<button sim-button [color]="'danger'" [size]="'sm'">小按钮</button>
<button sim-button [color]="'warning'" [size]="'xs'">超小按钮</button>
</div>
<br />
<h2>shape</h2>
<h3>default</h3>
<div>
<button sim-button>default</button>
<button sim-button [color]="'primary'">primary</button>
<button sim-button [color]="'secondary'">secondary</button>
<button sim-button [color]="'success'">success</button>
<button sim-button [color]="'danger'">danger</button>
<button sim-button [color]="'warning'">warning</button>
<button sim-button [color]="'info'">info</button>
</div>
<br />
<h3>outline</h3>
<div>
<button sim-button [shape]="'outline'">default</button>
<button sim-button [color]="'primary'" [shape]="'outline'">primary</button>
<button sim-button [color]="'secondary'" [shape]="'outline'">secondary</button>
<button sim-button [color]="'success'" [shape]="'outline'">success</button>
<button sim-button [color]="'danger'" [shape]="'outline'">danger</button>
<button sim-button [color]="'warning'" [shape]="'outline'">warning</button>
<button sim-button [color]="'info'" [shape]="'outline'">info</button>
</div>
<br />
<h3>dashed</h3>
<div>
<button sim-button [shape]="'dashed'">default</button>
<button sim-button [color]="'primary'" [shape]="'dashed'">primary</button>
<button sim-button [color]="'secondary'" [shape]="'dashed'">secondary</button>
<button sim-button [color]="'success'" [shape]="'dashed'">success</button>
<button sim-button [color]="'danger'" [shape]="'dashed'">danger</button>
<button sim-button [color]="'warning'" [shape]="'dashed'">warning</button>
<button sim-button [color]="'info'" [shape]="'dashed'">info</button>
</div>
<br />
<h2>pill</h2>
<div>
<button sim-button sim-button-pill>default</button>
<button sim-button [color]="'primary'" sim-button-pill [shape]="'outline'">primary</button>
<button sim-button [color]="'secondary'" sim-button-pill [shape]="'dashed'">secondary</button>
<button sim-button [color]="'success'" sim-button-pill>success</button>
<button sim-button [color]="'danger'" sim-button-pill>danger</button>
<button sim-button [color]="'warning'" sim-button-pill>warning</button>
<button sim-button [color]="'info'" sim-button-pill>info</button>
</div>
<br />
<h2>block</h2>
<div>
<button sim-button [color]="'primary'" sim-button-block>primary block</button>
</div>
<br />
```
167 changes: 167 additions & 0 deletions src/app/shared/button/button.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
.sim-btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.5;
border-radius: 4px;
user-select: none;
transition: all .1s ease-in;
&[disabled],
&.disabled {
cursor: not-allowed;
box-shadow: none;
opacity: 0.65;
}
&:active,
&.active {
box-shadow: rgba(0, 0, 0, 0.125) 0px 3px 5px inset;
outline: 0;
}
&:hover:focus,
&:focus {
outline: 0;
}
&-dashed {
border-style: dashed;
}
&-outline,
&-dashed {
&.sim-btn-default {
color: rgba(0, 0, 0, 0.65);
border-color: #d9d9d9;
background-color: #fff;
}
&.sim-btn-primary {
color: #3194d0;
border-color: #3194d0;
background-color: #fff;
}
&.sim-btn-secondary {
color: #868e96;
border-color: #868e96;
background-color: #fff;
}
&.sim-btn-info {
color: #5bc0de;
border-color: #5bc0de;
background-color: #fff;
}
&.sim-btn-warning {
color: #f0ad4e;
border-color: #f0ad4e;
background-color: #fff;
}
&.sim-btn-success {
color: #42c02e;
border-color: #42c02e;
background-color: #fff;
}
&.sim-btn-danger {
color: #ea6f5a;
border-color: #ea6f5a;
background-color: #fff;
}
}
&-default {
color: inherit;
&:hover {
color: #212529;
border: 1px solid #e2e6ea;
background-color: #e2e6ea;
}
}
&-primary {
color: #fff;
background-color: #3194d0;
&:hover {
color: #fff;
border: 1px solid #187cb7;
background-color: #187cb7;
}
}
&-secondary {
color: #fff;
background-color: #868e96;
&:hover {
color: #fff;
border: 1px solid #727b84;
background-color: #727b84;
}
}
&-info {
color: #fff;
background-color: #5bc0de;
&:hover {
color: #fff;
background-color: #31b0d5;
border: 1px solid #31b0d5;
}
}
&-warning {
color: #fff;
background-color: #f0ad4e;
&:hover {
color: #fff;
background-color: #ec971f;
border: 1px solid #ec971f;
}
}
&-success {
color: #fff;
background-color: #42c02e;
&:hover {
color: #fff;
background-color: #3db922;
border: 1px solid #3db922;
}
}
&-danger {
color: #fff;
background-color: #ea6f5a;
&:hover {
color: #fff;
background-color: #ec6149;
border: 1px solid #ec6149;
}
}
&-link {
color: #3194d0;
padding: 0 5px;
border-radius: 0px;
&.disable {
pointer-events: none;
}
&:hover {
color: #23527c;
background-color: transparent;
}
}
&-block {
display: block;
width: 100%;
}
&-lg {
padding: 9px 25px;
font-size: 18px;
}
&-sm {
font-size: 12px;
padding: 4px 10px;
}
&-xs {
padding: 0 8px;
font-size: 12px;
}
&-pill {
border-radius: 10rem;
}
}
25 changes: 25 additions & 0 deletions src/app/shared/button/button.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ButtonComponent } from './button.component';

describe('ButtonComponent', () => {
let component: ButtonComponent;
let fixture: ComponentFixture<ButtonComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ButtonComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(ButtonComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Loading

0 comments on commit 698c42f

Please sign in to comment.