跳至主要內容 跳至文件導覽

可見性(Visibility)

使用可見性工具程式控制元素的可見性,而不修改其 display。

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

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

根據需要套用 .visible.invisible

<div class="visible">...</div>
<div class="invisible">...</div>
// Class
.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}

CSS

Sass utilities API

可見性通用類別在 scss/_utilities.scss 中的 utilities API 中宣告。了解如何使用 utilities API。

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