Skip to content

docs(button): enhance button docs and examples #8536

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

docs(button): enhance button docs and examples #8536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/material-examples/button-card/button-card-example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/** No CSS for this example */
9 changes: 9 additions & 0 deletions src/material-examples/button-card/button-card-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<mat-card>
<mat-card-header>
<mat-card-title>Card with action buttons</mat-card-title>
</mat-card-header>
<mat-card-actions align="end">
<button mat-button aria-label="Example cancel button in card">Cancel</button>
<button mat-button aria-label="Example accept button in card" color="primary">Accept</button>
</mat-card-actions>
</mat-card>
11 changes: 11 additions & 0 deletions src/material-examples/button-card/button-card-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import {Component} from '@angular/core';

/**
* @title Button usage in cards
*/
@Component({
selector: 'button-card-example',
templateUrl: 'button-card-example.html',
styleUrls: ['button-card-example.css'],
})
export class ButtonCardExample {}
17 changes: 16 additions & 1 deletion src/material-examples/button-overview/button-overview-example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,16 @@
/** No CSS for this example */
.example-button-row {
background: #f3f3f3;
padding: 16px;
border-radius: 3px;
display: flex;
justify-content: center;
}

.example-button-row .mat-button,
.example-button-row .mat-raised-button,
.example-button-row .mat-icon-button,
.example-button-row .mat-fab,
.example-button-row .mat-mini-fab {
text-transform: uppercase;
margin: 0 8px;
}
77 changes: 76 additions & 1 deletion src/material-examples/button-overview/button-overview-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,76 @@
<button mat-button>Click me!</button>
<h3>Basic Buttons</h3>
<div class="example-button-row">
<button mat-button aria-label="Example flat button">Basic</button>
<button mat-button aria-label="Example flat primary colored button" color="primary">Primary</button>
<button mat-button aria-label="Example flat accent colored button" color="accent">Accent</button>
<button mat-button aria-label="Example flat warn colored button" color="warn">Warn</button>
<button mat-button aria-label="Example flat disabled button" disabled>Disabled</button>
<a mat-button aria-label="Example flat anchor button" routerLink=".">Link</a>
</div>

<h3>Raised Buttons</h3>
<div class="example-button-row">
<button mat-raised-button aria-label="Example raised button">Basic</button>
<button mat-raised-button aria-label="Example raised primary colored button" color="primary">Primary</button>
<button mat-raised-button aria-label="Example raised accent colored button" color="accent">Accent</button>
<button mat-raised-button aria-label="Example raised warn colored button" color="warn">Warn</button>
<button mat-raised-button aria-label="Example raised disabled button" disabled>Disabled</button>
<a mat-raised-button aria-label="Example raised anchor button" routerLink=".">Link</a>
</div>

<h3>Icon Buttons</h3>
<div class="example-button-row">
<button mat-icon-button aria-label="Example icon-button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button color="primary" aria-label="Example icon-button with a more vertical icon">
<mat-icon>more_vert</mat-icon>
</button>
<button mat-icon-button color="accent" aria-label="Example icon-button with a launch icon">
<mat-icon>launch</mat-icon>
</button>
<button mat-icon-button color="warn" aria-label="Example icon-button with a menu icon">
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button disabled aria-label="Example icon-button with a close icon">
<mat-icon>close</mat-icon>
</button>
</div>

<h3>Fab Buttons</h3>
<div class="example-button-row">
<button mat-fab aria-label="Example icon-button with a people icon">
<mat-icon>add</mat-icon>
</button>
<button mat-fab color="primary" aria-label="Example icon-button with a people icon">
<mat-icon>people</mat-icon>
</button>
<button mat-fab color="warn" aria-label="Example icon-button with a star icon">
<mat-icon>star</mat-icon>
</button>
<button mat-fab disabled aria-label="Example icon-button with a comment icon">
<mat-icon>comment</mat-icon>
</button>
<button mat-fab aria-label="Example icon-button with a cake icon">
<mat-icon>cake</mat-icon>
</button>
</div>

<h3>Mini Fab Buttons</h3>
<div class="example-button-row">
<button mat-mini-fab aria-label="Example icon-button with a people icon">
<mat-icon>add</mat-icon>
</button>
<button mat-mini-fab color="primary" aria-label="Example icon-button with a people icon">
<mat-icon>people</mat-icon>
</button>
<button mat-mini-fab color="warn" aria-label="Example icon-button with a star icon">
<mat-icon>star</mat-icon>
</button>
<button mat-mini-fab disabled aria-label="Example icon-button with a comment icon">
<mat-icon>comment</mat-icon>
</button>
<button mat-mini-fab aria-label="Example icon-button with a cake icon">
<mat-icon>cake</mat-icon>
</button>
</div>
1 change: 1 addition & 0 deletions src/material-examples/button-overview/button-overview-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@ import {Component} from '@angular/core';
@Component({
selector: 'button-overview-example',
templateUrl: 'button-overview-example.html',
styleUrls: ['button-overview-example.css']
})
export class ButtonOverviewExample {}
3 changes: 3 additions & 0 deletions src/material-examples/button-toolbar/button-toolbar-example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.example-spacer {
flex: 1;
}
10 changes: 10 additions & 0 deletions src/material-examples/button-toolbar/button-toolbar-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<mat-toolbar color="primary">
<button mat-icon-button aria-label="Example icon-button with a menu icon">
<mat-icon>menu</mat-icon>
</button>
<span>Toolbar with icon buttons</span>
<span class="example-spacer"></span>
<button mat-icon-button aria-label="Example icon-button with a more vertical icon">
<mat-icon>more_vert</mat-icon>
</button>
</mat-toolbar>
11 changes: 11 additions & 0 deletions src/material-examples/button-toolbar/button-toolbar-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import {Component} from '@angular/core';

/**
* @title Icon button usage in toolbar
*/
@Component({
selector: 'button-toolbar-example',
templateUrl: 'button-toolbar-example.html',
styleUrls: ['button-toolbar-example.css'],
})
export class ButtonToolbarExample {}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should end w/ new line

5 changes: 0 additions & 5 deletions src/material-examples/button-types/button-types-example.css
View file
Open in desktop

This file was deleted.

64 changes: 0 additions & 64 deletions src/material-examples/button-types/button-types-example.html
View file
Open in desktop

This file was deleted.

11 changes: 0 additions & 11 deletions src/material-examples/button-types/button-types-example.ts
View file
Open in desktop

This file was deleted.

18 changes: 13 additions & 5 deletions src/material-examples/example-module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ import {AutocompleteSimpleExample} from './autocomplete-simple/autocomplete-simp
import {ButtonOverviewExample} from './button-overview/button-overview-example';
import {ButtonToggleExclusiveExample} from './button-toggle-exclusive/button-toggle-exclusive-example';
import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example';
import {ButtonTypesExample} from './button-types/button-types-example';
import {ButtonCardExample} from "./button-card/button-card-example";
import {ButtonToolbarExample} from "./button-toolbar/button-toolbar-example";
import {CardFancyExample} from './card-fancy/card-fancy-example';
import {CardOverviewExample} from './card-overview/card-overview-example';
import {CdkTableBasicExample} from './cdk-table-basic/cdk-table-basic-example';
Expand Down Expand Up @@ -170,9 +171,15 @@ export const EXAMPLE_COMPONENTS = {
additionalFiles: null,
selectorName: null
},
'button-types': {
title: 'Button varieties',
component: ButtonTypesExample,
'button-card': {
title: 'Button usage in cards',
component: ButtonCardExample,
additionalFiles: null,
selectorName: null
},
'button-toolbar': {
title: 'Icon button usage in toolbar',
component: ButtonToolbarExample,
additionalFiles: null,
selectorName: null
},
Expand Down Expand Up @@ -816,7 +823,8 @@ export const EXAMPLE_LIST = [
ButtonOverviewExample,
ButtonToggleExclusiveExample,
ButtonToggleOverviewExample,
ButtonTypesExample,
ButtonCardExample,
ButtonToolbarExample,
CardFancyExample,
CardOverviewExample,
CdkTableBasicExample,
Expand Down