docs(toolbar): overhaul toolbar component examples (#18745)

Author: livvielin

src/components-examples/material/toolbar/BUILD.bazel

@@ -11,6 +11,7 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/toolbar",
     deps = [
+        "//src/material/button",
         "//src/material/icon",
         "//src/material/toolbar",
     ],

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

@@ -1,21 +1,26 @@
 import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatToolbarModule} from '@angular/material/toolbar';
+import {ToolbarBasicExample} from './toolbar-basic/toolbar-basic-example';
 import {ToolbarMultirowExample} from './toolbar-multirow/toolbar-multirow-example';
 import {ToolbarOverviewExample} from './toolbar-overview/toolbar-overview-example';
 
 export {
+  ToolbarBasicExample,
   ToolbarMultirowExample,
   ToolbarOverviewExample,
 };
 
 const EXAMPLES = [
+  ToolbarBasicExample,
   ToolbarMultirowExample,
   ToolbarOverviewExample,
 ];
 
 @NgModule({
   imports: [
+    MatButtonModule,
     MatIconModule,
     MatToolbarModule,
   ],

src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.css

@@ -0,0 +1,3 @@
+.example-spacer {
+  flex: 1 1 auto;
+}

src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html

@@ -0,0 +1,13 @@
+<mat-toolbar>
+  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <span>My App</span>
+  <span class="example-spacer"></span>
+  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+    <mat-icon>favorite</mat-icon>
+  </button>
+  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+    <mat-icon>share</mat-icon>
+  </button>
+</mat-toolbar>

src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Basic toolbar
+ */
+@Component({
+  selector: 'toolbar-basic-example',
+  templateUrl: 'toolbar-basic-example.html',
+  styleUrls: ['toolbar-basic-example.css'],
+})
+export class ToolbarBasicExample {}

src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+.example-spacer {
+  flex: 1 1 auto;
+}

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

@@ -1 +1,54 @@
-<mat-toolbar>My App</mat-toolbar>
+<p>
+  <mat-toolbar>
+   <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <span>My App</span>
+  <span class="example-spacer"></span>
+  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+    <mat-icon>favorite</mat-icon>
+  </button>
+  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+   <mat-icon>share</mat-icon>
+ </button>
+</mat-toolbar>
+</p>
+
+<p>
+  <mat-toolbar color="primary">
+    <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+      <mat-icon>menu</mat-icon>
+    </button>
+    <span>My App</span>
+    <span class="example-spacer"></span>
+    <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+      <mat-icon>favorite</mat-icon>
+    </button>
+    <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+      <mat-icon>share</mat-icon>
+    </button>
+  </mat-toolbar>
+</p>
+
+<p>
+  <mat-toolbar color="primary">
+    <mat-toolbar-row>
+      <span>My App</span>
+      <span class="example-spacer"></span>
+      <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+        <mat-icon>menu</mat-icon>
+      </button>
+    </mat-toolbar-row>
+
+    <mat-toolbar-row>
+      <span>Second Line</span>
+      <span class="example-spacer"></span>
+      <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+        <mat-icon>favorite</mat-icon>
+      </button>
+      <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+        <mat-icon>share</mat-icon>
+      </button>
+    </mat-toolbar-row>
+  </mat-toolbar>
+</p>

src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 /**
- * @title Basic toolbar
+ * @title Toolbar overview
  */
 @Component({
   selector: 'toolbar-overview-example',

src/dev-app/toolbar/BUILD.bazel

@@ -10,6 +10,7 @@ ng_module(
         ":toolbar_demo_scss",
     ],
     deps = [
+        "//src/components-examples/material/toolbar",
         "//src/material/button",
         "//src/material/form-field",
         "//src/material/icon",

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

@@ -15,6 +15,7 @@ import {MatSelectModule} from '@angular/material/select';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {RouterModule} from '@angular/router';
 import {ToolbarDemo} from './toolbar-demo';
+import {ToolbarExamplesModule} from '@angular/components-examples/material/toolbar';
 
 @NgModule({
   imports: [
@@ -24,6 +25,7 @@ import {ToolbarDemo} from './toolbar-demo';
     MatInputModule,
     MatSelectModule,
     MatToolbarModule,
+    ToolbarExamplesModule,
     RouterModule.forChild([{path: '', component: ToolbarDemo}]),
   ],
   declarations: [ToolbarDemo],

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

@@ -1,4 +1,8 @@
 <div class="demo-toolbar">
+  <p>
+    <toolbar-overview-example></toolbar-overview-example>
+  </p>
+
   <p>
     <mat-toolbar>
       <button mat-icon-button>