可見性

使用可見性公用程式控制元素的可見性，而不會修改其顯示。

使用我們的可見性公用程式設定元素的 visibility。這些公用程式類別完全不會修改 display 值，也不會影響版面配置－ .invisible 元素仍然會在頁面上佔用空間。

具有 .invisible 類別的元素將對視覺和輔助技術/螢幕閱讀器使用者隱藏。

視需要套用 .visible 或 .invisible。

<div class="visible">...</div>
<div class="invisible">...</div>

// Class
.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}

CSS

可見性公用程式在 scss/_utilities.scss 中的公用程式 API 中宣告。了解如何使用公用程式 API。

"visibility": (
  property: visibility,
  class: null,
  values: (
    visible: visible,
    invisible: hidden,
  )
),