ionic Верхний и нижний колонтитулы
ion-header-bar
Это панель заголовка, закреплённая в верхней части экрана. Если добавить к ней класс 'bar-subheader', она становится подзаголовком.
Использование
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content>
Some content!
</ion-content>
API
| Атрибуты | Type | Описание |
|---|---|---|
|
align-title
(необязательно)
|
string
|
Выравнивает заголовок. Если не задано, используется макет мобильного устройства по умолчанию (в iOS по умолчанию — по центру, в Android по умолчанию — по левому краю). Значение может быть 'left', 'center', 'right'. |
|
no-tap-scroll
(необязательно)
|
boolean
|
По умолчанию в панели заголовка при нажатии на экран содержимое прокручивается к заголовку. Можно установить no-tap-scroll в true, чтобы отключить это поведение. Его значение — логическое (true/false). |
ion-footer-bar
Когда вы знаете ion-header-bar, понять ion-footer-bar становится намного проще! Единственное отличие в том, что ion-footer-bar находится внизу экрана.
Использование
<ion-content>
Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
API
В отличие от ion-header-bar, ion-footer-bar имеет только API align-title.| Атрибуты | Type | Описание |
|---|---|---|
|
align-title
(необязательно)
|
string
|
Выравнивает заголовок. Если не задано, используется макет мобильного устройства по умолчанию (в iOS по умолчанию — по центру, в Android по умолчанию — по левому краю). Значение может быть 'left', 'center', 'right'. |