plot-app.component.html

<nshmp-template [navigationList]="navigationList" title="Plot App">
  <nshmp-template-content-container>
    <!-- Control panel -->
    <nshmp-template-control-panel>
      <div class="control-panel">
        <p>Plot application control panel</p>

        <mat-form-field class="grid-col-12">
          <mat-label>Form Input</mat-label>
          <input matInput type="text" placeholder="Type input" />
          <mat-hint>Hint</mat-hint>
          <mat-icon matSuffix> mode_edit </mat-icon>
        </mat-form-field>

        <mat-checkbox>Check Box</mat-checkbox>

        <mat-form-field class="grid-col-12">
          <mat-label>Example Select</mat-label>
          <mat-select>
            <mat-option value="1">Option 1</mat-option>
            <mat-option value="2">Option 2</mat-option>
            <mat-option value="3">Option 3</mat-option>
            <mat-option value="4">Option 4</mat-option>
          </mat-select>
        </mat-form-field>

        <button mat-raised-button class="grid-col-12 primary">Button Example: Primary</button>
        <button mat-raised-button class="grid-col-12 secondary">Button Example: Secondary</button>
        <button mat-raised-button class="grid-col-12 error">Button Example: Error</button>

        <mat-slide-toggle class="grid-col-12">Slide me!</mat-slide-toggle>

        <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
          <mat-button-toggle value="bold">Bold</mat-button-toggle>
          <mat-button-toggle value="italic">Italic</mat-button-toggle>
          <mat-button-toggle value="underline">Underline</mat-button-toggle>
        </mat-button-toggle-group>
      </div>
    </nshmp-template-control-panel>

    <!-- App content -->
    <nshmp-template-main-content>
      <mat-tab-group class="height-full">
        <mat-tab label="Plots">
          <div class="padding-x-1 padding-top-2">
            <mat-accordion>
              <mat-expansion-panel expanded>
                <mat-expansion-panel-header>
                  <mat-panel-title> This is the expansion title </mat-panel-title>
                  <mat-panel-description> This is a summary of the content </mat-panel-description>
                </mat-expansion-panel-header>
                <p>This is the primary content of the panel.</p>

                <div>
                  <section>
                    <div>Basic</div>
                    <button mat-button>Basic</button>
                    <button mat-button disabled>Basic: Disabled</button>
                  </section>
                  <mat-divider />
                  <section>
                    <div>Raised</div>
                    <button mat-raised-button class="primary">Basic</button>
                    <button mat-raised-button class="secondary">Basic</button>
                    <button mat-raised-button class="error">Basic</button>
                    <button mat-raised-button disabled>Basic: Disabled</button>
                  </section>
                  <mat-divider />
                  <section>
                    <div>Stroked</div>
                    <button mat-stroked-button>Basic</button>
                    <button mat-stroked-button disabled>Basic: Disabled</button>
                  </section>
                  <mat-divider />
                  <section>
                    <div>Flat</div>
                    <button mat-flat-button class="primary">Basic</button>
                    <button mat-flat-button class="secondary">Basic</button>
                    <button mat-flat-button class="error">Basic</button>
                    <button mat-flat-button disabled>Basic: Disabled</button>
                  </section>
                  <mat-divider />
                  <section>
                    <div>Icon</div>
                    <button mat-icon-button>
                      <mat-icon>more_vert</mat-icon>
                    </button>
                  </section>
                  <mat-divider />
                  <section>
                    <div>FAB</div>
                    <button mat-fab>
                      <mat-icon>delete</mat-icon>
                    </button>
                  </section>
                  <mat-divider />
                  <section>
                    <div>Mini FAB</div>
                    <button mat-mini-fab>
                      <mat-icon>menu</mat-icon>
                    </button>
                  </section>
                  <mat-divider />
                  <section>
                    <div>Extended Fab</div>
                    <button mat-fab extended class="primary">
                      <mat-icon>favorite</mat-icon>
                      Basic
                    </button>
                    <button mat-fab extended class="secondary">
                      <mat-icon>favorite</mat-icon>
                      Basic
                    </button>
                    <button mat-fab extended class="error">
                      <mat-icon>favorite</mat-icon>
                      Basic
                    </button>
                  </section>
                </div>
              </mat-expansion-panel>
            </mat-accordion>
          </div>
        </mat-tab>
        <mat-tab label="Data">
          <div>Example data</div>
        </mat-tab>
      </mat-tab-group>
    </nshmp-template-main-content>

    <!-- Setting panel -->
    <nshmp-template-settings>
      <div>Plot application settings</div>
    </nshmp-template-settings>
  </nshmp-template-content-container>

  <nshmp-template-about
    applicationName="Example Application: Plot"
    [applicationVersion]="appVersion"
  >
    <div>About page</div>
  </nshmp-template-about>
</nshmp-template>