Учебники

Framework7 — боковые панели

Декабрь 31, 2018

Боковая панель перемещается в левую или правую часть экрана для отображения содержимого. Framework7 позволяет включать в приложение до 2 панелей (правая и левая). Вам нужно добавить панели в начале <body> и затем выбрать эффект открытия, применяя следующие перечисленные классы —

  • панель-раскрытие — это заставит весь контент приложения переместиться.

  • панель-крышка — это сделает панель для наложения на контент приложения.

панель-раскрытие — это заставит весь контент приложения переместиться.

панель-крышка — это сделает панель для наложения на контент приложения.

Например, следующий код показывает, как использовать вышеупомянутые классы — 

<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>

В следующей таблице показаны типы панелей, поддерживаемые Framework77.

Как только вы добавите панель и эффекты, нам нужно добавить функциональность, чтобы открывать и закрывать панели.

Чтобы определить, как пользователь взаимодействует с панелью, вы можете использовать события панели.

Framework7 предоставляет вам возможность открывать панель жестом смахивания .

Мы можем определить, открыта ли панель или нет, используя правило with-panel [position] — [effect] .

42
Share: