src/dev-app/radio/radio-demo.html - main - githubmirror/components

src/dev-app/radio/radio-demo.html
83 строки3 KB
Kristiyan Kostadinov
refactor(multiple): switch button selectors
14 мар 2025, 09:04
14 мар 2025, 09:04103ac7c
<h1>Basic Example</h1>
<section class="demo-section">
  <mat-radio-button name="group1" checked>Option 1</mat-radio-button>
  <mat-radio-button name="group1">Option 2</mat-radio-button>
  <mat-radio-button name="group1" disabled="true">Option 3 (disabled)</mat-radio-button>
</section>

<h1>Color Example</h1>
<section class="demo-section">
  <mat-radio-button name="group2">Default (accent)</mat-radio-button>
  <mat-radio-button name="group2" color="primary">Primary</mat-radio-button>
  <mat-radio-button name="group2" color="accent">Accent</mat-radio-button>
  <mat-radio-button name="group2" color="warn">Warn</mat-radio-button>
</section>

<h1>Group Color Example</h1>
<section class="demo-section">
  <mat-radio-group color="warn">
    <mat-radio-button name="group3" value="1">Option 1</mat-radio-button>
    <mat-radio-button name="group3" value="2">Option 2</mat-radio-button>
    <mat-radio-button name="group3" value="3">Option 3</mat-radio-button>
    <mat-radio-button name="group3" value="4" color="primary">Option with color override</mat-radio-button>
  </mat-radio-group>
</section>

<h1>Dynamic Example</h1>
<section class="demo-section">
  <div>
    <span>isDisabled: {{isDisabled}}</span>
    <button matButton="elevated" (click)="isDisabled=!isDisabled" class="demo-button">
      Disable buttons
    </button>
  </div>
  <div>
    <span>isRequired: {{isRequired}}</span>
    <button matButton="elevated" (click)="isRequired=!isRequired" class="demo-button">
      Require buttons
    </button>
  </div>
  <div>
    <span><mat-checkbox [(ngModel)]="isAlignEnd">Align end</mat-checkbox></span>
  </div>
  <mat-radio-group
      name="my_options"
      [disabled]="isDisabled"
      [required]="isRequired"
      [labelPosition]="isAlignEnd ? 'after' : 'before'">
    <mat-radio-button value="option_1">Option 1</mat-radio-button>
    <mat-radio-button value="option_2">Option 2</mat-radio-button>
    <mat-radio-button value="option_3">Option 3</mat-radio-button>
  </mat-radio-group>
</section>

<h1>Favorite Season Example</h1>
<h2>Dynamic Example with two-way data-binding</h2>
<section class="demo-section">
  <mat-radio-group name="more_options" [(ngModel)]="favoriteSeason">
    @for (season of seasonOptions; track season) {
      <mat-radio-button name="more_options" [value]="season">
        {{season}}
      </mat-radio-button>
    }
  </mat-radio-group>
  <p>Your favorite season is: {{favoriteSeason}}</p>
</section>

<h1>Disabled interactive group</h1>
<section class="demo-section">
  <mat-radio-group
    disabled
    [disabledInteractive]="disabledInteractive"
    [(ngModel)]="favoriteSeason">
    @for (season of seasonOptions; track season) {
      <mat-radio-button [value]="season" matTooltip="This is a tooltip" matTooltipPosition="above">
        {{season}}
      </mat-radio-button>
    }
  </mat-radio-group>

  <div>
    <mat-checkbox [(ngModel)]="disabledInteractive">Disabled interactive</mat-checkbox>
  </div>
</section>