Ионный нижний колонтитул находится в нижней части экрана приложения. Работа с нижними колонтитулами почти такая же, как работа с верхними колонтитулами.
Добавление нижнего колонтитула
Основным классом для нижних колонтитулов Ionic является bar (такой же, как header). Если вы хотите добавить нижний колонтитул на свои экраны, вам нужно добавить класс нижнего колонтитула в ваш элемент после основного класса баров . Поскольку мы хотим использовать нижний колонтитул на каждом экране в приложении, мы добавим его в тело файла index.html . Мы также добавим заголовок для нашего нижнего колонтитула.
<div class = "bar bar-footer"> <h1 class = "title">Footer</h1> </div>
Приведенный выше код создаст следующий экран —
Цвета нижнего колонтитула
Если вы хотите стилизовать нижний колонтитул, вам просто нужно добавить соответствующий цветовой класс. Когда вы стилизуете свои элементы, вам нужно добавить класс основного элемента в качестве префикса к вашему классу цвета. Поскольку мы стилизуем нижний колонтитул, класс префикса будет баром, а цветовой класс, который мы хотим использовать в этом примере, является напористым (красным).
<div class = "bar bar-footer bar-assertive"> <h1 class = "title">Footer</h1> </div>
Приведенный выше код создаст следующий экран —
Вы можете использовать любой из следующих девяти классов, чтобы придать цвет нижнему колонтитулу вашего приложения —
| Цветовой класс | Описание | Результат |
|---|---|---|
| бар света | Быть использованным для белого цвета | |
| бар стабильной | Используется для светло-серого цвета | |
| бар-положительный | Быть использованным для голубого цвета | |
| бар-спокойный | Быть использованным для светло-голубого цвета | |
| бар сбалансированный | Быть использованным для зеленого цвета | |
| бар под напряжением | Быть использованным для желтого цвета | |
| бар-напористый | Быть использованным для красного цвета | |
| бар-маточное | Быть использованным для фиолетового цвета | |
| бар-темно | Быть использованным для черного цвета |
Элементы нижнего колонтитула
Нижние колонтитулы могут содержать элементы внутри него. Большую часть времени вам нужно будет добавить кнопки с иконками в нижний колонтитул.
Первая добавленная кнопка всегда будет в левом углу. Последний будет размещен справа. Кнопки между ними будут сгруппированы рядом с первой на левой стороне нижнего колонтитула. В следующем примере вы также можете заметить, что мы используем класс значков для добавления значков поверх кнопок.
<div class = "bar bar-footer bar-assertive"> <button class = "button icon ion-navicon"></button> <button class = "button icon ion-home"></button> <button class = "button icon ion-star"></button> <button class = "button icon ion-checkmark-round"></button> </div>
Приведенный выше код создаст следующий экран —
Если вы хотите переместить свою кнопку вправо, вы можете добавить класс вытягивания вправо .
<div class = "bar bar-footer bar-assertive"> <button class = "button icon ion-navicon pull-right"></button> </div>
Приведенный выше код создаст следующий экран —