Hiển thị

Kiểm soát khả năng hiển thị của các phần tử, mà không cần sửa đổi màn hình của chúng, với các tiện ích hiển thị.

Đặt các visibilityyếu tố với các tiện ích hiển thị của chúng tôi. Các lớp tiện ích này hoàn toàn không sửa đổi displaygiá trị và không ảnh hưởng đến bố cục - .invisiblecác phần tử vẫn chiếm dung lượng trong trang.

Các phần tử cùng .invisiblelớp sẽ được ẩn cả về mặt trực quan và cho người dùng công nghệ hỗ trợ / trình đọc màn hình.

Áp dụng .visiblehoặc .invisiblekhi cần thiết.

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

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

Sass

API tiện ích

Tiện ích hiển thị được khai báo trong API tiện ích của chúng tôi trong scss/_utilities.scss. Tìm hiểu cách sử dụng API tiện ích.

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