調整到現在30天已經過一半了
話說我們的畫面好像有點醜
現在比較常用到的就是12等分這種分割畫面的方法
為了這個我們裝一下Bootstrap

npm install bootstrap

然後調整一下angular.json

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ]
          }
        }
      }
    }
  }
}

調整完記得重啟專案

然後調整一下程式

// form-input.component.html
<div>
  {{ pageSetting.title }}
  <div [formGroup]="pageSetting.form!" *ngIf="pageSetting.form" class="row">
    <div *ngFor="let fieldSetting of pageSetting.fieldSettings" class="col-6">
      <app-field-template [fieldSetting]="fieldSetting" [control]="getControl(fieldSetting.name)">
      </app-field-template>
      <!-- {{ getControl(fieldSetting.name).value }} -->
    </div>
  </div>
</div>

在ngFor的div增加class="col-6" 外層增加 class="row"
我們預設輸入框是兩列並排所以會是col-6

// main.component.html
<div class="container">
  <app-form-input [pageSetting]="pageSettings[page]"> </app-form-input>
  <button (click)="pagePrev()">上一頁</button>
  <button (click)="pageNext()">下一頁</button>
</div>

在外層再加上container

調整完的頁面會是這樣
好像還是怪怪的 輸入框好像滿版比較好看
要改動一下scss檔案
不過為了之後調整css方便 我們再套入tailwind

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

這會在專案中生成一個 tailwind.config.js 檔案

重啟後我們在styles.scss裡面增加

input[type="text"] {
    @apply w-full;
}

input[type="tel"] {
    @apply w-full;
}

input[type="number"] {
    @apply w-full;
}

input[type="password"] {
    @apply w-full;
}

select {
    @apply w-full;
}

原本針對input調整w-full
不過checkbox跟radio會跑版 所以加上有調整的type

畫面變得稍微合理些
基本處理大概就這樣
因為之後我們可能會有些輸入元件會是組合的
這樣會需要有些元件會是col-12
這樣我們也要思考一下這個二等分或者有可能會三等份或更多的
需不需要另外再寫邏輯 這個我們再想想
如果之後有要調整在來異動

今日程式:day16