ionicを試す ６日目のソースコード
よく使う3つのファイルのソースコードです。
インデントを全角スペースに変換していますので、半角スペース2つに変換してお使いください。
場所は、"プロジェクトフォルダ\src\app\home"です。
home.page.html
---------------------------------------------------------------
<ion-content [fullscreen]="true">
<div id="container">
<!--表示文字列-->
<p>{{dispText}}</p>
<!--ラジオボタンによる選択-->
<ion-list>
<ion-radio-group [(ngModel)] = "dispText" (ngModelChange)="fnChangeRadio(dispText + 'に変更')">
<ion-list-header>
<ion-label>
選択肢グループの説明
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Red</ion-label>
<ion-radio slot="start" value="Red"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Green</ion-label>
<ion-radio slot="start" value="Green"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Blue</ion-label>
<ion-radio slot="start" value="Blue"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<!--エラーメッセージ-->
<p *ngIf="dispText.length==0">未入力です！</p>
</div>
</ion-content>
---------------------------------------------------------------
home.page.ts
---------------------------------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
//最初に表示される文字列
initText='色を選んでください';
//表示文字列の変数
dispText:string;
constructor() {
//表示文字列のセット
this.dispText = this.initText;
}
//ラジオボタン変更
fnChangeRadio(testtext:string){
alert(testtext);
}
}
---------------------------------------------------------------
home.page.scss
---------------------------------------------------------------
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 100px;
line-height: 1.5;
color: black;
margin: 0;
}
#container a {
text-decoration: none;
}
---------------------------------------------------------------
