Giao diện người dùng góc di động - Thành phần

Trong chương này, chúng ta sẽ hiểu các thành phần quan trọng trong giao diện người dùng góc cạnh trên thiết bị di động. Chúng như sau:

Navbars
Sidebars
Modals
Overlays

Navbars

Các thanh điều hướng sử dụng phần trên và dưới của màn hình thiết bị. Chúng ta có thể sử dụng thanh điều hướng trên cùng để hiển thị các mục menu hoặc phần tiêu đề. Thanh điều hướng dưới cùng có thể được sử dụng để hiển thị phần chân trang.

Một cách hiển thị đơn giản của thanh điều hướng trên màn hình như sau:

Navbar có thể được hiển thị theo hai cách: cách tiếp cận cố định và cách tiếp cận tràn.

Các lớp CSS quan trọng

Trong Mobile Angular UI để hiển thị thanh điều hướng, bạn phải sử dụng các lớp css - navbar, .navbar-app .

Các lớp cho phương pháp Tiếp cận Tràn Trên / Dưới

Đối với thanh điều hướng trên cùng, lớp css - .navbar-Absol-top .

Đối với thanh điều hướng dưới cùng, lớp css - .navbar-tuyệt đối-bottom .

Các lớp cho phương pháp tiếp cận cố định Trên / Dưới

Đối với thanh điều hướng trên cùng, lớp css - .navbar-fixed-top .

Đối với thanh điều hướng dưới cùng, lớp css - .navbar-fixed-bottom .

Hãy để chúng tôi làm việc trên Thanh điều hướng tràn trên giao diện người dùng.

Sau đây là mã HTML cho cùng một mã:

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>

Đây là cách màn hình trông như thế này -

Sidebars

Các thanh bên chiếm bên trái và bên phải của màn hình. Chúng luôn ẩn và được kích hoạt khi mục được kết nối với bên trái hoặc bên phải được nhấp vào. Đó là cách tốt nhất để tận dụng không gian trên màn hình.

Cho đến nay chúng ta đã thấy sự hoạt động của các thanh điều hướng. Bây giờ chúng ta hãy sử dụng mục điều hướng ở bên trái và bên phải để mở thanh bên.

Bạn có thể đặt thanh bên ở bên trái hoặc bên phải.

Các lớp CSS quan trọng

Các lớp css cho sidebar bên trái - sidebar sidebar-left .

Các lớp css cho sidebar bên phải - sidebar sidebar-right .

Vùng chứa div cho thanh bên như sau:

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

Tương tác với Sidebars

Để mở và đóng các thanh bên được thêm vào bên trái và bên phải, bạn cần thêm phần sau vào thẻ html sẽ mở các thanh bên.

Ví dụ: để mở thanh bên trái khi nhấp vào một liên kết, bạn có thể thêm những thứ sau:

Thanh bên sử dụng sharedstate uiSidebarLeft và uiSidebarRight để chuyển đổi các mục của thanh bên.

Chúng tôi sẽ sử dụng thanh điều hướng trên cùng mà chúng tôi đã thêm trước đó. Thêm ui-toggle = ”uiSidebarLeft” và ui-toggle = "uiSidebarRight" và cả sidebar-toggle và sidebar-right-toggle của lớp.

<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>

Bây giờ chúng ta hãy thêm một vùng chứa div cho thanh bên trái và thanh bên phải.

Thanh bên trái

<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>

Bạn có thể tận dụng ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarRight'trong mẫu thanh bên của bạn để đóng thanh bên khi được nhấp vào bất kỳ đâu bên trong thanh bên. Thanh bên sẽ bị đóng theo mặc định khi được nhấp vào bất kỳ đâu bên ngoài mẫu thanh bên.

Trong thanh bên trái khi người dùng nhấp vào các liên kết, thanh bên sẽ bị đóng lại như chúng tôi đã thêm ui-turn-off='uiSidebarLeft' sang mẫu thanh bên trái.

quyền bổ sung

<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>

Cách hiển thị thanh bên trong trình duyệt như sau:

Nhấp vào Hướng dẫn để có menu thanh bên trái như hình dưới đây -

Nhấp vào Ebooks để xem menu bên phải như hình dưới đây -

Chế độ và Lớp phủ

Chế độ và Lớp phủ sẽ hiển thị một cửa sổ loại bật lên trên màn hình của bạn. Lớp phủ chỉ khác với phương thức ở cách vùng chứa được hiển thị cho nó.

Bạn cần tận dụng ngIf/uiIf hoặc là ngHide/uiHide cùng với uiState để kích hoạt / loại bỏ lớp phủ hoặc phương thức.

Css cho modal sẽ là .modalvà đối với lớp phủ, nó sẽ là .modal-overlay.

Để hiển thị phương thức và lớp phủ, hãy thêm vùng chứa div sau vào bên trong index.html của bạn.

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

Hãy để chúng tôi gán một phương thức cho chân trang điều hướng mà chúng tôi đã thực hiện trước đó.

Ở đây GIỚI THIỆU CHÚNG TÔI sẽ hoạt động như một phương thức và LIÊN HỆ VỚI CHÚNG TÔI sẽ hoạt động như một lớp phủ.

Thêm các thay đổi sau vào liên kết GIỚI THIỆU CHÚNG TÔI và LIÊN HỆ VỚI CHÚNG TÔI -

<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>

Nếu chúng ta nhấp vào liên kết này, phương thức và lớp phủ sẽ mở ra.

Nội dung cho phương thức và lớp phủ được thêm vào inside src/home/home.html tập tin.

Nội dung chính cho phương thức và lớp phủ phải được bao bọc bên trong vùng chứa div sau:

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

Hãy để chúng tôi thêm nội dung vào chế độ xem phương thức và lớp phủ. Tên chúng tôi đã sử dụng trên các liên kết, tức là,ui-turn-on="aboutus_modal" and ui-turn-on="contactus_overlay", những thứ tương tự được sử dụng bên trong aboutus nội dung phương thức và contactus nội dung lớp phủ.

<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>

Màn hình hiển thị cho phương thức và lớp phủ như sau:

Nhấp vào GIỚI THIỆU VỀ CHÚNG TÔI nó sẽ hiển thị phương thức như hình dưới đây -