モバイルAngularUI-コンポーネント

この章では、モバイルAngularUIの重要なコンポーネントについて理解します。それらは次のとおりです-

Navbars
Sidebars
Modals
Overlays

Navbars

Navbarは、デバイス画面の上部と下部を利用します。上部のナビゲーションバーを使用して、メニュー項目またはヘッダーセクションを表示できます。下部のナビゲーションバーを使用して、フッターセクションを表示できます。

画面上のナビゲーションバーの簡単な表示は次のとおりです-

Navbarは、固定アプローチとオーバーフローアプローチの2つの方法で表示できます。

重要なCSSクラス

モバイルAngularUIでnavbarを表示するには、cssクラスを使用する必要があります-navbar、.navbar-app。

トップ/ボトムオーバーフローアプローチのクラス

トップナビゲーションバーの場合、cssクラス-.navbar-absolute-top。

下部のナビゲーションバーの場合、cssクラス-.navbar-absolute-bottom。

トップ/ボトム固定アプローチのクラス

トップナビゲーションバーの場合、cssクラス-.navbar-fixed-top。

下部のナビゲーションバーの場合、cssクラス-.navbar-fixed-bottom。

UIのオーバーフローナビゲーションバーで作業してみましょう。

以下は同じのHTMLコードです-

Navbar-Top

<div class="navbar navbar-app navbar-absolute-top">
   <div class="btn-group pull-left">
      <div class="btn">
         <i class="fa fa-th-large "></i> Library
      </div>
   </div>
   <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
      TutorialsPoint
   </div>
   <div class="btn-group pull-right" ui-yield-to="navbarAction">
      <div class="btn">
         <i class="fal fa-search"></i> eBooks
      </div>
   </div>
</div>

Navbar-Bottom

<div class="navbar navbar-app navbar-absolute-bottom">
   <div class="btn-group justified">
      <a href="https://www.tutorialspoint.com/about/index.htm" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
      <a href="https://www.tutorialspoint.com/about/contact_us.htm" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
   </div>
</div>

表示はこんな感じです−

サイドバー

サイドバーは画面の左側と右側を占めます。左側または右側に接続されているアイテムをクリックすると、常に非表示になり、アクティブになります。画面上のスペースを活用するのに最適な方法です。

これまで、navbarの動作を見てきました。次に、左側と右側のナビゲーションバーアイテムを使用してサイドバーを開きます。

サイドバーは左側または右側に配置できます。

重要なCSSクラス

左側のサイドバーのcssクラス-サイドバーのサイドバー-左。

右側のサイドバーのcssクラス-サイドバーのサイドバー-right。

サイドバーのdivコンテナは次のとおりです-

<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>

サイドバーとの相互作用

左側と右側に追加されたサイドバーを開いたり閉じたりするには、サイドバーを開くhtmlタグに以下を追加する必要があります。

たとえば、リンクをクリックして左側のサイドバーを開くには、次を追加できます-

サイドバーは、共有状態のuiSidebarLeftとuiSidebarRightを使用して、サイドバーの項目を切り替えます。

以前に追加したトップナビゲーションバーを利用します。ui-toggle =” uiSidebarLeft”とui-toggle = "uiSidebarRight"を追加し、クラスsidebar-toggleとsidebar-right-toggleも追加します。

<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle"><i class="fa fa-th-large "></i> Library</div>

<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle"><i class="fal fa-search"></i> Search</div>

次に、左側のサイドバーと右側のサイドバーにdivコンテナを追加しましょう。

左側のサイドバー

<div class="sidebar sidebar-left">
   <div class="scrollable">
      <h1 class="scrollable-header app-name">Tutorials</h1>
      <div class="scrollable-content">
         <div class="list-group" ui-turn-off='uiSidebarLeft'>
            <a class="list-group-item" href="/">Home Page </a>
            <a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
            <a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
            <a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
            <a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
            <a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
            <a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
         </div>
      </div>
   </div>
</div>

あなたは利用することができます ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarRight'サイドバーテンプレートで、サイドバー内の任意の場所をクリックしたときにサイドバーを閉じます。サイドバーテンプレートの外側をクリックすると、サイドバーはデフォルトで閉じられます。

ユーザーがリンクをクリックすると左側のサイドバーで、追加したようにサイドバーが閉じます ui-turn-off='uiSidebarLeft' 左側のサイドバーテンプレートに。

右側のサイドバー

<div class="sidebar sidebar-right">
   <div class="scrollable">
      <h1 class="scrollable-header app-name">eBooks</h1>
      <div class="scrollable-content">
         <div class="list-group" ui-toggle="uiSidebarRight">
            <a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
            <a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
         </div>
      </div>
   </div>
</div>

ブラウザでのサイドバーの表示は次のとおりです-

以下に示すように、チュートリアルをクリックして左側のサイドバーメニューを表示します-

以下に示すように、電子ブックをクリックして右側のメニューを表示します-

モーダルとオーバーレイ

モーダルとオーバーレイは、画面にポップアップタイプのウィンドウを表示します。オーバーレイは、コンテナの表示方法のみがモーダルと異なります。

あなたは利用する必要があります ngIf/uiIf または ngHide/uiHide uiStateとともに、オーバーレイまたはモーダルをアクティブ化/非表示にします。

モーダルのCSSは .modal、オーバーレイの場合は、 .modal-overlay。

モーダルとオーバーレイを表示するには、index.html内に次のdivコンテナを追加します。

<div ui-yield-to="modals"></div>

以前に行ったナビゲーションバーフッターにモーダルを割り当てましょう。

ここで、ABOUT USはモーダルとして機能し、CONTACTUSはオーバーレイとして機能します。

ABOUTUSおよびCONTACTUSのリンクに次の変更を追加します-

<div class="navbar navbar-app navbar-absolute-bottom">
   <div class="btn-group justified">
      <a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
      <a ui-turn-on="contactus_overlayl" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
   </div>
</div>

このリンクをクリックすると、モーダルとオーバーレイが開きます。

モーダルとオーバーレイのコンテンツが追加されました inside src/home/home.html ファイル。

モーダルとオーバーレイのメインコンテンツは、次のdivコンテナ内にラップする必要があります-

<div ui-content-for="modals">
   <div class="modal"><!-- ... --></div>
</div>

モーダルビューとオーバーレイビューにコンテンツを追加しましょう。リンクで使用した名前、つまりui-turn-on="aboutus_modal" and ui-turn-on="contactus_overlay"、同じものが内部で使用されています aboutus モーダルコンテンツと contactus オーバーレイコンテンツ。

<div ui-content-for="modals">
   <div class="modal" ui-if="aboutus_modal" ui-shared-state="aboutus_modal">
      <div class="modal-backdrop in"></div>
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <button class="close"
                  ui-turn-off="aboutus_modal">×</button>
               <h4 class="modal-title">Modal</h4>
            </div>
            <div class="modal-body">
               <p>Testing Modal</p>
            </div>
            <div class="modal-footer">
               <button ui-turn-off="aboutus_modal" class="btn btn-default">Close</button>
               <button ui-turn-off="aboutus_modal" class="btn btn-primary">Save</button>
            </div>
         </div>
      </div>
   </div>
   <div class="modal modal-overlay" ui-if="contactus_overlay" ui-shared-state="contactus_overlay">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <button class="close"
                  ui-turn-off="contactus_overlay">×</button>
               <h4 class="modal-title">Overlay</h4>
            </div>
            <div class="modal-body">
               <p>Testing Overlay</p>
            </div>
            <div class="modal-footer">
               <button ui-turn-off="contactus_overlay" class="btn btn-default">Close</button>
               <button ui-turn-off="contactus_overlay" class="btn btn-primary">Save</button>
            </div>
         </div>
      </div>
   </div>
</div>

モーダルとオーバーレイの表示は次のとおりです-

ABOUT USをクリックすると、以下のようにモーダルが表示されます-