Infragistics｜Indigo Design｜在 Sketch 檔案中建立 Grid 元件並產生程式碼的基本設置

將 Indigo-Components 的 Grid 元件放入 Sketch 檔案並最終產生程式碼時，需要進行幾個操作。
在本文中，我們將解釋從使用 Sketch 檔案建立簡單的 Grid 元件到生成程式碼的流程。

1. 將 Indigo-Components 中的 Grid 元件放置在 Sketch 上。

在此範例中，我選擇了 Indigo-Components > Grid > Comfortable。

2. 分離放置的網格。

放置好Grid後，在左側圖層選擇區右鍵點選Grid，點選「Detach from Symbol」即可進行分離操作。請注意，如果不執行此操作，則在程式碼產生過程中會出現錯誤。

3.設定標題行和正文行

您仍然可以按原樣生成程式碼，但是您需要在生成的 IgxGrid 中寫入適當的描述，因此請進行以下設定。

• 設定標題文本
• 設定 body 單元的 DataProperty
• 根據需要設定相關列的功能（是否編輯、是否提供排序功能等）

在上面的範例中，最右邊的標題儲存格設定為1) 將
文字設定為“價格”，
2) 使價格欄位成為可編輯儲存格，
3) 為價格欄位提供排序功能。

在上面的範例中，
對於最右列第一行的正文儲存格
，2) DataProperty 設定為 {Price}，
3) 資料類型設定為 Number。

*1 您只需在第一行設定正文單元即可。
*2 DataProperty 必須用花括號括起來。
*3 DataProperty中設定的字串在產生程式碼時成為對應列的鍵。

儲存 Sketch 檔案並將其上傳到 Indigo Cloud。接下來，在程式碼產生後配置設定。

4.產生程式碼後，為網格準備資料並傳遞給網格。

當程式碼產生成功完成後，IgxGrid將輸出到component.html，如下所示。

由於空數組被傳遞到 igx-grid 的 [data]，因此即使按原樣運行構建，主體部分也將是一個空 Grid。

因此，準備在 component.ts 端顯示的資料。這次我在本地創建的資料如下。

將上面建立的資料傳遞到 component.html 中 igx-grid 的 [data] 並再次嘗試運行。

我們已確認數據已反映出來。您也可以檢查儲存格編輯、排序功能等的執行情況。

以上是Grid創建的基礎知識。
Ignite UI for Angular 的 IgxGrid 具有廣泛的功能，因此我認為將 Skectth 中的設定保持在最低限度並在生成程式碼後修改原始程式碼會是有效的。

這次創建的Sketch檔案可以從下面下載。如果您能將其用作參考，我將不勝感激。