Sakulime UI
v0.4.8

Gap 間距 ​

設定排版元件之間的間距，整個排版層只有這一個間距屬性。

用法 ​

html
<div sl-gap="2xl">
  <div sl-stack>...</div>              <!-- 間距 2xl -->
  <div sl-wrap>...</div>               <!-- 間距 2xl -->
  <div sl-stack sl-gap="xs">...</div>  <!-- 間距 xs -->
</div>

sl-gap 寫入可繼承的 --sl-gap 變數。寫於外層時，內部所有讀取間距的排版元件皆一併生效，整區的間距一次設定完成。

原始碼
<div sl-stack>
  <div>項目</div>
  <div>項目</div>
  <div>項目</div>
</div>

- 表示不寫這個屬性，用預設值；元件標記欄位的 - 是寫裸屬性

內層另行設定時，以最近的一層為準：

原始碼
<div sl-stack sl-gap="2xl">
  <div sl-stack>
    <div>項目 1</div>
    <div>項目 2</div>
    <div>項目 3</div>
  </div>
  <div sl-wrap>
    <div>項目 1</div>
    <div>項目 2</div>
    <div>項目 3</div>
  </div>
  <div sl-grid style="--sl-grid-min: 6rem">
    <div>項目 1</div>
    <div>項目 2</div>
    <div>項目 3</div>
  </div>
  <div sl-stack sl-gap="xs">
    <div>項目 1</div>
    <div>項目 2</div>
    <div>項目 3</div>
  </div>
</div>

僅需調整單一元件、且不改動屬性時，可改寫該元件的 --sl-<元件>-gap，例如 --sl-stack-gap。

這些變數優先於繼承而來的 --sl-gap；級距以外的值（例如 6px）沒有對應的選項，須寫入這些變數。

sl-gap 僅提供數值，本身不參與排版。內部沒有讀取它的元件時，標示與否結果相同：

原始碼
<div sl-gap="2xl">
  <div>項目 1</div>
  <div>項目 2</div>
  <div>項目 3</div>
</div>
<div>
  <div>項目 1</div>
  <div>項目 2</div>
  <div>項目 3</div>
</div>

選項 ​

表中 px 值以根字級 16px 換算，級距本身以 rem 定義。

sl-gap 沒有預設值，未標示即未設定；各排版元件另有預設間距，多數為 md，sl-sidebar 為 lg：

選項間距
none0
xs4px
sm8px
md12px
lg16px
xl20px
2xl24px
3xl32px
4xl40px
5xl48px
原始碼
<div sl-stack>
  <div>項目 1</div>
  <div>項目 2</div>
</div>
<div sl-stack sl-gap="none">
  <div>項目 1</div>
  <div>項目 2</div>
</div>
<div sl-stack sl-gap="xs">
  <div>項目 1</div>
  <div>項目 2</div>
</div>
<div sl-stack sl-gap="sm">
  <div>項目 1</div>
  <div>項目 2</div>
</div>
<div sl-stack sl-gap="md">
  <div>項目 1</div>
  <div>項目 2</div>
</div>
<div sl-stack sl-gap="lg">
  <div>項目 1</div>
  <div>項目 2</div>
</div>
<div sl-stack sl-gap="xl">
  <div>項目 1</div>
  <div>項目 2</div>
</div>
<div sl-stack sl-gap="2xl">
  <div>項目 1</div>
  <div>項目 2</div>
</div>
<div sl-stack sl-gap="3xl">
  <div>項目 1</div>
  <div>項目 2</div>
</div>
<div sl-stack sl-gap="4xl">
  <div>項目 1</div>
  <div>項目 2</div>
</div>
<div sl-stack sl-gap="5xl">
  <div>項目 1</div>
  <div>項目 2</div>
</div>

適用元件 ​

讀取 sl-gap 的皆為排版元件，詳見 排版：

分類元件
排列sl-stack、sl-content、sl-wrap、sl-grid
頁面區塊sl-bar、sl-sidebar、sl-float