Safe Areas

Với việc phát hành iPhone , Apple đã giới thiệu safe areas , được Google Chrome triển khai sau này với sự hỗ trợ trong Android.

Ở hướng dọc, ZaUI sẽ tự động thực hiện các sửa đổi kiểu cần thiết, nhưng theo hướng ngang, một số lớp bổ sung phải được thêm vào các phần tử:

safe-areas - thêm vào phần tử dính vào mép màn hình bên trái theo hướng ngang
safe-area-left - thêm vào phần tử dính vào mép màn hình bên trái theo hướng ngang
safe-area-right - thêm vào phần tử dính vào mép màn hình bên phải theo hướng ngang
no-safe-areas - thêm vào phần tử nằm bên trong 'safe-areas' để loại bỏ khoảng cách ngang
no-safe-area-left - thêm vào phần tử nằm bên trong safe-areas để loại bỏ khoảng cách bên trái
no-safe-area-right -thêm vào phần tử nằm bên trong 'safe-areas' để loại bỏ khoảng cách bên phải

Ví dụ:

<body>
  <!-- app root -->
  <div id="app">
    <!-- view chính, thêm "safe-areas" class -->
    <div className="view view-main view-init safe-areas" data-url="/">
      <div className="page">
        <div className="navbar">...</div>
        <div className="page-content">
          <!-- kế thừa safe-areas từ view -->
          <div className="list">...</div>
          <!-- kế thừa safe-areas từ view -->
          <div className="block">...</div>
          <!--
            phảiblocks 2 cột: cần
            - xoá khoảng trắng bên phải của block phía bên trái
            - xoá khoảng trắng bên trái của block phía bên phải
          -->
          <div className="row">
            <!--  xoá khoảng trắng bên phải của block phía bên trái -->
            <div className="block col no-safe-area-right">...</div>
            <!-- xoá khoảng trắng bên trái của block phía bên phải -->
            <div className="block col no-safe-area-left">...</div>
          </div>
          ...
        </div>
      </div>
    </div>
  </div>
  ...
</body>