Material Design Lite - Tab

Thành phần tab Material Design Lite (MDL) là thành phần giao diện người dùng giúp hiển thị nhiều màn hình trong một không gian một cách độc quyền.

MDL cung cấp các lớp CSS khác nhau để áp dụng các cải tiến hình ảnh và hành vi được xác định trước khác nhau cho các tab. Bảng sau đây đề cập đến các lớp có sẵn và tác dụng của chúng.

Sr.No.	Tên & Mô tả Lớp học
1	mdl-layout Xác định một vùng chứa là một thành phần MDL. Bắt buộc đối với phần tử vùng chứa bên ngoài.
2	mdl-tabs Xác định vùng chứa tab như một thành phần MDL. Bắt buộc trên phần tử div "bên ngoài".
3	mdl-js-tabs Đặt hành vi MDL cơ bản cho vùng chứa tab. Bắt buộc trên phần tử div "bên ngoài".
4	mdl-js-ripple-effect Thêm hiệu ứng nhấp chuột gợn sóng vào các liên kết tab. Không bắt buộc; đi vào phần tử div "bên ngoài".
5	mdl-tabs__tab-bar Xác định vùng chứa dưới dạng thanh liên kết tab MDL. Bắt buộc đối với phần tử div "bên trong" đầu tiên.
6	mdl-tabs__tab Xác định một mỏ neo (liên kết) như một trình kích hoạt tab MDL. Bắt buộc trên tất cả các liên kết trong phần tử div "bên trong" đầu tiên.
7	is-active Xác định một tab là tab hiển thị mặc định. Bắt buộc trên một (và chỉ một) trong số các phần tử div (tab) "bên trong".
số 8	mdl-tabs__panel Xác định vùng chứa dưới dạng nội dung tab. Bắt buộc đối với mỗi phần tử div (tab) "bên trong".

Thí dụ

Ví dụ sau sẽ giúp bạn hiểu việc sử dụng lớp mdl-tab để bố trí nội dung trên các tab khác nhau.

Các lớp MDL đưa ra dưới đây sẽ được sử dụng trong ví dụ này:

mdl-layout - Xác định một div như một thành phần MDL.
mdl-js-layout - Thêm hành vi MDL cơ bản vào div bên ngoài.
mdl-layout--fixed-header - Làm cho tiêu đề luôn hiển thị, ngay cả trong màn hình nhỏ.
mdl-layout__header-row - Xác định vùng chứa dưới dạng hàng tiêu đề MDL.
mdl-layout-title - Xác định bố cục tiêu đề văn bản.
mdl-layout__content - Xác định div là nội dung bố cục MDL.
mdl-tabs - Xác định vùng chứa tab như một thành phần MDL.
mdl-js-tabs - Đặt hành vi MDL cơ bản cho vùng chứa tab.
mdl-tabs__tab-bar - Xác định một vùng chứa dưới dạng thanh liên kết các tab MDL.
mdl-tabs__tab - Xác định một mỏ neo (liên kết) như một trình kích hoạt tab MDL.
is-active - Xác định một tab là tab hiển thị mặc định.
mdl-tabs__panel - Xác định một vùng chứa dưới dạng nội dung tab.

mdl_tabs.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <div class = "mdl-tabs mdl-js-tabs">
               <div class = "mdl-tabs__tab-bar">
                  <a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
                  <a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
                  <a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
               </div>
            
               <div class = "mdl-tabs__panel is-active" id = "tab1-panel">
                  <p>Tab 1 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab2-panel">
                  <p>Tab 2 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab3-panel">
                  <p>Tab 3 Content</p>
               </div>
            </div>
         </main>
      </div>   
   </body>
</html>

Kết quả

Xác minh kết quả.