From af4d4c63984c872654024dbdc219158c76ad8287 Mon Sep 17 00:00:00 2001
From: Brandon Clayton <bclayton@usgs.gov>
Date: Wed, 5 Feb 2025 13:28:14 -0700
Subject: [PATCH] add tab group
---
.../src/app/plot-app/plot-app.component.html | 161 +++++++++---------
1 file changed, 84 insertions(+), 77 deletions(-)
diff --git a/projects/example/src/app/plot-app/plot-app.component.html b/projects/example/src/app/plot-app/plot-app.component.html
index 0f3ce10..91296c8 100644
--- a/projects/example/src/app/plot-app/plot-app.component.html
+++ b/projects/example/src/app/plot-app/plot-app.component.html
@@ -40,84 +40,91 @@
<!-- App content -->
<nshmp-template-main-content>
- <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>
+ <mat-tab-group>
+ <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>
+ <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 -->
--
GitLab