https://material.angular.io/components/radio/api#MatRadioGroup

https://material.angular.io/components/radio/api#MatRadioGroup
image

在上一篇的Angular记录中，对Angular官网（中文）的快速上手demo已经大概通过，
虽然还是感觉其作为Vue的借鉴本体，有些地方感觉不是很方便，比如我要加一个div套
在hr标签左右才能展示横切线，但是感觉其分包确实也够清晰。

今天想着手做一个radio group的一个组件，也是官网文档中接下来的一步。
那么开始吧。

https://material.angular.io/components/radio/overview 通过angular官网的资料网站，
可以发现一个radio的demo。

通过demo的代码演示，我们继续观察：
https://stackblitz.com/run?file=src%2Fapp%2Fradio-overview-example.ts

<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>


<!-- Copyright 2023 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at https://angular.io/license -->

其中上面的模板内容比较容易理解。
通过index html我们再次发现：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic radios</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography mat-app-background">
  <radio-overview-example></radio-overview-example>
  <span class="version-info">Current build: 15.1.3</span>
</body>
</html>

其中

<radio-overview-example></radio-overview-example>

就是要添加的模塊，對應的在ts文件中

@Component({
  selector: 'radio-overview-example',
  templateUrl: 'radio-overview-example.html',
  styleUrls: ['radio-overview-example.css'],
})

component的selector。

同樣我也做了一個demo，那麼先把這個數據展示到頁面，
繼而再去觀察怎樣獲取選擇的radio的value值。

    selectors: [
      '家庭',
      '人際',
      '情感',
      '工作',
      '經濟',
      '健康',
      '情緒',
      '自我',
      '生涯',
      '信仰'
    ].map(v => {
      return { display: v, value: v };
    })
posted @ 2023-02-07 11:24  ukyo--碳水化合物  阅读(33)  评论(0)    收藏  举报