Список подзаголовков в sidemenu с использованием Ionic Framework

Question

Я новичок в Ionic Framework. У меня проблема. Мне нужен подзаголовок со списком двух гиперссылок в одном боковом меню вот так.

Мой код:

<ion-header-bar class="bar-header"> 
      <h5 class="align-left"> Hello, Niranth Reddy </h5> 
      <h5 class="align-right"> <a href="" ng-click="signOut()"> 
      Sign Out </a> </h5>                   
     </ion-header-bar> 
    <ion-header-bar class="bar bar-subheader item-input-inset"> 
     <ion-item class="item-input-wrapper"> 
      <ul> 
      <li>My Profile</li> 
      <li>My Orders</li> 
      </ul> 
     </ion-item> 
    </ion-header-bar> 
    <ion-content> 
     <ion-list class="sideNav"> 
      <ion-item menu-toggle 
       ng-repeat="item in items track by $index" 
       class="side-menu item" 
        ng-click="getSelcected(item)" 
        href="#/sidemenu//{{item.name}}"> 
         <div class="row"> 
          <i class="{{item.link.icon}} featureIcon"></i> 
          <h4 class="col">{{item.properties.menuname}}</h4> 
         </div> 
        </ion-item> 
      </ion-list> 
     </ion-content> 

Bu результат я получаю как:

цвет фона не имеет значения. Но я специально ищу такой дизайн.

Любые помощь ребята ??

Answer 1

Я думаю, что вам необходимо внести изменения в свой код следующим образом.

Заменить следующий код в HTML

<ion-item class="item-input-wrapper"> 
    <ul> 
    <li>My Profile</li> 
    <li>My Orders</li> 
    </ul> 
</ion-item> 

с,

<ion-list> 
    <ion-item>My Profile</ion-item> 
    <ion-item>My Orders</ion-item> 
</ion-list> 

или

<div class="list"> 
    <ion-item>My Profile</ion-item> 
    <ion-item>My Orders</ion-item> 
</div> 

второй будет эффективным.