關閉按鈕

謙虛的關閉按鈕可用於任何需要在點擊時消失的項目。

關閉按鈕是具有類別 .close-button 的 <button> 元素。我們使用乘號符號 (×) 作為 X 圖示。此圖示會包覆在具有屬性 aria-hidden="true" 的 <span> 中，因此螢幕閱讀器不會讀取 X 圖示。

按鈕也會標記 aria-label 以釐清按鈕的用途。

在影片中觀看此部分

<div class="callout" data-closable>
  <button class="close-button" aria-label="Close alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
  <p>Look at this close button!</p>
</div>

看看這個關閉按鈕！

製作可關閉的元素

關閉按鈕本身不會關閉元素，但你可以將它與 Toggler、Reveal、Off-canvas 以及其他有開啟和關閉行為的插件一起使用。

任何元素都可以用作關閉觸發器，而不仅仅是關閉按鈕。在標註中將屬性 data-close 新增到任何元素，即可將其變成關閉觸發器。

以下範例將標註與關閉按鈕元件和 data-closable 屬性配對，以建立一個可關閉的警示方塊。

在影片中觀看此部分

<div class="callout" data-closable>
  <p>You can so totally close this!</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="success callout" data-closable="slide-out-right">
  <p>You can close me too, and I close using a Motion UI animation.</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>

你完全可以關閉這個！

你也可以關閉我，我使用 Motion UI 動畫關閉。

Sass 參考

變數

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

名稱	類型	預設值	描述
`$closebutton-position`	清單	`right top`	關閉按鈕的預設位置。第一個值應該是 `right` 或 `left`，第二個值應該是 `top` 或 `bottom`。
`$closebutton-z-index`	數字	`10`	關閉按鈕的預設 z-index。
`$closebutton-default-size`	字串	`medium`	用作預設的按鈕大小
`$closebutton-offset-horizontal`	數字或對應	`small: 0.66rem medium: 1rem`	關閉按鈕的右（或左）偏移量。
`$closebutton-offset-vertical`	數字或對應	`small: 0.33em medium: 0.5rem`	關閉按鈕的上（或下）偏移量。
`$closebutton-size`	數字或對應	`small: 1.5em medium: 2em`	關閉按鈕的大小。用於產生尺寸修改器。
`$closebutton-lineheight`	數字	`1`	關閉按鈕的行高。它會影響元素的間距。
`$closebutton-color`	顏色	`$dark-gray`	關閉按鈕的預設顏色。
`$closebutton-color-hover`	顏色	`$black`	將滑鼠移到關閉按鈕上的預設顏色。

混合

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

close-button-size

@include close-button-size($size);

設定關閉按鈕的大小和位置。

參數	類型	預設值	描述
`$size`	關鍵字	`medium`	要使用的尺寸。設定為 `small` 以建立一個小的關閉按鈕。在 `$closebutton-*` 變數中定義的「中」值將用作關閉按鈕的預設尺寸和位置。

close-button

@include close-button;

使用設定變數中的樣式，新增關閉按鈕的樣式。