---
# System prepended metadata

title: 國泰產險投保平台的元件規劃

---

# 國泰產險投保平台的元件規劃

## Component

- 精靈表單

    ``` html
    <cub-stepper #stepper>

        <cub-step label="需求分析">
          <app-step-a [data]="data" (dataChange)="onDataChange($event)"></app-step-a>
        </cub-step>

        <cub-step label="行照資料">
          <app-step-b [data]="data" (dataChange)="onDataChange($event)"></app-step-b>
        </cub-step>

        <cub-step label="投保內容">
          <app-step-c [data]="data" (dataChange)="onDataChange($event)"></app-step-c>
        </cub-step>

    </cub-stepper>
    ```
    [範例 (stackblitz)](https://stackblitz.com/edit/angular-cub-stepper)
    
- 簽名板
 ![https://raw.githubusercontent.com/BioPhoton/angular-signature-pad/master/resources/demo.gif](https://raw.githubusercontent.com/BioPhoton/angular-signature-pad/master/resources/demo.gif)
    
## Directive
- 轉換大小寫
- 自訂驗證 (身分證、民國年、電話、電子郵件、地址等等)

## Pipe
- 單位轉換 (KG、CM等等)

## 結論

1. 我覺得有很多`Popup`的畫面，但是感覺只要善用 primeNG、Angular Material、Angular CDK Overlay 等內建的 Dialog 就很夠用了。
2. 然後有很多畫面，我覺得都是刻板下的功夫居多，有一些區塊可能可以等完成之後，在試著抽出共用的component。