Липкая кнопка ionic внизу экрана
Ответы 1
Вы можете использовать компонент нижний колонтитул:
Footer is a root component of a page that sits at the bottom of the page. Footer can be a wrapper for ion-toolbar to make sure the content area is sized correctly.
<ion-content></ion-content>
<ion-footer>
<ion-toolbar>
<button ion-button text-only>Your Button</button>
</ion-toolbar>
</ion-footer>
Поскольку ion-footer помещается в внеion-content, нижний колонтитул будет отображаться всегда, даже если на странице много контента и пользователь находится вверху страницы.
Демо StackBlitz
@Manos, это неверно; нижний колонтитул всегда будет отображаться внизу страницы, даже если пользователь находится вверху страницы
Да, он всегда будет внизу, но я не думаю, что он будет виден, если пользователь находится вверху длинного экрана. Я думаю, мне нужно добавить немного css, чтобы сделать его липким. Бывший. положение: фиксированное; внизу: 0;
Я постараюсь посмотреть. Спасибо за поддержку.
@Manos Я добавил к ответу демонстрацию StackBlitz, чтобы вы могли видеть, как работает нижний колонтитул в Ionic :)
Я добавил свойства css ion-footer {position: fixed; bottom: 0;} и сделал его ПРИКЛЮЧЕННЫМ. Еще раз спасибо.
Но он должен работать и без него ... Вы смотрели ссылку демо StackBlitz? Обратите внимание, что ion-footer находится вне элемента ion-content. Вот как Ionic делает нижний колонтитул липким без необходимости каких-либо дополнительных правил стиля.
Вы правы насчет нижнего колонтитула. Он всегда отображается, даже если пользователь находится вверху экрана. Еще раз спасибо за вашу поддержку
Рад помочь @Manos :)
Мне нужно, чтобы компонент всегда был внизу экрана, пока пользователь прокручивает вниз. Компонент всегда должен быть виден, пока пользователь прокручивает страницу вниз. Нижний колонтитул останется только внизу экрана и не будет виден, если пользователь находится в верхней части длинного экрана.