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 và

• 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: