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:
