Skip to content

Commit b4d01dc

Browse files
andrewseguinandrewseguin
authored
docs(material/toolbar): minor doc fixes (angular#29227)
1 parent 82cfd49 commit b4d01dc

File tree

8 files changed

+42
-76
lines changed

8 files changed

+42
-76
lines changed

‎src/components-examples/material/toolbar/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export {ToolbarBasicExample} from './toolbar-basic/toolbar-basic-example';
22
export {ToolbarMultirowExample} from './toolbar-multirow/toolbar-multirow-example';
3+
export {ToolbarSimpleExample} from './toolbar-simple/toolbar-simple-example';
34
export {ToolbarOverviewExample} from './toolbar-overview/toolbar-overview-example';
45
export {ToolbarHarnessExample} from './toolbar-harness/toolbar-harness-example';

‎src/components-examples/material/toolbar/toolbar-multirow/toolbar-multirow-example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<mat-toolbar color="primary">
1+
<mat-toolbar>
22
<!-- #docregion toolbar-row -->
33
<mat-toolbar-row>
44
<span>Custom Toolbar</span>

‎src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html

Lines changed: 13 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,13 @@
1-
<p>
2-
<!-- #docregion toolbar-simple -->
3-
<mat-toolbar>
4-
<span>My Application</span>
5-
</mat-toolbar>
6-
<!-- #enddocregion toolbar-simple -->
7-
</p>
8-
9-
<p>
10-
<mat-toolbar>
11-
<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
12-
<mat-icon>menu</mat-icon>
13-
</button>
14-
<span>My App</span>
15-
<span class="example-spacer"></span>
16-
<button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
17-
<mat-icon>favorite</mat-icon>
18-
</button>
19-
<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
20-
<mat-icon>share</mat-icon>
21-
</button>
22-
</mat-toolbar>
23-
</p>
24-
25-
<p>
26-
<mat-toolbar color="primary">
27-
<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
28-
<mat-icon>menu</mat-icon>
29-
</button>
30-
<span>My App</span>
31-
<span class="example-spacer"></span>
32-
<button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
33-
<mat-icon>favorite</mat-icon>
34-
</button>
35-
<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
36-
<mat-icon>share</mat-icon>
37-
</button>
38-
</mat-toolbar>
39-
</p>
40-
41-
<p>
42-
<mat-toolbar color="primary">
43-
<mat-toolbar-row>
44-
<span>My App</span>
45-
<span class="example-spacer"></span>
46-
<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
47-
<mat-icon>menu</mat-icon>
48-
</button>
49-
</mat-toolbar-row>
50-
51-
<mat-toolbar-row>
52-
<span>Second Line</span>
53-
<span class="example-spacer"></span>
54-
<button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
55-
<mat-icon>favorite</mat-icon>
56-
</button>
57-
<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
58-
<mat-icon>share</mat-icon>
59-
</button>
60-
</mat-toolbar-row>
61-
</mat-toolbar>
62-
</p>
1+
<mat-toolbar>
2+
<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
3+
<mat-icon>menu</mat-icon>
4+
</button>
5+
<span>My App</span>
6+
<span class="example-spacer"></span>
7+
<button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
8+
<mat-icon>favorite</mat-icon>
9+
</button>
10+
<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
11+
<mat-icon>share</mat-icon>
12+
</button>
13+
</mat-toolbar>

‎src/components-examples/material/toolbar/toolbar-simple/toolbar-simple-example.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<mat-toolbar>
2+
<span>My Application</span>
3+
</mat-toolbar>

‎src/components-examples/material/toolbar/toolbar-simple/toolbar-simple-example.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {Component} from '@angular/core';
2+
import {MatToolbarModule} from '@angular/material/toolbar';
3+
4+
/**
5+
* @title Toolbar with just text
6+
*/
7+
@Component({
8+
selector: 'toolbar-simple-example',
9+
templateUrl: 'toolbar-simple-example.html',
10+
standalone: true,
11+
imports: [MatToolbarModule],
12+
})
13+
export class ToolbarSimpleExample {}

‎src/dev-app/toolbar/toolbar-demo.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
<div class="demo-toolbar">
2+
<p>
3+
<toolbar-simple-example></toolbar-simple-example>
4+
</p>
5+
26
<p>
37
<toolbar-overview-example></toolbar-overview-example>
48
</p>

‎src/dev-app/toolbar/toolbar-demo.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
ToolbarMultirowExample,
1313
ToolbarOverviewExample,
1414
} from '@angular/components-examples/material/toolbar';
15+
import {ToolbarSimpleExample} from '@angular/components-examples/material/toolbar/toolbar-simple/toolbar-simple-example';
1516
import {ChangeDetectionStrategy, Component} from '@angular/core';
1617
import {MatButtonModule} from '@angular/material/button';
1718
import {MatIconModule} from '@angular/material/icon';
@@ -29,6 +30,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
2930
ToolbarBasicExample,
3031
ToolbarMultirowExample,
3132
ToolbarOverviewExample,
33+
ToolbarSimpleExample,
3234
ToolbarHarnessExample,
3335
],
3436
changeDetection: ChangeDetectionStrategy.OnPush,

‎src/material/toolbar/toolbar.md

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,21 @@
44

55
### Single row
66

7-
In the most situations, a toolbar will be placed at the top of your application and will only
7+
In the simplest case, a toolbar may be placed at the top of your application and
88
have a single row that includes the title of your application.
99

10-
<!-- example({"example":"toolbar-overview",
11-
"file":"toolbar-overview-example.html",
12-
"region":"toolbar-simple"}) -->
10+
<!-- example(toolbar-simple) -->
1311

1412
### Multiple rows
1513

16-
The Material Design specifications describe that toolbars can also have multiple rows. Creating
17-
toolbars with multiple rows in Angular Material can be done by placing `<mat-toolbar-row>` elements
18-
inside of a `<mat-toolbar>`.
14+
The Material Design spec used to describe toolbars with multiple rows. This can
15+
be done by placing `<mat-toolbar-row>` elements inside a `<mat-toolbar>`.
1916

2017
<!-- example({"example":"toolbar-multirow",
2118
"file":"toolbar-multirow-example.html",
2219
"region":"toolbar-row"}) -->
2320

24-
**Note**: Placing content outside of a `<mat-toolbar-row>` when multiple rows are specified is not
21+
**Note**: Placing content outside a `<mat-toolbar-row>` when multiple rows are specified is not
2522
supported.
2623

2724
### Positioning toolbar content
@@ -39,11 +36,6 @@ easily accomplished with `display: flex`:
3936
"file":"toolbar-multirow-example.css",
4037
"region":"toolbar-position-content-style"}) -->
4138

42-
### Theming
43-
The color of a `<mat-toolbar>` can be changed by using the `color` property. By default, toolbars
44-
use a neutral background color based on the current theme (light or dark). This can be changed to
45-
`'primary'`, `'accent'`, or `'warn'`.
46-
4739
### Accessibility
4840
By default, the toolbar assumes that it will be used in a purely decorative fashion and thus sets
4941
no roles, ARIA attributes, or keyboard shortcuts. This is equivalent to having a sequence of `<div>`

0 commit comments

Comments
 (0)