ionicを試す １９日目のソースコード一部
判定・戦闘結果表示用に使用したモーダル画面の部分のソースコードです。
勝ち負け(あるいは判定成功・失敗)用にデザインを変えて2組用意してあります。
もし使用する場合はインデントを全角スペースに変換していますので、半角スペース2つに変換してお使いください。
home.page.html
---------------------------------------------------------------
<!--判定・戦闘結果表示用-->
<!-- 成功・勝利 -->
<ion-modal id="divScreenCoverGold" [isOpen]="dispScreenCoverGold" backdropDismiss="false">
<ng-template>
<ion-content class="contentScreenCover">
<!--サイコロ1-->
<img src="../../assets/cube1.gif" class="imgDice" [hidden]="Dice1Value!='1'">
<img src="../../assets/cube2.gif" class="imgDice" [hidden]="Dice1Value!='2'">
<img src="../../assets/cube3.gif" class="imgDice" [hidden]="Dice1Value!='3'">
<img src="../../assets/cube4.gif" class="imgDice" [hidden]="Dice1Value!='4'">
<img src="../../assets/cube5.gif" class="imgDice" [hidden]="Dice1Value!='5'">
<img src="../../assets/cube6.gif" class="imgDice" [hidden]="Dice1Value!='6'">
<!--サイコロ2-->
<img src="../../assets/cube1.gif" class="imgDice" [hidden]="Dice2Value!='1'">
<img src="../../assets/cube2.gif" class="imgDice" [hidden]="Dice2Value!='2'">
<img src="../../assets/cube3.gif" class="imgDice" [hidden]="Dice2Value!='3'">
<img src="../../assets/cube4.gif" class="imgDice" [hidden]="Dice2Value!='4'">
<img src="../../assets/cube5.gif" class="imgDice" [hidden]="Dice2Value!='5'">
<img src="../../assets/cube6.gif" class="imgDice" [hidden]="Dice2Value!='6'">
{{ResultMessage}}
</ion-content>
<ion-content class="contentScreenCover">{{ResultMessage2}}</ion-content>
<ion-content class="contentScreenCover"><ion-button id="btnScreenCover" (click)="fnOnClickNextPage()">{{PageBtnSelectText}}</ion-button></ion-content>
</ng-template>
</ion-modal>
<!-- 失敗・敗北 -->
<ion-modal id="divScreenCoverSilver" [isOpen]="dispScreenCoverSilver" backdropDismiss="false">
<ng-template>
<ion-content class="contentScreenCover">
<!--サイコロ1-->
<img src="../../assets/cube1.gif" class="imgDice" [hidden]="Dice1Value!='1'">
<img src="../../assets/cube2.gif" class="imgDice" [hidden]="Dice1Value!='2'">
<img src="../../assets/cube3.gif" class="imgDice" [hidden]="Dice1Value!='3'">
<img src="../../assets/cube4.gif" class="imgDice" [hidden]="Dice1Value!='4'">
<img src="../../assets/cube5.gif" class="imgDice" [hidden]="Dice1Value!='5'">
<img src="../../assets/cube6.gif" class="imgDice" [hidden]="Dice1Value!='6'">
<!--サイコロ2-->
<img src="../../assets/cube1.gif" class="imgDice" [hidden]="Dice2Value!='1'">
<img src="../../assets/cube2.gif" class="imgDice" [hidden]="Dice2Value!='2'">
<img src="../../assets/cube3.gif" class="imgDice" [hidden]="Dice2Value!='3'">
<img src="../../assets/cube4.gif" class="imgDice" [hidden]="Dice2Value!='4'">
<img src="../../assets/cube5.gif" class="imgDice" [hidden]="Dice2Value!='5'">
<img src="../../assets/cube6.gif" class="imgDice" [hidden]="Dice2Value!='6'">
{{ResultMessage}}
</ion-content>
<ion-content class="contentScreenCover">{{ResultMessage2}}</ion-content>
<ion-content class="contentScreenCover"><ion-button id="btnScreenCover" (click)="fnOnClickNextPage()">{{PageBtnSelectText}}</ion-button></ion-content>
</ng-template>
</ion-modal>
---------------------------------------------------------------
home.page.scss
---------------------------------------------------------------
#divScreenCoverGold{
--height:150px;
--width:100%;
background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
color: #000000;
text-align: center;
}
#divScreenCoverSilver{
--height:150px;
--width:100%;
background: linear-gradient(45deg, #353535 0%, #7E7E7E 45%, #E8E8E8 70%, #4E4E4E 85%, #353535 90% 100%);
color: #000000;
text-align: center;
}
.divCoverMessage{
top: 30%;
text-align: center;
color: #000000;
opacity:1.0;//透明度0.0（完全に透明）～1.0（完全に不透明）
transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.btnScreenCover{
width: fit-content;
}
.contentScreenCover{
font-size: 25px;
line-height: 36px;
}
---------------------------------------------------------------
