Ionic - Các nút

Có một số loại nút trong Ionic Framework và các nút này được làm động một cách tinh tế, giúp nâng cao hơn nữa trải nghiệm người dùng khi sử dụng ứng dụng. Lớp chính cho tất cả các loại nút làbutton. Lớp này sẽ luôn được áp dụng cho các nút của chúng ta và chúng ta sẽ sử dụng nó làm tiền tố khi làm việc với các lớp con.

Các nút chặn

Các nút khối sẽ luôn có 100% chiều rộng của vùng chứa mẹ của chúng. Họ cũng sẽ có một lớp đệm nhỏ được áp dụng. Bạn sẽ sử dụngbutton-blocklớp để thêm các nút khối. Nếu bạn muốn loại bỏ phần đệm nhưng vẫn giữ nguyên chiều rộng, bạn có thể sử dụngbutton-full lớp học.

Sau đây là một ví dụ cho thấy cách sử dụng của cả hai lớp:

<button class = "button button-block">
   button-block
</button>

<button class = "button button-full">
   button-full
</button>

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

Kích thước nút

Có hai lớp Ionic để thay đổi kích thước nút -

  • button-small

  • button-large.

Sau đây là một ví dụ để hiển thị cách sử dụng của họ -

<button class = "button button-small">
   button-small
</button>

<button class = "button button-large">
   button-large
</button>

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

Màu nút

Nếu bạn muốn tạo kiểu cho nút 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 tôi đ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 đỏ).

<button class = "button button-assertive">
   button-assertive
</button>

Đ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 các nút ứng dụng của mình -

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

Đường viền nút

Nếu bạn muốn các nút của mình trong suốt, bạn có thể áp dụng button-outlinelớp học. Các nút với lớp này sẽ có đường viền phác thảo và nền trong suốt.

Để xóa đường viền khỏi nút, bạn có thể sử dụng button-clearlớp học. Ví dụ sau đây cho thấy cách sử dụng hai lớp này.

<button class = "button button-assertive button-outline">
   button-outline
</button>

<button class = "button button-assertive button-clear">
   button-clear
</button>

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

Thêm biểu tượng

Khi bạn muốn thêm Biểu tượng vào các nút của mình, cách tốt nhất là sử dụng iconlớp học. Bạn có thể đặt biểu tượng ở một bên của nút bằng cách sử dụngicon-left hoặc là icon-right. Thông thường, bạn sẽ muốn di chuyển biểu tượng của mình sang một bên khi bạn có một số văn bản trên đầu nút như được giải thích bên dưới.

<button class = "button icon ion-home">
</button>

<button class = "button icon icon-left ion-home">
   Home
</button>

<button class = "button icon icon-right ion-home">
   Home
</button>

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

Thanh nút

Nếu bạn muốn nhóm một vài nút với nhau, bạn có thể sử dụng button-barlớp học. Các nút sẽ có kích thước bằng nhau theo mặc định.

<div class = "button-bar">
   <a class = "button button-positive">1</a>
   <a class = "button button-assertive">2</a>
   <a class = "button button-energized">3</a>
   <a class = "button">4</a>
</div>

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