Блог

Главная - Вопросы по программированию - Как сделать кнопку и заголовок ion встроенными в панель навигации ion в Ionic 3?

Как сделать кнопку и заголовок ion встроенными в панель навигации ion в Ionic 3?

#css #angular #ionic-framework #ionic2 #ionic3

#css #angular #ionic-framework #ionic2 #ionic3

Вопрос:

Мне нужно показать ion-button и ion-title ту же строку в ion-navbar в ion-header. Ниже приведен мой код.

 <ion-header>
  <ion-navbar>
    <button ion-button icon-only>
      <ion-icon name="arrow-back"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

Как отобразить ion-button и ion-title встроить в ion-navbar ?

Ответ №1:

Попробуйте это:

 <ion-header>
    <ion-navbar>
      <ion-buttons left>
        <button ion-button icon-only >
          <ion-icon name="arrow-back"></ion-icon>
        </button>
      </ion-buttons>
      <ion-title text-left>Home</ion-title> 
    </ion-navbar>
</ion-header>

Он работает должным образом.

Ответ №2:

В последней версии Ionic (v5) положение кнопки изменилось на «слот», как показано ниже:

 <ion-header>   
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>My Navigation Bar</ion-title>   
  </ion-toolbar> 
</ion-header>

Кроме того, появилась новая кнопка ion-back-button, которая вставляет кнопку «Назад» на основе стека истории и т.д.

Значения слотов задокументированы здесь: https://ionicframework.com/docs/api/buttons

Документация по заголовку здесь:https://ionicframework.com/docs/api/header

Комментарии:

1. Я немного боролся с этим после перехода с 3. Спасибо, что сэкономили немного времени

Ответ №3:

вы должны использовать <ion-row> и <ion-col> метки. Используйте это:

 <ion-header>
<ion-navbar>
  <ion-row>
   <ion-col col-5>
    <ion-buttons left>
      <button ion-button icon-only >
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
   </ion-col>
   <ion-col col-5>
    <ion-title text-left>Home</ion-title>
   </ion-col>
  </ion-row> 
</ion-navbar>

Это действительно важно использовать, чтобы сделать ваше приложение отзывчивым.