Framework7 - Bảng điều khiển bên

Sự miêu tả

Các bảng điều khiển bên di chuyển về phía bên trái hoặc bên phải của màn hình để hiển thị nội dung. Framework7 cho phép bạn bao gồm tối đa 2 bảng (bảng bên phải và bảng bên trái) vào ứng dụng của mình. Bạn cần thêm bảng vào đầu <body> và sau đó chọn hiệu ứng mở bằng cách áp dụng các lớp được liệt kê sau:

  • panel-reveal - Điều này sẽ làm cho toàn bộ nội dung của ứng dụng chuyển ra ngoài.

  • panel-cover - Điều này sẽ làm cho bảng điều khiển phủ lên nội dung của ứng dụng.

Ví dụ, đoạn mã sau chỉ ra cách sử dụng các lớp trên:

<body>
   <!-- First add Panel's overlay which will overlays app while panel is opened -->
   <div class = "panel-overlay"></div>
 
   <!-- Left panel -->
   <div class = "panel panel-left panel-cover">
      panel's content
   </div>
 
   <!-- Right panel -->
   <div class = "panel panel-right panel-reveal">
      panel's content
   </div>
 
</body>

Bảng sau đây cho thấy các loại bảng điều khiển được hỗ trợ bởi Framework77:

S. không Loại & Mô tả
1 Mở và đóng bảng điều khiển

Sau khi bạn thêm bảng điều khiển và hiệu ứng, chúng tôi cần thêm chức năng để mởđóng bảng điều khiển.

2 Sự kiện bảng điều khiển

Để phát hiện cách người dùng tương tác với bảng điều khiển, bạn có thể sử dụng các sự kiện bảng điều khiển.

3 Mở bảng bằng vuốt

Framework7 cung cấp cho bạn tính năng mở bảng điều khiển bằng cử chỉ vuốt .

4 Bảng điều khiển được mở?

Chúng tôi có thể xác định xem bảng điều khiển có được mở hay không bằng cách sử dụng with-panel[position]-[effect] qui định.