material Radio 单选按钮

作者: 追逐繁星的阿忠 | 来源:发表于2018-06-12 10:26 被阅读11次

说明:苦于墙的原因,看文档很是费力,但是不阻碍官配的魅力,希望该文档能给各位道友带来一丝安慰,翻墙不易,还望看官多多点赞支持为谢!(长期更新,加油!)
样例图片展示(gif):

1.gif

HTML

<mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason">
  <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
    {{season}}
  </mat-radio-button>
</mat-radio-group>
<div class="example-selected-value">Your favorite season is: {{favoriteSeason}}</div>

TS

import {Component} from '@angular/core';

/**
 * @title Radios with ngModel
 */
@Component({
  selector: 'radio-ng-model-example',
  templateUrl: 'radio-ng-model-example.html',
  styleUrls: ['radio-ng-model-example.css'],
})
export class RadioNgModelExample {
  favoriteSeason: string;

  seasons = [
    'Winter',
    'Spring',
    'Summer',
    'Autumn',
  ];
}

CSS

.example-radio-group {
  display: inline-flex;
  flex-direction: column;
}

.example-radio-button {
  margin: 5px;
}

.example-selected-value {
  margin: 15px 0;
}

相关文章

网友评论

    本文标题:material Radio 单选按钮

    本文链接:https://www.haomeiwen.com/subject/splleftx.html