文章物件開發

<div class="container">
  <div>
      <div class="flex justify-content-start">
        <p-button label="回列表" icon="pi pi-arrow-circle-left" styleClass="p-button-secondary p-button-sm m-2" (click)="backToList()"></p-button>
      </div>
      <div class="flex justify-content-start">
        <label class="p-2" for="username">標題:</label>
        <input class="p-2" style="width: 250px" pInputText id="username" type="text" [(ngModel)]="title"/>
      </div>
      <div class="flex justify-content-start">
        <label class="p-2">旅遊時間:</label>
        <p-calendar [(ngModel)]="PlayedTime" [showIcon]="true"></p-calendar>
      </div>
      <div class="flex justify-content-start">
        <label class="p-2">類型:</label>
        <input class="p-2" style="width: 250px" pInputText type="text" [(ngModel)]="ArticleType"/>
      </div>
      <div class="flex justify-content-start">
        <label class="p-2">地點:</label>
        <input class="p-2" style="width: 250px" pInputText type="text" [(ngModel)]="Position"/>
      </div>
      <div class="flex justify-content-start">
        <label class="p-2">描述:</label>
        <div class="card">
          <p-editor [(ngModel)]="Description" [style]="{ height: '400px'}"></p-editor>
        </div>
      </div>
      <div class="flex justify-content-end">
        <p-button label="儲存" icon="pi pi-save" styleClass="p-button-outlined p-button-success p-button-sm m-2" (click)="editSave()"></p-button>
      </div>
  </div>
</div>

UI顯示

小結

本章完成文章頁面ＵＩ實作，後續進行功能面編輯，與使用者操作流程串連．