> For the complete documentation index, see [llms.txt](https://huongdan.cnvcdp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://huongdan.cnvcdp.com/tinh-nang/dynamicaction/thiet-lap-dynamicaction/tieu-de-trang-header.md).

# Tiêu đề trang - Header

Video thiết lập tiêu đề trang

## Vị trí hiển thị

Biểu thị độ rộng của phần đầu trang (Header) được đo từ mép trên cùng của trang. Người dùng có thể tùy chỉnh các kích thước khác nhau của Header để đáp ứng nhu cầu cụ thể, đảm bảo rằng phần đầu trang phù hợp với bố cục tổng thể và thuận tiện cho việc hiển thị thông tin quan trọng. Các tùy chọn này bao gồm các tỷ lệ phần trăm so với độ rộng của màn hình: 10%, 30%, 50%, và 100%. 

<figure><img src="/files/h30X4TT5aMcoMwvtrWch" alt=""><figcaption></figcaption></figure>

## Hành vi cuộn

Hành vi cuộn (scroll behavior) là lựa chọn cách mà Header (phần đầu trang) được hiển thị khi nội dung của mẫu DynamicAction được cuộn lên hoặc xuống. Có hai phương án để người dùng có thể lựa chọn tùy theo nhu cầu của mình:

<figure><img src="/files/kOu90YexJaLBAOHqdRff" alt=""><figcaption></figcaption></figure>

**\[1] Cố định vị trí:** Khi người dùng cuộn trang mẫu lên hoặc xuống, Header sẽ được giữ nguyên vị trí và độ rộng của nó sẽ không thay đổi. Điều này có nghĩa là phần đầu trang sẽ luôn ở vị trí cố định, giúp người dùng dễ dàng xem các thông tin quan trọng ở phần Header mà không cần cuộn lại lên trên.

**\[2] Cuộn theo body:** Trong phương án này, khi trang mẫu được cuộn lên, Header sẽ cuộn theo nội dung chính (Body). Tuy nhiên, đến một độ rộng nhất định, Header sẽ được giữ nguyên và không cuộn nữa. Điều này cho phép Header xuất hiện và biến mất một cách linh hoạt, nhường chỗ cho các nội dung khác được hiển thị lên màn hình.

## Thành phần hiển thị

### Icon điều hướng

Icon điều hướng được thiết lập để cho phép khách hàng từ trang DynamicAction liên kết đến một trang được cấu hình.&#x20;

<figure><img src="/files/VBXKi3RyInPRqhShH2ON" alt=""><figcaption></figcaption></figure>

Có ba loại icon điều hướng:

-<img src="/files/9TzyZx2VS9TjndqdbK6t" alt="" data-size="line">Icon trở về: khi người dùng nhấp vào Icon trở về, sẽ được quay lại trang trước đó của Mini App.&#x20;

Ví dụ: người dùng từ trang chủ Mini App truy cập vào Phiếu góp ý, phiếu góp ý này sẽ mở ra một mẫu DynamicAction. Khi người dùng nhấp vào biểu tượng quay lại tại trang mẫu, màn hình sẽ trở về trang chủ của DynamicAction.

-<img src="/files/yad8greCGnolBSYLC5X6" alt="" data-size="line">Icon home: Icon home cho phép admin thiết lập liên kết đến trang mong muốn. Khi người dùng nhấp vào Icon home, họ sẽ được dẫn đến trang đã được admin cấu hình.

Có hai cách thiết lập liên kết:

\+ Liên kết đến trang của DynamicAction

Ví dụ: Admin có thể thiết lập Icon home để cho phép khách hàng đang từ trang thứ hai của DynamicAction quay trở lại trang trước đó.

\+ Liên kết đến trang của Mini App

Ví dụ: Admin cấu hình liên kết cho Icon home để từ trang cảm ơn sau khi điền form DynamicAction, khách hàng có thể được dẫn đến Trang ưu đãi.

-<img src="/files/D3JcO8RfD5bAejCo4sGF" alt="" data-size="line">Icon trở về và home: là sự kết hợp giữa Icon trở về và Icon home. Hai icon này độc lập với nhau, khách hàng có thể chọn một trong hai tính năng là trở về hoặc home.

### Logo

Logo được đặt ở góc trên bên trái của tiêu đề trang DynamicAction, đóng vai trò quan trọng trong việc tạo điểm nhấn thẩm mỹ và củng cố thương hiệu cho Mini App khi khách truy cập vào trang DynamicAction.&#x20;

<figure><img src="/files/EfrlVSVWoPaYlaQiKqTk" alt=""><figcaption></figcaption></figure>

Admin có thể cài đặt logo bằng cách kích hoạt nút tắt bật để hiển thị logo. Khi nút được kích hoạt bật, admin sẽ được phép chèn hình ảnh để làm logo.

### Tiêu đề

Chỉnh sửa tiêu đề trang DynamicAction đã được thiết lập ở bước khởi tạo DynamicAction.

<figure><img src="/files/Xf8WebZAOkVSPyvWSDxw" alt=""><figcaption></figcaption></figure>

Admin có thể chỉnh sửa tiêu đề bằng cách kích hoạt nút tắt bật tiêu đề. Khi nút được kích hoạt bật, admin sẽ được phép chỉnh sửa tiêu đề.

## Style

Thể hiện màu sắc của phần đầu trang (Header) là một yếu tố quan trọng trong việc thiết kế giao diện của Mini App. Người dùng có ba tùy chọn để tùy chỉnh màu sắc của Header, giúp tạo nên sự đồng bộ và thẩm mỹ cho ứng dụng:

\+ Lấy theo màu chủ đạo từ Mini App: Đây là lựa chọn mặc định, lựa chọn này cho phép Header tự động sử dụng màu sắc chủ đạo của Mini App, tạo ra một giao diện nhất quán và hài hòa với toàn bộ ứng dụng.

<figure><img src="/files/Hkxq5tF6Bp8iUm46qd0P" alt=""><figcaption></figcaption></figure>

\+ Màu sắc tùy chỉnh: Người dùng có thể tự do chọn bất kỳ màu sắc nào để áp dụng cho Header. Tùy chọn này mang lại sự linh hoạt, phù hợp với sở thích cá nhân hoặc yêu cầu cụ thể của từng chiến dịch, sự kiện.

<figure><img src="/files/26GuMWSXDYbtvHusz8Ew" alt=""><figcaption></figcaption></figure>

\+ Hình ảnh: Thay vì chỉ sử dụng màu sắc, người dùng cũng có thể chọn một hình ảnh để làm nền cho Header để mang đến sự sống động và phong phú, thu hút sự chú ý của người dùng. Hình ảnh nền có thể là bất kỳ thứ gì từ logo, hình minh họa, đến những bức ảnh liên quan đến thương hiệu hoặc sản phẩm.

<figure><img src="/files/OkM791dIOLDfbV1ZB0xX" alt=""><figcaption></figcaption></figure>

## Radius

Tùy chỉnh độ bo góc dưới bên trái, phải của Header. Khi chỉ số càng tăng thì góc được bo càng tròn. Người dùng có thể điều chỉnh độ bo góc này để tạo ra các hiệu ứng thẩm mỹ khác nhau, từ những góc nhọn mạnh mẽ đến những đường cong mềm mại, mang lại cảm giác mượt mà và thân thiện hơn.

<figure><img src="/files/VqLk32KZOOuMqBqxwGEX" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://huongdan.cnvcdp.com/tinh-nang/dynamicaction/thiet-lap-dynamicaction/tieu-de-trang-header.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.