文章分類/

Infragistics|Indigo.Design|從 Sketch 檔案產生程式碼時佈局設定的基礎知識

0 次瀏覽
2023-09-26 更新

infragistics log

從 Sketch 檔案產生程式碼時,如果 Sketch 檔案上的佈局設定不正確,就會發生損壞。我們將透過建立一個簡單的登入畫面來解釋佈局的基礎知識。

創作樣本

使用程式碼產生器產生如下所示的畫面。

我們這次實現的佈局有以下四個要點。

  1. 寬度為 100% 的導覽列組件
  2. 固定大小的登入面板
  3. 登入面板垂直和水平居中佈局
  4. 按組件分組

1. 100%寬度的Navbar組件

本例中,左、右、上緣以銷釘固定,高度設定為FIX(即寬度靈活)。

2.固定大小的登入面板

登入面板的高度和寬度都有固定的尺寸。 在這種情況下,寬度和高度的設定將在程式碼產生期間反映在 scss 端。

3. 登入面板佈局垂直和水平居中

若要建立中心歌舞雜耍佈局,請將固定大小的組件放置在其父組或畫板的中心。但是,在此範例中,導覽列放置在頂部,因此它放置在不包括導覽列的區域的中心。(設定方法與僅垂直居中或僅水平居中相同。)

4. 按組件分組

程式碼產生是將在 Sketch 上建立的一組解釋為一個元件來執行的,因此在建立 Sketch 時,請注意根據程式碼產生時的元件設計來建立群組。

快速跳轉目錄

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

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

Picture of 軟體專家
軟體專家

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

更多軟體新知

立即詢價

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

詢價資訊