# Hiển thị và tương tác

## 1. Mục tiêu

Giúp người thiết kế kiểm soát cách các thành phần hiển thị khi vượt quá kích thước khung và cách người dùng cảm nhận về tương tác thông qua con trỏ chuột. Mục tiêu chính là đảm bảo giao diện luôn gọn gàng, chuyên nghiệp và cung cấp các chỉ dẫn trực quan không lời cho người dùng.

## 2. Khi nào dùng

Bạn nên điều chỉnh bộ đôi thiết lập này trong các trường hợp sau:

* Overflow (X/Y): Sử dụng khi bạn có một khối nội dung (như danh sách hoặc đoạn mã) dài hơn diện tích khung cho phép trên trang.

<figure><img src="/files/8OhXrh7ET2iXnbDJPyFo" alt=""><figcaption></figcaption></figure>

* Visible: Khi muốn nội dung hiển thị tự do, không bị giới hạn.
* Hidden: Khi muốn cắt bỏ phần thừa để giữ cho bố cục trang luôn sạch sẽ, không bị tràn khung.
* Scroll: Khi muốn tạo một vùng cuộn nhỏ bên trong trang (như một bảng điều khoản dịch vụ).
* Cursor (Con trỏ chuột): Sử dụng để thông báo cho người dùng biết họ có thể thực hiện hành động gì tại vị trí đó.
  * Pointer (Hình bàn tay): Luôn sử dụng cho các nút bấm, biểu tượng mạng xã hội hoặc các link liên kết.
  * Move: Dùng cho các thành phần có tính năng kéo thả hoặc thay đổi vị trí.
  * Not Allowed (Biểu tượng cấm): Dùng để báo hiệu một tính năng đang bị khóa hoặc nút bấm chưa thể click.

## 3. Các bước thực hiện

Để thiết lập các thuộc tính này, bạn thực hiện theo trình tự sau:

* Bước 1: Chọn thành phần hoặc khung nội dung cần tùy chỉnh trên màn hình builder.
* Bước 2: Tại bảng thuộc tính bên phải, tìm đến mục Advanced hoặc mục thiết lập tương ứng:
* Bước 3: Tại mục Overflow, chọn một trong các chế độ: *Visible*, *Hidden*, hoặc *Scroll*.
* Bước 4: Tại mục Cursor, chọn kiểu con trỏ mong muốn từ danh sách đổ xuống (*Pointer, Move, Not Allowed*...).
* Bước 5: Lưu thay đổi và di chuột thử vào thành phần ở chế độ Xem trước để kiểm tra trải nghiệm thực tế.

## 4. Lưu ý

* Sự gọn gàng: Chế độ Hidden là "vũ khí" bí mật để đảm bảo Landing Page không bị lỗi vỡ khung khi nội dung văn bản hoặc hình ảnh vô tình lớn hơn diện tích thiết kế.
* Chỉ dẫn người dùng: Luôn ưu tiên dùng Pointer cho tất cả các phần tử có thể click được. Nếu người dùng di chuột vào một nút mà con trỏ không đổi hình dạng, họ sẽ nghĩ rằng trang web đang bị lỗi.
* Trục X và Y: Hãy nhớ rằng bạn có thể thiết lập riêng biệt cho chiều ngang (X) và chiều dọc (Y). Ví dụ: cho phép cuộn dọc nhưng cắt bỏ phần tràn ngang.
* Trải nghiệm di động: Lưu ý rằng hiệu ứng Cursor chỉ xuất hiện trên máy tính (dùng chuột). Trên điện thoại, bạn cần tập trung vào việc căn chỉnh khoảng cách và kích thước nút để người dùng dễ dàng chạm.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mhiring.vn/mcms/thiet-ke-van-ban/dinh-dang-van-ban/hien-thi-va-tuong-tac.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.