Как разместить подзаголовок внутри бокового меню?

Question

Как разместить подзаголовок внутри бокового меню?

0

Мы работаем над приложением, которое использует ngCordova и хочет реализовать боковое меню. Боковое меню реализовано, как показано ниже.

После добавления подзаголовка меню выглядит следующим образом:

Это наш код для бокового меню:

<ion-view title="Home" ng-app="app.controllers"  >
    <ion-header-bar class="bar bar-subheader bar-positive">
        <h1 class="title">Subheader</h1>
    </ion-header-bar>
    <ion-side-menus ng-controller="homeCtrl">

        <ion-side-menu-content>
            <ion-nav-bar class="bar-stable nav-title-slide-ios7">
                <ion-nav-buttons side="left">
                    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                    </button>
                </ion-nav-buttons>               
            </ion-nav-bar>
            <ion-nav-view name="menuContent"></ion-nav-view>
        </ion-side-menu-content>


        <ion-side-menu side="left" >

            <ion-header-bar class="bar-stable bar-dark">
                <h1 class="title">Category</h1>
            </ion-header-bar>

            <ion-list class="dark">
                <ion-item nav-clear menu-close href="" class="item item-icon-left" >
                    <i class="icon ion-ios7-ionic-outline ion-ios-home-outline"></i><span style="color:#666">Home</span>
                </ion-item>

                <ion-item nav-clear menu-close href="#/tab/home" class="item item-icon-left" >
                    <i class="icon ion-ios7-help ion-ios-home-outline"></i><span style="color:#666">Home</span>
                </ion-item>

                <ion-item nav-clear menu-close href="" class="item item-icon-left" >
                    <i class="icon ion-ios7-help ion-ios-paw-outline"></i><span style="color:#666">Dogs</span>
                </ion-item>

                <ion-item nav-clear menu-close href="" class="item item-icon-left" >
                    <i class="icon ion-ios7-help ion-ios-cog-outline"></i><span style="color:#666">Profile Settings</span>
                </ion-item>

                <ion-item nav-clear menu-close href="" class="item item-icon-left" >
                    <i class="icon ion-ios7-help ion-ios-checkmark-outline"></i><span style="color:#666">History Orders</span>
                </ion-item>
            </ion-list>
        </ion-side-menu>
    </ion-side-menus>
</ion-view>

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

Naresh Koppera 31 март 2016, в 08:31

Источник

Теги:

ionic-framework

angularjs

cordova

1 ответ

Ещё вопросы

Dexter · Answer 1 · 2016-03-31T15-47-00.000Z

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

<ion-header-bar class="bar bar-subheader bar-positive">
  <h1 class="title">Subheader</h1>
</ion-header-bar>

На <ion-side-menu side="left>:

<ion-side-menu side="left">
  <ion-header-bar class="bar-stable bar-dark">
    <h1 class="title">Category</h1>
  </ion-header-bar>

  <ion-header-bar class="bar bar-subheader bar-positive">
    <h1 class="title">Subheader</h1>
  </ion-header-bar>