Tương tác

Cho phép người dùng thực hiện một hành động nào đó khi nhấn vào. Button có thể được sử dụng để điều hướng đến các trang khác (trang của DynamicAction hoặc trang tại Mini App) tuỳ thuộc vào cấu hình.

Ví dụ: Form đăng ký tham gia chuỗi học tiếng anh, ngay tại trang 1: Trang giới thiệu, tạo một nút button để dẫn đến trang đăng ký

Cài đặt thông số

• [1] Width: Chiều rộng của nút Button. Đơn vị: % (phần trăm) so với bề rộng của điện thoại

• [2] Height: Chiều cao của nút Button. Đơn vị: pixel

• [3] Padding: Khoảng cách của nội dung trong Button so với lề Button

Khoảng cách giữa nội dung trong Button so với lề Button khi padding là 10 pixel

Khoảng cách giữa nội dung trong Button so với lề Button khi padding là 30 pixel

• [4] Radius: bo tròn góc Có hai cách điều chỉnh:

  • Cách 1 : Điều chỉnh cùng lúc 4 phía của Button

  • Cách 2 : Điều chỉnh lần lượt từng phía của Button: Trên (Top); dưới (Bottom); trái (Left); phải (Right). Đơn vị: pixel

• Liên kết: Tương tự như Action, Button cũng có liên kết đến để dẫn đến trang DynamicAction hoặc trang Mini App theo cấu hình.

• Style: Chọn một trong hai dạng nền cho Button: Màu nền (chọn màu từ thư viện) và nền hình ảnh (tải ảnh từ máy).

Các thông số tùy chỉnh nền ảnh cho Button:

• [5] Background-positon: vị trí trên hình được chọn làm nền Button

• [6] Background-size: kích cỡ của hình + Contain: phóng to thu nhỏ hình theo tỉ lệ để lấp đầy chiều cao hoặc chiều dài của khung chứa (container). Không cắt và kéo giãn hình + Cover: phóng to thu nhỏ hình theo tỉ lệ để lấp đầy cả chiều cao và chiều dài của khung chứa (container), không để lại khoảng trống. Cắt phần hình dư thừa, không kéo giãn hình + Auto: Giữ nguyên kích thước gốc

• [7] Background-repeat: Lặp lại hình (khi kích thước chiều ngang, hay chiều rộng không đủ để làm nền cho Button) + Repeat: Tự động nhận biết chiều còn thiếu để lặp lại hình theo chiều đó + Repeat X: Lặp lại theo chiều ngang + Repeat Y: Lặp lại theo chiều dọc + No Repeat: Không lặp lại

• Ví dụ: Với hình trên, Button có hình nền là logo CNV, được điều chỉnh: + Background-position => Left center: Logo đầu tiên bên trái được nằm trọn vẹn trong Button + Background-size => Contain: Hình được phóng to/thu nhỏ để lấp đầy chiều cao của Button + Background-repeat => Repeat X: Hình được lặp lại theo chiều dài (chiều ngang) để đủ làm nền cho button

• Hiển thị: Mỗi Button sẽ có thể có tối đa 3 thành phần. Có 3 loại thành phần là: text, icon và hình ảnh