ทัศนวิสัย

ควบคุมการมองเห็นองค์ประกอบโดยไม่ต้องแก้ไขการแสดงผลด้วยยูทิลิตี้การมองเห็น

กำหนดvisibilityองค์ประกอบด้วยยูทิลิตี้การมองเห็นของเรา คลาสยูทิลิตี้เหล่านี้จะไม่แก้ไขdisplayค่าเลย และไม่ส่งผลกระทบต่อเลย์เอาต์ – .invisibleองค์ประกอบยังคงใช้พื้นที่ในหน้า

องค์ประกอบใน .invisibleชั้นเรียนจะถูกซ่อนไว้ ทั้งทางสายตาและสำหรับผู้ใช้เทคโนโลยีอำนวยความสะดวก/โปรแกรมอ่านหน้าจอ

สมัคร.visibleหรือ.invisibleตามความจำเป็น

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

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

ซาส

ยูทิลิตี้ API

ยูทิลิตี้การมองเห็นได้รับการประกาศในยูทิลิตี้ API ของเราในscss/_utilities.scss. เรียนรู้วิธีใช้ยูทิลิตี้ API

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