모바일 Angular UI-구성 요소

이 장에서는 모바일 각도 UI의 중요한 구성 요소를 이해합니다. 그들은 다음과 같습니다-

Navbars
Sidebars
Modals
Overlays

Navbars

Navbar는 장치 화면의 상단 및 하단 부분을 사용합니다. 상단 탐색 모음을 사용하여 메뉴 항목 또는 헤더 섹션을 표시 할 수 있습니다. 하단 탐색 모음을 사용하여 바닥 글 섹션을 표시 할 수 있습니다.

화면에 navbar의 간단한 표시는 다음과 같습니다.

Navbar는 고정 방식과 오버플로 방식의 두 가지 방식으로 표시 될 수 있습니다.

중요한 CSS 클래스

Mobile Angular UI에서 navbar를 표시하려면 navbar, .navbar-app 과 같은 CSS 클래스를 사용해야 합니다 .

Top / Bottom Overflow 접근 방식에 대한 클래스

상단 navbar의 경우 CSS 클래스 -.navbar-absolute-top .

하단 navbar의 경우 CSS 클래스 -.navbar-absolute-bottom .

Top / Bottom 고정 접근 클래스

상단 navbar의 경우 CSS 클래스 -.navbar-fixed-top .

하단 navbar의 경우 css 클래스 -.navbar-fixed-bottom .

UI의 Overflow Navbar에서 작업 해 보겠습니다.

다음은 동일한 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의 작동을 살펴 보았습니다. 이제 왼쪽과 오른쪽에있는 navbar 항목을 사용하여 사이드 바를 엽니 다.

사이드 바는 왼쪽 또는 오른쪽에 배치 할 수 있습니다.

중요한 CSS 클래스

left sidebar − sidebar sidebar-left에 대한 CSS 클래스 .

오른쪽 sidebar − sidebar sidebar-right에 대한 CSS 클래스 .

사이드 바의 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>

브라우저의 사이드 바 표시는 다음과 같습니다.

튜토리얼을 클릭하면 아래와 같이 왼쪽 사이드 바 메뉴가 나타납니다.

Ebooks를 클릭하면 아래와 같이 오른쪽 메뉴가 나타납니다.

모달 및 오버레이

모달 및 오버레이는 화면에 팝업 유형 창을 표시합니다. 오버레이는 컨테이너가 표시되는 방식 만 모달과 다릅니다.

당신은 사용해야합니다 ngIf/uiIf 또는 ngHide/uiHide uiState와 함께 오버레이 또는 모달을 활성화 / 해제합니다.

모달의 CSS는 .modal, 오버레이의 경우 .modal-overlay.

모달 및 오버레이를 표시하려면 index.html 내에 다음 div 컨테이너를 추가하세요.

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

이전에 수행 한 navbar 바닥 글에 모달을 지정하겠습니다.

여기서 ABOUT US는 모달 역할을하고 CONTACT US는 오버레이 역할을합니다.

ABOUT US 및 CONTACT US 링크에 다음 변경 사항을 추가하십시오.

<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를 클릭하면 아래와 같이 모달이 표시됩니다.