src/dev-app/toolbar/toolbar-demo.html - main - githubmirror/components

src/dev-app/toolbar/toolbar-demo.html
97 строк2 KB
Kristiyan Kostadinov
refactor(multiple): switch button selectors
14 мар 2025, 09:04
14 мар 2025, 09:04103ac7c
<div class="demo-toolbar">
  <p>
    <toolbar-simple-example></toolbar-simple-example>
  </p>

  <p>
    <toolbar-overview-example></toolbar-overview-example>
  </p>

  <p>
    <mat-toolbar>
      <button matIconButton>
        <mat-icon>menu</mat-icon>
      </button>

      <span>Default Toolbar</span>
      <span class="demo-fill-remaining"></span>

      <button matButton color="accent">Text</button>
      <button matButton>Text</button>
      <button matIconButton>
        <mat-icon>code</mat-icon>
      </button>

      <button matIconButton color="warn">
        <mat-icon>code</mat-icon>
      </button>
    </mat-toolbar>
  </p>

  <p>
    <mat-toolbar color="primary">
      <button matIconButton>
        <mat-icon>menu</mat-icon>
      </button>

      <span>Primary Toolbar</span>
      <span class="demo-fill-remaining"></span>

      <button matButton="elevated">Text</button>
      <button matButton="elevated" color="accent">Accent</button>
      <button matButton="outlined">Stroked</button>
    </mat-toolbar>
  </p>

  <p>
    <mat-toolbar color="accent">
      <button matIconButton>
        <mat-icon>menu</mat-icon>
      </button>

      <span>Accent Toolbar</span>
      <span class="demo-fill-remaining"></span>

      <button matButton>Text</button>
      <button matButton="filled" >Flat</button>
      <button matMiniFab>
        <mat-icon>done</mat-icon>
      </button>
      <button matMiniFab color="primary">
        <mat-icon>done</mat-icon>
      </button>
    </mat-toolbar>
  </p>

  <p>
    <mat-toolbar>
      <mat-toolbar-row>First Row</mat-toolbar-row>
      <mat-toolbar-row>Second Row</mat-toolbar-row>
    </mat-toolbar>
  </p>

  <p>
    <mat-toolbar color="primary">
      <mat-toolbar-row>
        <span>First Row</span>
      </mat-toolbar-row>

      <mat-toolbar-row>
        <span>Second Row</span>

        <span class="demo-fill-remaining"></span>

        <mat-icon class="demo-toolbar-icon">verified_user</mat-icon>
      </mat-toolbar-row>

      <mat-toolbar-row>
        <span>Third Row</span>

        <span class="demo-fill-remaining"></span>

        <mat-icon class="demo-toolbar-icon">favorite</mat-icon>
        <mat-icon class="demo-toolbar-icon">delete</mat-icon>
      </mat-toolbar-row>
    </mat-toolbar>
  </p>
</div>