skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(button): create stroked and flat button variants (#9365)

Browse Source
This commit is contained in:
Joey Perrott
2018-02-01 11:25:15 -08:00
committed by tinayuangao
parent 834aecce64
commit b65268365f
7 changed files with 156 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo-app/button/button-demo.html
+80 -78
View File
@@ -1,113 +1,115 @@
<div class="demo-button">
<h4 class="section-header">Buttons</h4>
<section>
<button mat-button>flat</button>
<button mat-raised-button>raised</button>
<button mat-stroked-button>stroked</button>
<button mat-flat-button>flat</button>
<button mat-fab><mat-icon>check</mat-icon></button>
<button mat-fab color="primary">Btn</button>
<a mat-fab color="warn" routerLink=".">Link</a>
<a mat-fab routerLink="."><mat-icon>check</mat-icon></a>
<button mat-mini-fab><mat-icon>check</mat-icon></button>
<button mat-mini-fab color="primary">Btn</button>
<a mat-mini-fab color="warn" routerLink=".">Link</a>
<a mat-mini-fab routerLink="."><mat-icon>check</mat-icon></a>
</section>
<h4 class="section-header">Anchors</h4>
<section>
<a href="http://www.google.com" mat-button color="primary">SEARCH</a>
<a href="http://www.google.com" mat-raised-button>SEARCH</a>
<a href="http://www.google.com" mat-fab>
<mat-icon>check</mat-icon>
</a>
<a href="http://www.google.com" mat-mini-fab>
<mat-icon>check</mat-icon>
</a>
<a href="//www.google.com" mat-button color="primary">SEARCH</a>
<a href="//www.google.com" mat-raised-button>SEARCH</a>
<a href="//www.google.com" mat-stroked-button color="primary">SEARCH</a>
<a href="//www.google.com" mat-flat-button>SEARCH</a>
<a href="//www.google.com" mat-fab><mat-icon>check</mat-icon></a>
<a href="//www.google.com" mat-mini-fab><mat-icon>check</mat-icon></a>
</section>
<h4 class="section-header">Text Buttons [mat-button]</h4>
<section>
<button mat-button color="primary">primary</button>
<button mat-button color="accent">accent</button>
<button mat-button color="warn">warn</button>
<button mat-button disabled>disabled</button>
</section>
<h4 class="section-header">Raised Buttons [mat-raised-button]</h4>
<section>
<button mat-raised-button color="primary">primary</button>
<button mat-raised-button color="accent">accent</button>
<button mat-raised-button color="warn">warn</button>
<button mat-raised-button disabled>disabled</button>
</section>
<h4 class="section-header">Stroked Buttons [mat-stroked-button]</h4>
<section>
<button mat-fab color="primary">
<mat-icon>home</mat-icon>
</button>
<button mat-fab color="accent">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab color="warn">
<mat-icon>feedback</mat-icon>
</button>
<button mat-stroked-button color="primary">primary</button>
<button mat-stroked-button color="accent">accent</button>
<button mat-stroked-button color="warn">warn</button>
<button mat-stroked-button disabled>disabled</button>
</section>
<h4 class="section-header">Flat Buttons [mat-flat-button]</h4>
<section>
<button mat-icon-button color="primary">
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button color="accent">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>more_vert</mat-icon>
</button>
<button mat-flat-button color="primary">primary</button>
<button mat-flat-button color="accent">accent</button>
<button mat-flat-button color="warn">warn</button>
<button mat-flat-button disabled>disabled</button>
</section>
<h4 class="section-header"> Icon Buttons [mat-icon-button]</h4>
<section>
<button mat-icon-button color="primary"><mat-icon>cached</mat-icon></button>
<button mat-icon-button color="accent"><mat-icon>backup</mat-icon></button>
<button mat-icon-button color="warn"><mat-icon>trending_up</mat-icon></button>
<button mat-icon-button disabled><mat-icon>visibility</mat-icon></button>
</section>
<h4 class="section-header">Fab Buttons [mat-fab]</h4>
<section>
<button mat-fab color="primary"><mat-icon>delete</mat-icon></button>
<button mat-fab color="accent"><mat-icon>bookmark</mat-icon></button>
<button mat-fab color="warn"><mat-icon>home</mat-icon></button>
<button mat-fab disabled><mat-icon>favorite</mat-icon></button>
</section>
<h4 class="section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
<section>
<button mat-mini-fab color="primary"><mat-icon>menu</mat-icon></button>
<button mat-mini-fab color="accent"><mat-icon>plus_one</mat-icon></button>
<button mat-mini-fab color="warn"><mat-icon>filter_list</mat-icon></button>
<button mat-mini-fab disabled><mat-icon>home</mat-icon></button>
</section>
<h4 class="section-header">Interaction/State</h4>
<section class="no-flex">
<div>
<p>isDisabled: {{isDisabled}}, clickCounter: <span>{{clickCounter}}</span></p>
<button mat-raised-button (click)="isDisabled=!isDisabled">
Disable buttons
<p>isDisabled: {{isDisabled}}</p>
<p>Button 1 as been clicked {{clickCounter}} times</p>
<button mat-flat-button (click)="isDisabled=!isDisabled">
{{isDisabled ? 'Enable All' : 'Disable All'}}
</button>
<button mat-flat-button (click)="button1.focus()">Focus 1</button>
<button mat-flat-button (click)="button2.focus()">Focus 2</button>
<button mat-flat-button (click)="button3.focus()">Focus 3</button>
<button mat-flat-button (click)="button4.focus()">Focus 4</button>
</div>
<div>
<button mat-button #button1 [disabled]="isDisabled"
(click)="clickCounter=clickCounter+1">
Button 1
</button>
<button mat-button #button2 color="primary" [disabled]="isDisabled">
Button 2
</button>
<a href="//www.google.com" #button3 mat-button color="accent"
[disabled]="isDisabled">
Button 3
</a>
<button mat-raised-button #button4 color="primary"
[disabled]="isDisabled">
Button 4
</button>
<button mat-mini-fab [disabled]="isDisabled">
<mat-icon>check</mat-icon>
</button>
<button mat-icon-button color="accent" [disabled]="isDisabled">
<mat-icon>favorite</mat-icon>
</button>
<button mat-raised-button (click)="button1.focus()">Focus 1</button>
<button mat-raised-button (click)="button2.focus()">Focus 2</button>
<button mat-raised-button (click)="button3.focus()">Focus 3</button>
<button mat-raised-button (click)="button4.focus()">Focus 4</button>
</div>
<button mat-button #button1 [disabled]="isDisabled" (click)="clickCounter=clickCounter+1">off</button>
<button mat-button #button2 color="primary" [disabled]="isDisabled">off</button>
<a href="http://www.google.com" #button3 mat-button color="accent" [disabled]="isDisabled">off</a>
<button mat-raised-button #button4 color="primary" [disabled]="isDisabled">off</button>
<button mat-mini-fab [disabled]="isDisabled">
<mat-icon>check</mat-icon>
</button>
<button mat-icon-button color="accent" [disabled]="isDisabled">
<mat-icon>favorite</mat-icon>
</button>
</section>
<section>
<a href="http://www.google.com" mat-button color="primary">SEARCH</a>
<button mat-button>DANCE</button>
</section>
<section>
<a href="http://www.google.com" mat-raised-button color="primary">SEARCH</a>
<button mat-raised-button>DANCE</button>
</section>
<section>
<button mat-raised-button>More<mat-icon>more_vert</mat-icon></button>
<button mat-raised-button>Check<mat-icon>check</mat-icon></button>
<button mat-raised-button>Check<mat-icon>favorite</mat-icon></button>
<button mat-raised-button>Last<mat-icon>navigate_before</mat-icon></button>
</section>
<section>
<button mat-button>More<mat-icon>more_vert</mat-icon></button>
<button mat-button>Check<mat-icon>check</mat-icon></button>
<button mat-button>Check<mat-icon>favorite</mat-icon></button>
<button mat-button>Last<mat-icon>navigate_before</mat-icon></button>
</section>
<section>
<button mat-raised-button [disabled]="toggleDisable" (click)="toggleDisable = true">Disable</button>
<button mat-button [disabled]="!toggleDisable" (click)="toggleDisable = false">Disable</button>
</section>
</div>
src/demo-app/button/button-demo.scss
+9 -1
View File
@@ -14,5 +14,13 @@
p {
padding: 5px 15px;
}
}
.section-header {
font-weight: 500;
margin: 0;
}
.no-flex {
display: block;
}
}
src/lib/button/_button-base.scss
+6
View File
@@ -12,6 +12,12 @@ $mat-button-border-radius: 2px !default;
$mat-button-focus-transition: opacity 200ms $swift-ease-in-out-timing-function,
background-color 200ms $swift-ease-in-out-timing-function !default;
// Stroked Button standards
$mat-stroked-button-line-height: $mat-button-line-height - 2;
// Stroked button padding is 1px less horizontally than default/flat/raised
// button's padding.
$mat-stroked-button-padding: 0 15px;
// Icon Button standards
$mat-icon-button-size: 40px !default;
$mat-icon-button-border-radius: 50% !default;
src/lib/button/_button-theme.scss
+15 -2
View File
@@ -75,7 +75,7 @@
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.mat-button, .mat-icon-button {
.mat-button, .mat-icon-button, .mat-stroked-button {
background: transparent;
@include _mat-button-focus-color($theme);
@@ -99,6 +99,18 @@
@include _mat-button-ripple-color($theme, default, 0.1);
}
.mat-flat-button {
// Default properties when not using any [color] value.
color: mat-color($foreground, text);
background-color: mat-color($background, raised-button);
@include _mat-button-theme-color($theme, 'color', default-contrast);
@include _mat-button-theme-color($theme, 'background-color');
// Add ripple effect with contrast color to buttons that don't have a focus overlay.
@include _mat-button-ripple-color($theme, default-contrast);
}
// Add ripple effect with default color to the icon button. Ripple color needs to be stronger
// since the icon button doesn't have a focus overlay.
.mat-icon-button {
@@ -107,7 +119,8 @@
}
@mixin mat-button-typography($config) {
.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
.mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button,
.mat-fab, .mat-mini-fab {
font: {
family: mat-font-family($config, button);
size: mat-font-size($config, button);
src/lib/button/button-module.ts
-15
View File
@@ -13,11 +13,6 @@ import {A11yModule} from '@angular/cdk/a11y';
import {
MatAnchor,
MatButton,
MatMiniFab,
MatButtonCssMatStyler,
MatFab,
MatIconButtonCssMatStyler,
MatRaisedButtonCssMatStyler
} from './button';
@@ -31,21 +26,11 @@ import {
exports: [
MatButton,
MatAnchor,
MatMiniFab,
MatFab,
MatCommonModule,
MatButtonCssMatStyler,
MatRaisedButtonCssMatStyler,
MatIconButtonCssMatStyler,
],
declarations: [
MatButton,
MatAnchor,
MatMiniFab,
MatFab,
MatButtonCssMatStyler,
MatRaisedButtonCssMatStyler,
MatIconButtonCssMatStyler,
],
})
export class MatButtonModule {}
src/lib/button/button.scss
+19 -2
View File
@@ -13,9 +13,10 @@
}
}
// Only flat buttons (not raised, FABs or icon buttons) have a hover style.
// Only flat and stroked buttons (not raised, FABs or icon buttons) have a hover style.
// Use the same visual treatment for hover as for focus.
.mat-button:hover .mat-button-focus-overlay {
.mat-button:hover .mat-button-focus-overlay,
.mat-stroked-button:hover .mat-button-focus-overlay {
opacity: 1;
}
@@ -23,6 +24,22 @@
@extend %mat-raised-button;
}
.mat-stroked-button {
@extend %mat-button-base;
@include mat-overridable-elevation(0);
border: 1px solid currentColor;
padding: $mat-stroked-button-padding;
line-height: $mat-stroked-button-line-height;
}
.mat-flat-button {
@extend %mat-button-base;
@include mat-overridable-elevation(0);
}
.mat-fab {
@include mat-fab($mat-fab-size, $mat-fab-padding);
}
src/lib/button/button.ts
+27 -54
View File
@@ -11,7 +11,6 @@ import {Platform} from '@angular/cdk/platform';
import {
ChangeDetectionStrategy,
Component,
Directive,
ElementRef,
OnDestroy,
ViewChild,
@@ -27,63 +26,25 @@ import {
mixinDisableRipple
} from '@angular/material/core';
// TODO(kara): Convert attribute selectors to classes when attr maps become available
/** Default color palette for round buttons (mat-fab and mat-mini-fab) */
const DEFAULT_ROUND_BUTTON_COLOR = 'accent';
/** Default color palette for flat buttons (mat-flat-button) */
const DEFAULT_FLAT_BUTTON_COLOR = 'primary';
/**
* Directive whose purpose is to add the mat- CSS styling to this selector.
* @docs-private
* List of classes to add to MatButton instances based on host attributes to
* style as different variants.
*/
@Directive({
selector: 'button[mat-button], a[mat-button]',
host: {'class': 'mat-button'}
})
export class MatButtonCssMatStyler {}
/**
* Directive whose purpose is to add the mat- CSS styling to this selector.
* @docs-private
*/
@Directive({
selector: 'button[mat-raised-button], a[mat-raised-button]',
host: {'class': 'mat-raised-button'}
})
export class MatRaisedButtonCssMatStyler {}
/**
* Directive whose purpose is to add the mat- CSS styling to this selector.
* @docs-private
*/
@Directive({
selector: 'button[mat-icon-button], a[mat-icon-button]',
host: {'class': 'mat-icon-button'}
})
export class MatIconButtonCssMatStyler {}
/**
* Directive whose purpose is to add the mat- CSS styling to this selector.
* @docs-private
*/
@Directive({
selector: 'button[mat-fab], a[mat-fab]',
host: {'class': 'mat-fab'}
})
export class MatFab {}
/**
* Directive whose purpose is to add the mat- CSS styling to this selector.
* @docs-private
*/
@Directive({
selector: 'button[mat-mini-fab], a[mat-mini-fab]',
host: {'class': 'mat-mini-fab'}
})
export class MatMiniFab {}
const BUTTON_HOST_ATTRIBUTES = [
'mat-button',
'mat-flat-button',
'mat-icon-button',
'mat-raised-button',
'mat-stroked-button',
'mat-mini-fab',
'mat-fab',
];
// Boilerplate for applying mixins to MatButton.
/** @docs-private */
@@ -99,7 +60,8 @@ export const _MatButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(M
@Component({
moduleId: module.id,
selector: `button[mat-button], button[mat-raised-button], button[mat-icon-button],
button[mat-fab], button[mat-mini-fab]`,
button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],
button[mat-flat-button]`,
exportAs: 'matButton',
host: {
'[disabled]': 'disabled || null',
@@ -128,10 +90,20 @@ export class MatButton extends _MatButtonMixinBase
private _focusMonitor: FocusMonitor) {
super(elementRef);
// For each of the variant selectors that is prevent in the button's host
// attributes, add the correct corresponding class.
for (const attr of BUTTON_HOST_ATTRIBUTES) {
if (this._hasHostAttributes(attr)) {
(elementRef.nativeElement as HTMLElement).classList.add(attr);
}
}
this._focusMonitor.monitor(this._elementRef.nativeElement, true);
if (this._isRoundButton) {
this.color = DEFAULT_ROUND_BUTTON_COLOR;
} else if (this._hasHostAttributes('mat-flat-button')) {
this.color = DEFAULT_FLAT_BUTTON_COLOR;
}
}
@@ -170,7 +142,8 @@ export class MatButton extends _MatButtonMixinBase
*/
@Component({
moduleId: module.id,
selector: `a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]`,
selector: `a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],
a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]`,
exportAs: 'matButton, matAnchor',
host: {
'[attr.tabindex]': 'disabled ? -1 : 0',