文章分類／Infragistics
當您從 Sketch 產生單一設計的程式碼時，整個設計將會匯出為單一元件。例如，對於每個頁面都使用的工具列等部件，透過單獨產生程式碼（組件化）並在 Angular 程式碼中組合每個元件可能會更容易操作，因此我們將介紹如何做到這一點。
我使用 Sketch 創建了一個像上面這樣的簡單頁面。本文的目的是分別產生 Navbar 元件和 Articles 元件的程式碼，然後透過調整 Angular 程式碼來組裝元件。另外，在上圖中，只有一個 Article 群組屬於 Articles 群組，但這也將在 Angular 程式碼中進行調整，以使用資料綁定輸出多個項目。下面是最終影像。
產生導覽列組件、文章組件
如下所示，在程式碼產生元件選擇介面分別選擇Navbar元件和Articles元件來產生程式碼。
合併每個產生的組件
接下來，將每個元件寫在模板上。這次，我在 app.component.html 中編寫了以下內容，以避免考慮路由。 另外，用 <main class=”igx-typography”> 元素包圍整個程式碼，該元素通常在程式碼產生期間輸出。
另外，如果您為整個頁面產生程式碼，則將反映在 Sketch 中建立的背景顏色，但在這種情況下，由於產生了每個元件，因此未設定背景顏色，因此您需要手動進行設定。將以下內容加入 app.component.scss 中。
@import '~igniteui-angular/lib/core/styles/themes/utilities'; @import '../themes/default/index'; main { margin: 0; padding: 0; display: flex; flex-direction: column; overflow: auto; height: 100%; background-color: igx-color($default-palette, primary, 50); }
另外，刪除產生每個元件時給的 main 和 form 元素。
為文章組件配置 scss 調整和資料綁定。
另外，在文章元件中，我們將輸出與文章資料數量一樣多的卡片式文章內容。我按如下方式更改了articles.component.html。
<div class="articles"> <div class="article" *ngFor="let article of articles;"> <div class="image-1"> <img alt="dummy" width="243px" height="208px" src="assets/image.png"> </div> <div class="text"> <span class="lorem-ipsumissimpl">{{article.text}}</span> </div> </div> </div>
這次，要綁定的資料是手動準備的，如下所示。
articles = [ {id : 1, text : 'broken tin useful settlers pen successful locate door balloon has tears leg white supper gun rain moon steel duty regular mountain rich joined originone'}, {id : 2, text : 'unknown fallen waste construction basic green hollow driving enough sit process member problem said child adult hang would history twice game memory customs socialtwo'}, {id : 3, text : 'ranch ability advice production hat brief silence slabs about evening tropical blank hurt shore typical dear exclaimed seen specific pull inside dust herd machinerythree'}, {id : 4, text : 'symbol stand bad finish kitchen ring pile fall together few foot angle single usually song various making shot wise slope salt system list servefour'}, {id : 5, text : 'seen perhaps inch attention board religious send steel grass such substance tip shore line chest herself brief attached buried larger valuable help worker southernfive'}, ]
另外，我們對scss中以下兩個元素進行了調整。
.articles { display: flex; flex-direction: row; padding: 30px; flex-wrap: wrap; } .article { width: 243px; min-width: 243px; display: flex; flex-direction: column; padding: 0; background-color: rgb(255, 255, 255); flex: 0 1 243px; margin:16px; }
目前為止就這樣了。這次我只創建了一個相當簡單的元件，但是元件越複雜，透過直接從設計檔案產生程式碼來產生完美的程式碼就越困難。
也可以設定上面的scss調整，以便在Sketch端產生程式碼時加入邊距等，但考慮到工作效率，在Angular程式碼上調整效率更高，可能會有情況。