イオンフレームワークにサイドメニューを追加

Question

私はイオン性が新しいです。私は、既存の角度アプリをイオンフレームワークを使ってモバイルアプリに変換しています。しかし、私はこれにサイドメニューを追加することはできません。それ、どうやったら出来るの。私は右のボタンをクリックすると、サイドメニューを表示したい

<div class="wrap"> 
    <div class="header"> 
     <div class="pull-right"> 
      <a href="#" class="handle"><i class="fa fa-bars"> 
       </i></a> 
     </div> 

     <div class="text-center"> 
      <h1>SKY</h1> 
     </div> 


    </div> 
    <div class="items-list"> 
     <div class="item"> 
      <div class="clearfix"> 
       <div class="item-thumb-container"> 
        <img src="images/item-1.jpg" class="item-thumb img-responsive"> 
       </div> 
       <div class="item-details-container"> 
        <h2 class="item-title">Item Name</h2> 
        <div class="item-description"> 
         <p>Lorem ipsum dolor sit amet, sit qualibo beloi refashi ispuias.</p> 
        </div> 
        <div class="item-meta"> 
         <a href="#" ui-sref="single" class="item-btn">See</A> 
         <span class="qty">10 <i class="fa fa-glass" aria-hidden="true"></i></span> 
         <span class="price">9 SAR <span class="round"><i class="fa fa-dollar" aria-hidden="true"></i></span></span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="item item-img-right"> 
      <a href="#" ui-sref="single"> 
       <div class="clearfix"> 
        <div class="item-details-container"> 
         <h2 class="item-title">Item Name</h2> 
         <div class="item-description"> 
          <p>Lorem ipsum dolor sit amet, sit qualibo beloi refashi ispuias.</p> 
         </div> 
         <div class="item-meta"> 
          <span class="item-btn">See</span> 
          <span class="qty">10 <i class="fa fa-glass" aria-hidden="true"></i></span> 
          <span class="price">9 SAR <span class="round"><i class="fa fa-dollar" aria-hidden="true"></i></span></span> 
         </div> 
        </div> 
        <div class="item-thumb-container"> 
         <img src="images/item-1.jpg" class="item-thumb img-responsive"> 
        </div> 
       </div> 
      </a> 
     </div> 
     <div class="item"> 
      <a href="#" ui-sref="single"> 
       <div class="clearfix"> 
        <div class="item-thumb-container"> 
         <img src="images/item-1.jpg" class="item-thumb img-responsive"> 
        </div> 
        <div class="item-details-container"> 
         <h2 class="item-title">Item Name</h2> 
         <div class="item-description"> 
          <p>Lorem ipsum dolor sit amet, sit qualibo beloi refashi ispuias.</p> 
         </div> 
         <div class="item-meta"> 
          <span class="item-btn">See</span> 
          <span class="qty">10 <i class="fa fa-glass" aria-hidden="true"></i></span> 
          <span class="price">9 SAR <span class="round"><i class="fa fa-dollar" aria-hidden="true"></i></span></span> 
         </div> 
        </div> 
       </div> 
      </a> 
     </div> 
    </div> 
</div> 

： はここに私のコードです。私は<ion-sidemenus>を追加しようとしましたが、メニューリスト項目は外に表示されます。

Answer 1

イオンは簡単にコード

<button ion-button menuToggle>Toggle Menu</button> 

の1本の線で実装することができ、このMenuToggleは、公式ドキュメント上MenuToggleについてお読み呼び出します。