Ionic — Javascript Нижний колонтитул

Эта директива добавит нижний колонтитул внизу экрана.

Использование нижнего колонтитула

Ионный нижний колонтитул можно добавить, применив класс ионного нижнего колонтитула . Работа с ним аналогична работе с заголовком. Мы можем добавить заголовок и поместить его в левую, центральную или правую часть экрана, используя атрибут align-title . С помощью префикса мы можем использовать ионные цвета. Давайте создадим нижний колонтитул красного цвета с заголовком в центре.

<ion-footer-bar align-title = "center" class = "bar-assertive">
   <h1 class = "title">Title!</h1>
</ion-footer-bar>

Приведенный выше код создаст следующий экран —

Добавление элементов

Мы можем добавить значки кнопок или другие элементы в панель нижнего колонтитула и их стиль будет применен. Давайте добавим кнопку и значок в нижний колонтитул.

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
  
   <h1 class = "title">Footer</h1>

   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

Приведенный выше код создаст следующий экран:

Добавление нижнего колонтитула

Мы показали вам, как использовать подзаголовок. Точно так же можно создать суб-нижний колонтитул. Он будет расположен над строкой нижнего колонтитула. Все, что нам нужно сделать, это добавить класс bar-sub-footer к нашему элементу ion-footer-bar .

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

<ion-footer-bar class = "bar-subfooter bar-positive">
   <h1 class = "title">Sub Footer</h1>
</ion-footer-bar>

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
  
   <h1 class = "title">Footer</h1>

   <div class = "buttons" ng-click = "doSomething()">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

Приведенный выше код создаст следующий экран —