danielkuhlwein

import { Component, OnInit } from '@angular/core';
import { ClipboardService } from '../../copy-code.service';
import { MatSnackBar } from '@angular/material';

@Component({
    selector: 'dna-tabs',
    templateUrl: './tabs.component.html',
})
export class TabsComponent implements OnInit {

danielkuhlwein

<!-- Use: -->
<ss-sub-menu [buttons]="buttons" [selected]="buttons[0]" (valueChange)="onValueChange($event)"></ss-sub-menu>

<!-- Component Behind: -->
<span>
  <mat-button-toggle-group #subMenu class="sub-menu" (change)="setArrow($event)" name="subMenu" [value]="selected">
    <ng-container *ngFor="let button of buttons">
      <mat-button-toggle [value]="button">{{button}}</mat-button-toggle>
      <mat-divider [vertical]="true"> </mat-divider>
    </ng-container>

danielkuhlwein

<!-- Use: -->
<ss-sub-menu-bar [buttons]="buttons" [selected]="buttons[0]" (valueChange)="onValueChange($event)"></ss-sub-menu-bar>

<!-- Component Behind: -->
<span>
  <mat-card class="toggle-button-bar shadow">
    <mat-button-toggle-group #subMenuBar class="sub-menu" (change)="setArrow($event)" name="subMenu" [value]="selected">
      <ng-container *ngFor="let button of buttons">
        <mat-button-toggle [value]="button">{{button}}</mat-button-toggle>
        <mat-divider [vertical]="true"> </mat-divider>

danielkuhlwein

// Sub Menu

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid $ss-black-blue;
  transition: all .2s;
}

danielkuhlwein

// Sub Menu Bar

.mat-card.toggle-button-bar .mat-button-toggle-group.sub-menu {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.mat-card.toggle-button-bar .mat-divider {

danielkuhlwein

<div class="tab-container">
  <p class="header-field-label">View:</p>
  <mat-tab-group>
    <mat-tab label="Required">
      Content 1
    </mat-tab>
    <mat-tab label="Optional (5)">
      Content 2
    </mat-tab>
    <mat-tab label="All">

danielkuhlwein

.mat-tab-label {
  font-weight: normal;
  color: #2052B9 !important;
  opacity: 1 !important;
}

.mat-tab-header {
  border-bottom-width: 2px;
  border-color: #E7ECF9;
  overflow: visible !important;

danielkuhlwein

<mat-card class="table-card shadow">

  <mat-table #table matSort [dataSource]="dataSource">

    <!-- ID Column -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
      <mat-cell *matCellDef="let element">
        <div> {{element.id}} </div>
      </mat-cell>

danielkuhlwein

/* TABLE */

mat-card.table-card {
  padding: 0px;
  padding-top: 5px;
  padding-bottom: 3px;
  min-width: 300px;
}

mat-card .mat-row {

danielkuhlwein

<!-- Action Column -->
<ng-container matColumnDef="action" class="mat-column-action">
  <mat-header-cell *matHeaderCellDef></mat-header-cell>
  <mat-cell *matCellDef="let element" class="d-sm-flex">
    <mat-menu #buttonDropdown="matMenu">
      <button mat-menu-item>
        <mat-icon>file_download</mat-icon>Download Handouts</button>
    </mat-menu>
    <!-- Put the if expression on this button: -->
    <button mat-icon-button [matMenuTriggerFor]="buttonDropdown" *ngIf="expression">