Sidebar 側邊欄

側邊欄與主欄並排的版面，空間不足時整組換行。

用法

<div sl-sidebar>
  <aside sl-sidebar--rail>側邊欄</aside>
  <main>主欄</main>
</div>

原始碼

<div sl-sidebar>
  <aside sl-sidebar--rail>
    <div>側邊欄</div>
  </aside>
  <div>主欄</div>
</div>

底層與 sl-wrap 相同，為啟用 flex-wrap 的 flexbox。

主欄設有最小寬度（--sl-sidebar-min，預設 55%），容器寬度不足時整組換至下一行。

位置

側邊欄的位置依先後順序決定，寫在主欄之前則在左，之後則在右：

原始碼

<div sl-sidebar>
  <div>主欄</div>
  <aside sl-sidebar--rail>
    <div>側邊欄</div>
  </aside>
</div>

標示兩個 sl-sidebar--rail 時，左右各一條：

原始碼

<div sl-sidebar>
  <aside sl-sidebar--rail>
    <div>左欄</div>
  </aside>
  <div>主欄</div>
  <aside sl-sidebar--rail>
    <div>右欄</div>
  </aside>
</div>

結構為一條 rail 搭配一個主欄，或左右各一條 rail。位置即先後順序，換邊時調整 HTML 順序即可。

尺寸

• 側邊欄寬度為 --sl-sidebar-w，預設 16rem（256px），可個別覆寫
• 主欄下限為 --sl-sidebar-min，預設 55%
• 主欄窄於下限時整組換行；rail 寫在主欄之前者換行後排於上方，之後者排於下方
• 換行判斷依據為容器可用寬度，並非視窗斷點；置於窄容器時同樣會換行

三組寬度的比較：

原始碼

<div sl-sidebar style="--sl-sidebar-w: 12rem">
  <aside sl-sidebar--rail>
    <div>側邊欄</div>
  </aside>
  <div>主欄</div>
</div>
<div sl-sidebar style="--sl-sidebar-w: 16rem">
  <aside sl-sidebar--rail>
    <div>側邊欄</div>
  </aside>
  <div>主欄</div>
</div>
<div sl-sidebar style="--sl-sidebar-w: 20rem">
  <aside sl-sidebar--rail>
    <div>側邊欄</div>
  </aside>
  <div>主欄</div>
</div>

間距

間距由 sl-gap 給定，寫在容器自身或外層皆可，預設 lg。

僅調整單一容器時，改寫 --sl-sidebar-gap。

各間距的效果：

原始碼

<div sl-sidebar>
  <aside sl-sidebar--rail>
    <div>側邊欄</div>
  </aside>
  <div>主欄</div>
</div>
<div sl-sidebar sl-gap="sm">
  <aside sl-sidebar--rail>
    <div>側邊欄</div>
  </aside>
  <div>主欄</div>
</div>
<div sl-sidebar sl-gap="md">
  <aside sl-sidebar--rail>
    <div>側邊欄</div>
  </aside>
  <div>主欄</div>
</div>
<div sl-sidebar sl-gap="lg">
  <aside sl-sidebar--rail>
    <div>側邊欄</div>
  </aside>
  <div>主欄</div>
</div>