文章分類/

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

0 次瀏覽
2023-11-01 更新

infragistics log

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

快速跳轉目錄

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴,歡迎諮詢你需要的軟體服務!

Picture of 軟體專家
軟體專家

群昱作為全球知名軟體推薦合作夥伴,致力於提供更多軟體解決方案給你!

更多軟體新知

立即詢價

請留下完整資訊,以便我們提供精確的服務內容給你。

詢價資訊