generator-loom/generators/page-table/templates/pages.component.html

Code generator for loom projects

<div id="<%= pages %>" class="page-layout simple right-sidenav" fusePerfectScrollbar>

  <mat-sidenav-container>
    <!-- SIDENAV -->
    <!-- / SIDENAV -->

  
    <!-- CENTER -->
    <div class="center" fxFlex>

      <!-- HEADER -->
      <div class="sub-header p-6 blue-grey-200-bg" fxLayout="row" fxLayoutAlign="space-between center">

          <!-- BREADCRUMB -->
          <div class="breadcrumb text-truncate h1 pl-24" fxLayout="row" fxLayoutAlign="start center"
                     *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">
            <%= Pages %>
          </div>
          <!-- / BREADCRUMB -->

          <!-- TOOLBAR -->
          <div class="toolbar" fxLayout="row" fxLayoutAlign="end">

              <button mat-icon-button class="mat-icon-button" matTooltip="Add">
                  <mat-icon>add</mat-icon>
              </button>

              <button mat-icon-button class="mat-icon-button" matTooltip="Edit">
                  <mat-icon>edit</mat-icon>
              </button>
              
              <button mat-icon-button class="mat-icon-button" matTooltip="Delete">
                  <mat-icon>delete</mat-icon>
              </button>

              <button mat-icon-button class="mat-icon-button" aria-label="More" matTooltip="More">
                  <mat-icon>more_vert</mat-icon>
              </button>
          </div>          
          <!-- / TOOLBAR -->

      </div>
      <!-- / HEADER -->

      <!-- CONTENT -->
      <div class="content p-24">
          <div class="content-card mat-white-bg mat-elevation-z4" fusePerfectScrollbar>
              <fuse-<%= page %>-list></fuse-<%= page %>-list>
          </div>      
      </div>
      <!-- / CONTENT -->

    </div>
    <!-- / CENTER -->

    <!-- SIDENAV -->
    <!-- / SIDENAV -->
  </mat-sidenav-container>
</div>