Не удается получить работу с ионными вкладками

Я попытался настроить вкладки, например, в this example, но, как вы можете видеть, контент не отображается. Я:Не удается получить работу с ионными вкладками

<ion-nav-bar class="bar-positive"> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 
</ion-nav-bar> 

<ion-nav-view> 
    <ion-nav-buttons side="right"> 
     <button class="button" ng-click="done()"> 
      Done 
     </button> 
    </ion-nav-buttons> 
</ion-nav-view> 
<ion-tabs class="tabs-positive tabs-icon-only"> 

    <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> 
     Content of One 
    </ion-tab> 

    <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> 
     Content of Two 
    </ion-tab> 

    <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> 
     Content of Three 
    </ion-tab> 

</ion-tabs>

И если я выбираю Home Content of One не отображается. Я только что скопировал код с официальной стороны: Ionic ion-tabs. Также мои ion-nav-buttons не отображаются в ion-nav-bar.

Что не так с моим кодом?

Возможно ли получить вкладки в верхней части экрана? я не хочу дно, я хочу, чтобы они были сверху. Мне также необходимо изменить цвет и прозрачность, если это возможно.

источник

2015-07-21 Mulgard

Как предположил Бипин Бхандари, в коде отсутствует кое-что. В какой-то момент вы можете использовать маршрутизацию и контроллер.

Сказав это, вы можете просто отобразить страницу с закладками, используя этот код:

<body ng-app="starter"> 

    <ion-header-bar class="bar-positive"> 
     <h1 class="title">Ionic Blank Starter</h1> 
    </ion-header-bar> 

    <ion-tabs class="tabs-positive tabs-icon-only"> 

     <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> 
      <ion-nav-view> 
       <ion-content> 
        Content of One 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 

     <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> 
      <ion-nav-view> 
       <ion-content> 
        Content of Two 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 

     <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> 
      <ion-nav-view> 
       <ion-content> 
        Content of Three 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 
    </ion-tabs> 

</body>

При этом вы даже не нужно определить контроллер или управлять состояниями и все будет работать нормально.

Это codepen.

Здесь вы не используете стандартную навигационную систему, поскольку вы не используете состояния, и у вас нет значения по умолчанию <ion-nav-view>, где будут введены все подзадачи; см. here.

Если вы хотите добавить кнопку в ваш заголовок вы можете только добавить его внутри <ion-header-bar>:

<ion-header-bar class="bar-positive"> 
    <h1 class="title">Ionic Blank Starter</h1> 
    <div class="buttons"> 
     <button class="button">Done</button> 
     </div> 
</ion-header-bar>

Конечно работать с чем-то вроде этого не было бы возможным, учитывая, что вы будете строить работу и вам нужны контроллеры, навигация и история.

путь заключается в определении <ion-nav-view> в вашем теле:

<ion-nav-bar class="bar-positive"> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 
</ion-nav-bar> 

<ion-nav-view></ion-nav-view>

Определение состояний при конфигурации приложения:

$stateProvider 
    .state('home', { 
     url: '/home', 
     templateUrl: 'home.html', 
     controller: 'homeController', 
    });

и добавления html-страницу с вашим видом и вкладками:

<ion-view view-title="home"> 

    <ion-tabs class="tabs-positive tabs-icon-only tabs-striped tabs-top"> 

     <ion-tab title="Tab1" icon-on="ion-ios-home" icon-off="ion-ios-home-outline"> 
      <ion-nav-view name="tab-1"> 
       <ion-content padding="true" has-header="true"> 
        <h1>HOME</h1> 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 

     <ion-tab title="Tab2" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> 
      <ion-nav-view name="tab-2"> 
       <ion-content padding="true" has-header="true"> 
        <h1>SETTINGS</h1> 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 

     <ion-tab title="Tab3" icon-on="ion-ios-information" icon-off="ion-ios-information-outline"> 
      <ion-nav-view name="tab-3"> 
       <ion-content padding="true" has-header="true"> 
        <h1>INFO</h1> 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 

    </ion-tabs> 

</ion-view>

Если вы хотите увидеть, как это работает, то это должно быть plunker.

источник

2015-07-21 17:08:19 LeftyX

Это именно то, что я искал. Я не хочу никакой маршрутизации для своих вкладок. это совершенно нелогично для приложения, когда я переключаю между вкладками. Спасибо. – Mulgard

Вид с вами :-) Привет. – LeftyX

@Mulgard: Обновлен мой ответ с дополнительной информацией. Также обновляется Codepen. – LeftyX

В кодефее нет скрипта для маршрутизации, и вкладки не будут работать без него. Документы ионных вкладок могут вводить в заблуждение, поскольку он отображает только часть html.

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

ionic start myApp tabs

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

Или вы можете просмотреть исходный код, чтобы узнать, как его реализовать. Исходный код здесь:

https://github.com/driftyco/ionic-starter-tabs

Успехов!

источник

2015-07-21 15:18:09

Не удается получить работу с ионными вкладками

ответ

Смежные вопросы