Infragistics｜Indigo.Design｜使用 Sketch 創建的設計的每個組件的程式碼產生和組裝

當您從 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程式碼上調整效率更高，可能會有情況。