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: