iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 18
0
自我挑戰組

人生第一次的SideProject系列 第 18

[Day 18 ] 角色卡欄位完成

今天新增的部分是大頭照更換,與人物背景以及其他資料等欄位,武器和戰鬥的部分考慮之後覺得算是非必要功能(畢竟房規太多),決定暫不實作。

目前APP長相如下:
https://ithelp.ithome.com.tw/upload/images/20191004/20118140RYYEcDw445.png

Backstory部分基本上就一樣是套版型

<div class="mt-5">
    <div class="row mb-3">
        <div class="col-8">
            <h5 class="text-center">{{backstoryOther[0].name}}</h5>
            <textarea class="w-100 border border-secondary rounded p-3" [name]="backstoryOther[0].id"
                [id]="backstoryOther[0].id" cols="30" rows="5" [(ngModel)]="backstoryOther[0].value"></textarea>
        </div>
        <div class="col-4">
            <h5 class="text-center">{{backstoryOther[1].name}}</h5>
            <textarea class="w-100 border border-secondary rounded p-3" [name]="backstoryOther[0].id"
                [id]="backstoryOther[0].id" cols="30" rows="5" [(ngModel)]="backstoryOther[1].value"></textarea>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-6">
            <h5 class="text-center">{{backstoryOther[2].name}}</h5>
            <textarea class="w-100 border border-secondary rounded p-3" [name]="backstoryOther[2].id"
                [id]="backstoryOther[2].id" cols="30" rows="5" [(ngModel)]="backstoryOther[2].value"></textarea>
        </div>
        <div class="col-6">
            <h5 class="text-center">{{backstoryOther[3].name}}</h5>
            <textarea class="w-100 border border-secondary rounded p-3" [name]="backstoryOther[3].id"
                [id]="backstoryOther[3].id" cols="30" rows="5" [(ngModel)]="backstoryOther[3].value"></textarea>
        </div>
    </div>
    <h3 class="text-center mt-4">{{title}}</h3>
    <div class="border border-secondary rounded p-3 my-2">
        <div class="row d-flex">
            <div *ngFor="let b of backstorys" class="col-6 mb-2">
                <p class="text-center">{{b.name}}</p>
                <textarea class="w-100" [name]="b.id" [id]="b.id" cols="30" rows="5" [(ngModel)]="b.value"></textarea>
            </div>
        </div>
    </div>
</div>

Bootstrap原生template果然還是有點單調,先將就下最後再來弄設計...(汗)

明天來把後來陸續新增的部分套上 save/load 功能等等做最後的修整,再來就準備來挑戰 ASP.NET 囉!

= = = = =

你今天的努力,
是否有跟未來的夢想
同一個等級?


上一篇
[Day 17 ] 技能新增&刪除
下一篇
[Day 19 ] 功能修整與Angular總結
系列文
人生第一次的SideProject33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言