Ionic - Chân trang

Ionic footerđược đặt ở cuối màn hình ứng dụng. Làm việc với footer gần giống như làm việc với headers.

Thêm chân trang

Lớp chính cho chân trang Ionic là bar(giống như tiêu đề). Khi bạn muốn thêm chân trang vào màn hình của mình, bạn cần thêmbar-footer lớp cho phần tử của bạn sau phần tử chính barlớp học. Vì chúng tôi muốn sử dụng footer của mình trên mọi màn hình trong ứng dụng, chúng tôi sẽ thêm nó vàobody sau đó index.htmltập tin. Chúng tôi cũng sẽ thêm tiêu đề cho chân trang của chúng tôi.

<div class = "bar bar-footer">
   <h1 class = "title">Footer</h1>
</div>

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

Màu chân trang

Nếu bạn muốn tạo kiểu cho footer 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ố cho lớp màu của mình. Vì chúng ta đang tạo kiểu cho thanh chân trang, 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à assertive (màu đỏ).

<div class = "bar bar-footer bar-assertive">
   <h1 class = "title">Footer</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 chân trang ứ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  

Yếu tố chân trang

Chân trang có thể chứa các phần tử bên trong nó. Hầu hết thời gian bạn sẽ cần thêm các nút có biểu tượng bên trong footer.

Nút đầu tiên được thêm sẽ luôn ở góc trái. Cái cuối cùng sẽ được đặt ở bên phải. Các nút ở giữa sẽ được nhóm lại bên cạnh nút đầu tiên ở bên trái chân trang của bạn. Trong ví dụ sau, bạn cũng có thể nhận thấy rằng chúng tôi sử dụngicon lớp để thêm các biểu tượng trên đầu các nút.

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon"></button>
   <button class = "button icon ion-home"></button>
   <button class = "button icon ion-star"></button>
   <button class = "button icon ion-checkmark-round"></button>
</div>

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

Nếu bạn muốn di chuyển nút của mình sang bên phải, bạn có thể thêm pull-right lớp học.

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon pull-right"></button>
</div>

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