kalidea/kaligraphi

<h1>Menu</h1>

<div class="example" [class.darkBg]="reverse">
  <article>
    <kal-button [kalMenuTriggerFor]="menu" [kalTheme]="themes">
      <kal-icon>add</kal-icon>
      Toggle button primary
    </kal-button>

    <kal-menu #menu [kalTheme]="themes">
      <kal-option *ngFor="let option of optionsList" (selectionChange)="selected($event)">{{ option }}</kal-option>
    </kal-menu>

  </article>

</div>

<div class="configurator">

  <kal-form-field>
    <kal-select label="themes" placeholder="pick themes" multiple="true" [(ngModel)]="themes">
      <kal-option value="">none</kal-option>
      <kal-option value="primary">primary</kal-option>
      <kal-option value="secondary">secondary</kal-option>
      <kal-option value="tertiary">tertiary</kal-option>
      <kal-option value="reverse">reverse</kal-option>
    </kal-select>
  </kal-form-field>

  <kal-form-field>
    <kal-button (click)="updateOptions()">Update option</kal-button>
  </kal-form-field>
</div>