ionicを試す １８日目のソース
よく使う3つのファイルのソースコードです。
インデントを全角スペースに変換していますので、半角スペース2つに変換してお使いください。
場所は、"プロジェクトフォルダ\src\app\home"です。
また"src\assets"にサイコロの画像１～６を保存しました。
(ファイル名は、"../../assets/cube1.gif"から"../../assets/cube6.gif")
home.page.html
---------------------------------------------------------------
<ion-content [fullscreen]="true">
<div id="container">
サイコロ表示
<ion-list>
<ion-radio-group [(ngModel)] = "dispCube">
<ion-item>
<ion-label>1を表示</ion-label>
<ion-radio slot="start" value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>２を表示</ion-label>
<ion-radio slot="start" value="2"></ion-radio>
</ion-item>
<ion-item>
<ion-label>３を表示</ion-label>
<ion-radio slot="start" value="3"></ion-radio>
</ion-item>
<ion-item>
<ion-label>４を表示</ion-label>
<ion-radio slot="start" value="4"></ion-radio>
</ion-item>
<ion-item>
<ion-label>５を表示</ion-label>
<ion-radio slot="start" value="5"></ion-radio>
</ion-item>
<ion-item>
<ion-label>６を表示</ion-label>
<ion-radio slot="start" value="6"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<img src="../../assets/cube1.gif" class="imgDice" [hidden]="dispCube!=1">
<img src="../../assets/cube2.gif" class="imgDice" [hidden]="dispCube!=2">
<img src="../../assets/cube3.gif" class="imgDice" [hidden]="dispCube!=3">
<img src="../../assets/cube4.gif" class="imgDice" [hidden]="dispCube!=4">
<img src="../../assets/cube5.gif" class="imgDice" [hidden]="dispCube!=5">
<img src="../../assets/cube6.gif" class="imgDice" [hidden]="dispCube!=6">
<hr />
</div>
</ion-content>
---------------------------------------------------------------
home.page.ts
---------------------------------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-page-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
//サイコロの表示値（１～６ならば対応するサイコロ画像を表示する)
dispCube :number;
//コンストラクター
constructor(){
}
}
---------------------------------------------------------------
home.page.scss
---------------------------------------------------------------
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 2o0px;
line-height: 1.5;
color: black;
margin: 0;
}
#container a {
text-decoration: none;
}
/** サイコロの枠線 **/
.imgDice{
margin: 1px;
border:1px solid #000
}
---------------------------------------------------------------
