基礎 - 關閉按鈕

描述

當您希望透過點選某個元素將其移除時，可以使用關閉按鈕。關閉按鈕是一個<button>元素，它使用.close-button類。乘號 (×) 用作 X 圖示，它將包含在aria-hidden = "true"屬性中，因此螢幕閱讀器不會讀取 X 圖示。為了闡明按鈕的目的，它用aria-label進行標記。

點選關閉按鈕不會關閉元素，但可以與切換器、顯示、側邊欄和其他包含開啟/關閉操作的外掛一起使用。

示例

以下示例演示瞭如何在 Foundation 中使用關閉按鈕。

線上演示

<html>
   <head>
      <title>Close Button</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>

   </head>

   <body>
      <div class = "callout">
         <button class = "close-button" aria-label = "Close alert" type = "button">
            <span aria-hidden = "true">×</span>
         </button>
         <p>This is an example of close button!</p>
      </div>

      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

輸出

讓我們執行以下步驟來檢視上面給出的程式碼是如何工作的：

將上面給出的 html 程式碼儲存為foundation_close_button.html檔案。
在瀏覽器中開啟此 HTML 檔案，將顯示如下所示的輸出。

Sass 參考

變數

下表列出了專案設定檔案中的 SASS 變數，這些變數使該元件的預設樣式能夠進行自定義。

序號	名稱和描述	型別	預設值
1	$closebutton-position 它表示關閉按鈕的預設位置。第一個值和第二個值應分別為right或left以及top或bottom。	列表	right top
2	$closebutton-offset-horizontal 它表示關閉按鈕的右側（或左側）偏移量。	數字	1rem
3	$closebutton-offset-vertical 它表示關閉按鈕的頂部（或底部）偏移量。	數字	0.5rem
4	$closebutton-size 它表示關閉按鈕的預設字型大小。	數字	2em
5	$closebutton-lineheight 它表示關閉按鈕的行高，影響元素的間距。	數字	1
6	$closebutton-color 它表示關閉按鈕的預設顏色。	顏色	$dark-gray
7	$closebutton-color-hover 它表示滑鼠懸停時關閉按鈕的預設顏色。	顏色	$black

混合器

要構建此元件的最終 CSS 輸出，可以使用以下混合器。要使用 Foundation 元件構建您自己的類結構，您可以自己使用這些混合器。

CLOSE-BUTTON

@include close-button;

透過使用設定變數中的樣式，它添加了關閉按鈕的樣式。

foundation_basic_controls.htm

列印頁面