Ионный - нижний колонтитул

Ionic footerнаходится в нижней части экрана приложения. Работа с нижним колонтитулом почти такая же, как работа с верхним колонтитулом.

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

Основной класс для нижних колонтитулов Ionic - bar(то же, что и заголовок). Если вы хотите добавить нижний колонтитул на свои экраны, вам нужно добавитьbar-footer класс к вашему элементу после основного barкласс. Поскольку мы хотим использовать нижний колонтитул на каждом экране приложения, мы добавим его вbody из index.htmlфайл. Мы также добавим заголовок для нашего нижнего колонтитула.

<div class = "bar bar-footer">
   <h1 class = "title">Footer</h1>
</div>

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

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

Если вы хотите стилизовать нижний колонтитул, вам просто нужно добавить к нему соответствующий цветовой класс. Когда вы стилизуете свои элементы, вам нужно добавить свой основной класс элемента в качестве префикса к вашему классу цвета. Поскольку мы стилизуем нижний колонтитул, класс префикса будетbar а цветовой класс, который мы хотим использовать в этом примере, - assertive (красный).

<div class = "bar bar-footer bar-assertive">
   <h1 class = "title">Footer</h1>
</div>

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

Вы можете использовать любой из следующих девяти классов, чтобы задать цвет нижнему колонтитулу вашего приложения по вашему выбору:

Цветовой класс	Описание	Результат
бар-свет	Используется для белого цвета
барная стойка	Используется для светло-серого цвета
бар-положительный	Используется для синего цвета
бар-штиль	Используется для голубого цвета
сбалансированный	Используется для зеленого цвета
под напряжением	Используется для желтого цвета
настойчивый	Используется для красного цвета
бар-королевский	Используется для фиолетового цвета
бар-темный	Используется для черного цвета

Элементы нижнего колонтитула

Нижние колонтитулы могут содержать элементы внутри. В большинстве случаев вам нужно будет добавить кнопки со значками внутри нижнего колонтитула.

Первая добавленная кнопка всегда будет в левом углу. Последний будет расположен справа. Кнопки между ними будут сгруппированы рядом с первой в левой части нижнего колонтитула. В следующем примере вы также можете заметить, что мы используемicon класс для добавления значков поверх кнопок.

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

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

Если вы хотите переместить кнопку вправо, вы можете добавить pull-right класс.

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon pull-right"></button>
</div>

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