Thêm nút bấm (Add button)

1

Thêm nút bấm

Tại thanh công cụ phía trên, nhấn vào biểu tượng để thêm một nút bấm vào Report Page.

2

Điều chỉnh kích thước và vị trí

Sau khi nút bấm được thêm vào Report Page, người dùng có thể:

  • Kéo/thả để điều chỉnh vị trí trên trang.

  • Kéo góc dưới bên phải để thay đổi kích thước của nút bấm.

3

Chỉnh sửa và định dạng nút bấm

Tại thanh bên phải, trong tab Visualizations → Style, người dùng có thể cấu hình các thuộc tính sau:

  • Border: Bật/tắt đường viền của khung chứa nút bấm.

  • Label: Nội dung văn bản hiển thị trong nút bấm.

  • Tooltip: Văn bản gợi ý sẽ hiển thị khi người dùng di chuột lên nút.

  • Action: Quy định hành động xảy ra khi người dùng nhấn vào nút. Hai loại Action đang hỗ trợ:

    • Web URL: Mở đường dẫn liên kết khi người dùng nhấn nút, với 2 chế độ:

      • Its tab: Mở liên kết trong tab hiện tại.

      • New tab: Mở liên kết trong tab mới.

    • Bookmark: Mở bookmark của báo cáo đã được thiết lập trước đó

  • Format: Thiết lập định dạng giao diện của nút.

Chi tiết định dạng nút bấm

Người dùng có thể thiết lập định dạng riêng cho từng trạng thái của nút:

  • Default: Trạng thái mặc định khi trang được tải.

  • Hover: Khi người dùng di chuyển chuột lên nút.

  • Press: Khi người dùng nhấn giữ nút.

Với mỗi trạng thái, người dùng có thể tùy chỉnh các thuộc tính sau:

  • Width: Chiều rộng nút (đơn vị px). Mặc định: 80px.

  • Height: Chiều cao nút (đơn vị px). Mặc định: 36px.

  • Font: Font chữ sử dụng. Mặc định: Inter.

  • Font Size: Kích thước chữ (đơn vị px). Mặc định: 14px.

  • Font Style: Kiểu chữ: Normal (thường) hoặc Italic (nghiêng).

  • Font Weight: Độ đậm nét: Normal hoặc Bold.

  • Font Color: Màu chữ. Mặc định: Trắng #FFFFFF.

  • Background: Màu nền nút. Mặc định: Xanh #154DBD.

  • Boder Width: Độ dày viền (px). Mặc định: 0px.

  • Border Radius: Độ bo góc viền (px). Mặc định: 6px.

  • Border Style: Kiểu đường viền: solid (liền), dashed (nét đứt), dotted (nét chấm).

  • Border Color: Màu viền. Mặc định: Xanh #154DBD.

Ví dụ: người dùng có thể định dạng một nút bấm theo các thông tin minh họa bên dưới để tạo ra nút như hình

Last updated

Was this helpful?