Ionic - Tiêu đề

Các Ionic header barnằm trên đầu màn hình. Nó có thể chứa tiêu đề, biểu tượng, nút hoặc một số yếu tố khác trên đó. Có các lớp tiêu đề được xác định trước mà bạn có thể sử dụng. Bạn có thể kiểm tra tất cả trong hướng dẫn này.

Thêm tiêu đề

Lớp chính cho tất cả các thanh bạn có thể sử dụng trong ứng dụng của mình là bar. Lớp này sẽ luôn được áp dụng cho tất cả các thanh trong ứng dụng của bạn. Tất cảbar subclasses sẽ sử dụng tiền tố - bar.

Nếu bạn muốn tạo tiêu đề, bạn cần thêm bar-header sau khi chính của bạn barlớp học. Mở của bạnwww/index.html tệp và thêm lớp tiêu đề bên trong bodynhãn. Chúng tôi đang thêm một tiêu đề vàoindex.html body bởi vì chúng tôi muốn nó có sẵn trên mọi màn hình trong ứng dụng.

Từ bar-header lớp đã áp dụng kiểu mặc định (màu trắng), chúng tôi sẽ thêm tiêu đề lên trên lớp đó, để bạn có thể phân biệt nó với phần còn lại của màn hình.

<div class = "bar bar-header">
   <h1 class = "title">Header</h1>
</div>

Đoạn mã trên sẽ tạo ra màn hình sau:

Màu tiêu đề

Nếu bạn muốn tạo kiểu cho tiêu đề của mình, bạn chỉ cần thêm lớp màu thích hợp vào đó. Khi bạn tạo kiểu cho các phần tử của mình, bạn cần thêm lớp phần tử chính làm tiền tố vào lớp màu của mình. Vì chúng tôi đang tạo kiểu cho thanh tiêu đề, lớp tiền tố sẽ làbar và lớp màu mà chúng tôi muốn sử dụng trong ví dụ này là positive (màu xanh da trời).

<div class = "bar bar-header bar-positive">
   <h1 class = "title">Header</h1>
</div>

Đoạn mã trên sẽ tạo ra màn hình sau:

Bạn có thể sử dụng bất kỳ lớp nào trong số chín lớp sau để tạo màu tùy chọn cho tiêu đề ứng dụng của mình -

Lớp màu Sự miêu tả Kết quả
quầy bar Được sử dụng cho màu trắng  
thanh ổn định Được sử dụng cho màu xám nhạt  
thanh tích cực Được sử dụng cho màu xanh lam  
thanh bình Được sử dụng cho màu xanh lam nhạt  
cân bằng thanh Được sử dụng cho màu xanh lá cây  
thanh năng lượng Được sử dụng cho màu vàng  
thanh quyết đoán Được sử dụng cho màu đỏ  
bar-hoàng gia Được sử dụng cho màu tím  
thanh-tối Được sử dụng cho màu đen  

Phần tử tiêu đề

Chúng ta có thể thêm các yếu tố khác bên trong tiêu đề. Đoạn mã sau là một ví dụ để thêmmenu nút và một homebên trong tiêu đề. Chúng tôi cũng sẽ thêm các biểu tượng trên đầu các nút tiêu đề của chúng tôi.

<div class = "bar bar-header bar-positive">
   <button class = "button icon ion-navicon"></button>
   <h1 class = "title">Header Buttons</h1>
   <button class = "button icon ion-home"></button>
</div>

Đoạn mã trên sẽ tạo ra màn hình sau:

Tiêu đề phụ

Bạn có thể tạo một tiêu đề phụ nằm ngay bên dưới thanh tiêu đề. Ví dụ sau sẽ chỉ ra cách thêm tiêu đề và tiêu đề phụ vào ứng dụng của bạn. Ở đây, chúng tôi đã tạo kiểu cho tiêu đề phụ bằng một lớp màu "quyết đoán" (đỏ).

<div class = "bar bar-header bar-positive">
   <button class = "button icon ion-navicon"></button>
   <h1 class = "title">Header Buttons</h1>
   <button class = "button icon ion-home"></button>
</div>

<div class = "bar bar-subheader bar-assertive">
   <h2 class = "title">Sub Header</h2>
</div>

Đoạn mã trên sẽ tạo ra màn hình sau:

Khi lộ trình của bạn được thay đổi thành bất kỳ màn hình ứng dụng nào, bạn sẽ nhận thấy rằng tiêu đề và tiêu đề phụ đang bao gồm một số nội dung như được hiển thị trong ảnh chụp màn hình bên dưới.

Để khắc phục điều này, bạn cần thêm một ‘has-header’ hoặc một ‘has-subheader’ lớp học ion-contentcác thẻ màn hình của bạn. Mở một trong các tệp HTML của bạn từwww/templates và thêm has-subheader lớp học ion-content. Nếu bạn chỉ sử dụng tiêu đề trong ứng dụng của mình, bạn sẽ cần thêmhas-header lớp học thay thế.

<ion-content class = "padding has-subheader">

Đoạn mã trên sẽ tạo ra màn hình sau: