Вкладки ion не отображаются

Я попытался разместить свои ионные вкладки внизу, но они не отображаются. Кто-нибудь может мне объяснить, почему?

Домашняя страница:

<ion-content padding>

<div id = "HomePage">
<ion-item id = "profilePictureBox">
<img src = "{{user?.profilePicture}}" id = "profilePicture">
<h2 id = "username">{{user?.name}}</h2>
</ion-item>

<notifications></notifications>

<upcoming-events></upcoming-events>

</div>
</ion-content>

<nav-footer></nav-footer>

И мои ионные вкладки находятся в нижнем колонтитуле компонента:

<ion-tabs tabsPlacement = "bottom" [selectedIndex] = "0">
<ion-tab tabIcon = "home-outline" tabTitle = "Home" [root] = "HomePage">
</ion-tab>
<ion-tab tabIcon = "search" tabTitle = "test" [root] = "SearchEventsPage">
</ion-tab>
<ion-tab>
</ion-tab>
</ion-tabs>

И это CSS по умолчанию, я ничего не менял

Нет вкладок внизу, но я могу найти компонент вкладки в dom

Переместите <nav-footer> в <ion-content> или заключите его в <ion-footer>

Prasheel 01.04.2018 18:33

я пробовал, не работает

leo180593 01.04.2018 18:34

не могли бы вы поделиться скриншотом?

Prasheel 01.04.2018 18:48

Что ты имеешь в виду? проверьте это: stackblitz.com/edit/ionic-otnztv

Vega 01.04.2018 19:05

@Prasheel я загрузил скриншот

leo180593 02.04.2018 09:30

@Vega именно так

leo180593 02.04.2018 09:30

Я понял! но спасибо

leo180593 02.04.2018 09:39
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
7
2 259
0

Другие вопросы по теме