ipsos-components
Version:
Material Design components for Angular
62 lines (57 loc) • 2.28 kB
HTML
<section>
<h2>Single button toggle</h2>
<mat-button-toggle>Yes</mat-button-toggle>
</section>
<section>
<h2>Button toggles with icons</h2>
<mat-button-toggle-group name="alignment" aria-label="Alignments">
<mat-button-toggle value="left" aria-label="Align left">
<mat-icon>format_align_left</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="center" aria-label="Align center">
<mat-icon>format_align_center</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="right" aria-label="Align right">
<mat-icon>format_align_right</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="justify" aria-label="Align justify">
<mat-icon>format_align_justify</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
</section>
<section>
<h2>Multi-selection button toggle group</h2>
<mat-button-toggle-group multiple aria-label="Groceries">
<mat-button-toggle>Flour</mat-button-toggle>
<mat-button-toggle>Eggs</mat-button-toggle>
<mat-button-toggle>Sugar</mat-button-toggle>
<mat-button-toggle>Milk</mat-button-toggle>
</mat-button-toggle-group>
</section>
<section>
<h2>Exclusive selection button toggle group</h2>
<mat-button-toggle-group name="pies" [(ngModel)]="favoritePie" aria-label="Pies">
<mat-button-toggle *ngFor="let pie of pieOptions" [value]="pie">
{{pie}}
</mat-button-toggle>
</mat-button-toggle-group>
<p>Your favorite type of pie is: {{favoritePie}}</p>
</section>
<section>
<h2>Disabled button toggle group</h2>
<mat-button-toggle-group [disabled]="true" aria-label="Groceries">
<mat-button-toggle>Flour</mat-button-toggle>
<mat-button-toggle>Eggs</mat-button-toggle>
<mat-button-toggle>Sugar</mat-button-toggle>
<mat-button-toggle>Milk</mat-button-toggle>
</mat-button-toggle-group>
</section>
<section>
<h2>Vertical button toggle group</h2>
<mat-button-toggle-group multiple [vertical]="true" aria-label="Groceries">
<mat-button-toggle>Flour</mat-button-toggle>
<mat-button-toggle>Eggs</mat-button-toggle>
<mat-button-toggle>Sugar</mat-button-toggle>
<mat-button-toggle>Milk</mat-button-toggle>
</mat-button-toggle-group>
</section>