Foundation for Sites6.8.1 變更紀錄
元件清單

按鈕群組

彈性盒狀模型

按鈕群組是相關動作項目的容器。當您需要在工具列中顯示一組動作時，它們非常棒。這些按鈕建立在按鈕樣式上，並與網格完美搭配。

基礎

將 .button-group 類別新增到容器中，並在其中放置任意數量的按鈕。按鈕之間以一個小邊框分隔。

在影片中觀看此部分

edit on codepen button 
<div class="button-group">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>
一 二 三

調整大小

按鈕群組可以使用與標準按鈕相同的類別調整大小：.tiny、.small 和 .large。

在影片中觀看此部分

edit on codepen button 
<div class="small button-group">
  <a class="button">Small</a>
  <a class="button">Button</a>
  <a class="button">Group</a>
</div>
小 按鈕 群組

著色

按鈕群組中的按鈕可以使用 .secondary、.success、.warning 和 .alert 類別個別著色。

在影片中觀看此部分

edit on codepen button 
<div class="button-group">
  <a class="secondary button">View</a>
  <a class="success button">Edit</a>
  <a class="warning button">Share</a>
  <a class="alert button">Delete</a>
</div>
檢視 編輯 分享 刪除

整個群組也可以使用相同的類別著色。

<div class="primary button-group">
  <a class="button">Harder</a>
  <a class="button">Better</a>
  <a class="button">Faster</a>
  <a class="button">Stronger</a>
</div>
更強 更好 更快 更壯

空心且透明

按鈕群組中的按鈕可以分別透過加入類別 .hollow 或 .clear 來設定空心和透明樣式。

<div class="button-group">
  <a class="secondary button hollow">View</a>
  <a class="success button hollow">Edit</a>
  <a class="warning button hollow">Share</a>
  <a class="alert button hollow">Delete</a>
</div>

<div class="button-group">
  <a class="secondary button clear">View</a>
  <a class="success button clear">Edit</a>
  <a class="warning button clear">Share</a>
  <a class="alert button clear">Delete</a>
</div>
檢視 編輯 分享 刪除
檢視 編輯 分享 刪除

整個群組也可以使用相同的類別設定空心或透明樣式。

<div class="button-group hollow">
  <a class="secondary button">View</a>
  <a class="success button">Edit</a>
  <a class="warning button">Share</a>
  <a class="alert button">Delete</a>
</div>

<div class="button-group clear">
  <a class="secondary button">View</a>
  <a class="success button">Edit</a>
  <a class="warning button">Share</a>
  <a class="alert button">Delete</a>
</div>
檢視 編輯 分享 刪除
檢視 編輯 分享 刪除

無間隙

當按鈕群組使用單一顏色時，您可能想要移除按鈕之間的 1px 間距。您可以使用 no-gaps 來達到相同效果。

<div class="primary button-group no-gaps">
  <a class="button">Harder</a>
  <a class="button">Better</a>
  <a class="button">Faster</a>
  <a class="button">Stronger</a>
</div>
更強 更好 更快 更壯

您可以在 hollow 樣式中使用 no-gaps。

<div class="primary button-group hollow no-gaps">
  <a class="button">Harder</a>
  <a class="button">Better</a>
  <a class="button">Faster</a>
  <a class="button">Stronger</a>
</div>
更強 更好 更快 更壯

您可以在所有群組/個別樣式中使用 no-gaps。

<div class="button-group no-gaps">
  <a class="secondary button">View</a>
  <a class="success button">Share</a>
  <a class="warning button hollow">Edit</a>
  <a class="alert button clear">Delete</a>
</div>
檢視 分享 編輯 刪除

等寬群組

將 .expanded 類別加入容器中，以建立全寬按鈕群組。每個項目將根據按鈕數量自動調整大小，最多六個。

在影片中觀看此部分

edit on codepen button 
<div class="expanded button-group">
  <a class="button">Expanded</a>
  <a class="button">Button</a>
  <a class="button">Group</a>
</div>
展開 按鈕 群組

堆疊

按鈕群組可以使用 .stacked 類別垂直排列。您也可以使用 .stacked-for-small 僅在小螢幕上堆疊按鈕群組，或使用 .stacked-for-medium 僅在小螢幕和中螢幕上堆疊。

在影片中觀看此部分

edit on codepen button 
<div class="stacked-for-small button-group">
  <a class="button">How</a>
  <a class="button">Low</a>
  <a class="button">Can</a>
  <a class="button">You</a>
  <a class="button">Go</a>
</div>
如何 低 能 你 走

分割按鈕

要建立分割按鈕，只需建立一個包含兩個按鈕的按鈕群組。

要建立僅有箭頭的按鈕，請加入類別 .arrow-only。請注意，按鈕仍需要標籤供螢幕閱讀器使用，可以使用 .show-for-sr 元素將標籤嵌入按鈕中。在以下範例中，輔助裝置會將箭頭按鈕讀成「顯示選單」。

在影片中觀看此部分

edit on codepen button 
<div class="button-group">
  <a class="button">Primary Action</a>
  <a class="dropdown button arrow-only">
    <span class="show-for-sr">Show menu</span>
  </a>
</div>
主要動作 顯示選單

彈性版面按鈕群組

Foundation 中的按鈕群組中的按鈕可以使用 彈性版面公用程式 類別來定位。您可以使用 .align-center、.align-right、.align-spaced 或 .align-justify。

<div class="button-group align-center">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>

<div class="button-group align-right">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>

<div class="button-group align-spaced">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>

<div class="button-group align-justify">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>
一 二 三
一 二 三
一 二 三
一 二 三

Sass 參考

變數

此元件的預設樣式可以使用專案的 設定檔 中的這些 Sass 變數進行自訂。

名稱類型預設值說明
$buttongroup-margin 數字 1rem

按鈕群組的邊界。
$buttongroup-spacing 數字 1px

按鈕群組中按鈕之間的邊界。
$buttongroup-child-selector 字串 '.button'

按鈕群組內按鈕的選擇器。
$buttongroup-expand-max 數字 6

按鈕群組中可以有的最大按鈕數目。（僅在 $global-flexbox: false; 時需要）
$buttongroup-radius-on-each 布林值 true

決定是否將 $button-radius 套用至每個按鈕或整個按鈕群組。使用 _settings.scss 中的 $global-radius 來變更半徑。

混合

我們使用這些混合來建立此元件的最終 CSS 輸出。您也可以使用混合，使用我們的元件建立自己的類別結構。

button-group

@include button-group($child-selector, $spacing);

新增按鈕群組容器的樣式。

參數類型預設值說明
$child-selector 字串 $buttongroup-child-selector

按鈕群組內按鈕的選擇器。
$spacing 數字 $buttongroup-spacing

按鈕群組中按鈕之間的間距。

button-group-no-gaps

@include button-group-no-gaps($selector);

讓按鈕緊密結合，沒有間隙。按鈕之間的邊界會合併

參數類型預設值說明
$selector 字串 $buttongroup-child-selector

按鈕群組內按鈕的選擇器。

button-group-expand

@include button-group-expand($selector, $spacing);

建立一個全寬按鈕群組，讓每個按鈕的寬度相等。

參數類型預設值說明
$selector 字串 $buttongroup-child-selector

按鈕群組內按鈕的選擇器。
$spacing 數字 $buttongroup-spacing

按鈕群組中按鈕之間的間距。

button-group-stack

@include button-group-stack($selector);

堆疊按鈕群組中的按鈕。

參數類型預設值說明
$selector 字串 $buttongroup-child-selector

按鈕群組中按鈕的選擇器。

button-group-unstack

@include button-group-unstack($selector);

取消堆疊按鈕群組中的按鈕。

參數類型預設值說明
$selector 字串 $buttongroup-child-selector

按鈕群組中按鈕的選擇器。