# Tạo biến thể của template

Dùng chung một thiết kế và tạo các bộ nhãn, màu hoặc nội dung riêng bằng variant.

Khi cùng một thiết kế cần nhiều bộ nhãn, màu hoặc nội dung thay thế, **Variants** giúp bạn giữ chúng trong một template. Bạn có thể dùng chung HTML/CSS và dữ liệu đầu vào, rồi chọn cách trình bày phù hợp cho từng lần chạy.

Ví dụ, một variant có thể đổi các nhãn sang tiếng Việt, trong khi bản gốc vẫn giữ nhãn tiếng Anh. Bạn chỉ chỉnh những giá trị cần khác, các phần còn lại tiếp tục lấy từ bản gốc.

## 1. Hiểu bản gốc và phần kế thừa

**Standard** là variant gốc, được đánh dấu **BASE** trong danh sách. HTML/CSS và cấu trúc chung được chỉnh tại đây.

Variant khác dùng lại những giá trị chưa có thay đổi riêng. Khi bạn sửa một Prop trong variant, giá trị đó được lưu riêng cho variant đang chọn. Một thay đổi tương ứng ở base sau đó không thay thế giá trị riêng này.

Ở variant khác base, các tab chỉnh sửa có thể chỉ còn Props. Chuyển về Standard khi cần sửa HTML/CSS hoặc cấu hình cấu trúc chung.

<figure class="doc-sim data-assets-illustration" aria-label="Standard giữ bản gốc · Variant dùng lại và thay các phần cần thiết">
<div class="sim-stage"><div class="ds-variants sim-panel"><div class="ds-head"><strong>VARIANTS</strong><span class="sim-control">＋</span></div><div class="ds-variant-row sim-focus"><b>Standard</b><span class="sim-badge">BASE</span></div><div class="ds-variant-row"><b>VI</b><small>Kế thừa + giá trị riêng</small></div></div></div>
<figcaption>Standard giữ bản gốc · Variant dùng lại và thay các phần cần thiết</figcaption>
</figure>

## 2. Thêm hoặc sao chép variant

Mở **Variants** và bấm **＋**. Khi mẫu mới chỉ có Standard, app tạo variant từ bản gốc. Khi đã có nhiều variant, menu cho phép chọn:

- **From Standard**: bắt đầu từ bản gốc, chưa có bộ giá trị ghi đè riêng.
- **Duplicate**: sao chép variant đang chọn, giữ các thay đổi riêng của nó.

Dùng nút sửa tên hoặc bấm đúp vào tên variant để đổi tên. Chọn tên dễ nhận biết như `VI`, `EN` hoặc tên bộ thiết kế. Tên cần khác các variant còn lại trong cùng mẫu.

<figure class="doc-sim data-assets-illustration" aria-label="Variants → ＋ → From Standard / Duplicate">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>VARIANTS</strong><span class="sim-control sim-focus">＋</span></div><div class="ds-rows"><div><span>From Standard</span><small>Bắt đầu từ bản gốc</small></div><div><span>Duplicate VI</span><small>Giữ các thay đổi của VI</small></div></div></div></div>
<figcaption>Variants → ＋ → From Standard / Duplicate</figcaption>
</figure>

## 3. Chỉnh phần khác biệt

Chọn variant muốn sửa, rồi chọn section trong **Structure → Props**. Đổi nhãn, màu hoặc prop cần dùng riêng cho variant đó.

Các nút hiển thị trong Structure cũng cho phép ẩn page hoặc section ở variant đang chọn. Nhờ vậy, bạn có thể giữ cùng mẫu nhưng bỏ một phần nội dung ở một biến thể.

Dữ liệu như người nhận hoặc danh sách các mục vẫn nằm trong **Parameters**. Variant chọn bộ giá trị của mẫu; Parameters cung cấp nội dung cho lần chạy.

<figure class="doc-sim data-assets-illustration" aria-label="Đổi Prop khi đang chọn variant để lưu giá trị riêng">
<div class="sim-stage"><div class="ds-variant-picker"><span class="sim-control">Standard</span><span class="sim-control sim-focus">VI</span></div><div class="sim-prop-card ds-field"><div class="sim-prop-name"><b>heading</b><span class="ds-type">Text <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="sim-prop-value"><small class="sim-label">VALUE</small><span class="sim-input sim-focus">Tài liệu</span><span class="sim-embed">{{ props.heading }}</span></div></div><div class="ds-compare-values"><span>Standard: Document</span><span>VI: Tài liệu</span></div></div>
<figcaption>Đổi Prop khi đang chọn variant để lưu giá trị riêng</figcaption>
</figure>

## 4. Dùng variant khi tạo PDF

Trong **Run**, chọn version rồi chọn đúng tên ở **Variant**. Cùng một object dữ liệu có thể dùng với các variant khác nhau nếu chúng dùng chung các trường đầu vào.

Khi gọi qua API, giá trị `variant` là **tên variant**, không phải tên version hay slug của template. Nếu đang chuẩn bị request, xem [Render API reference](/docs/vi/developers/render-reference/).

Khi sửa một giá trị ở base, các variant đang kế thừa giá trị đó cũng nhận thay đổi. Những giá trị đã sửa riêng vẫn được giữ.

<figure class="doc-sim data-assets-illustration" aria-label="Run → chọn tên variant cho lần tạo PDF">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>RUN</strong></div><div class="ds-run-fields"><div><small>VERSION</small><span class="sim-input">v1</span></div><div><small>VARIANT</small><span class="sim-input sim-focus">VI <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div></div><div class="ds-code"><code>{ "recipient": "Tembuilder" }</code></div><div class="sim-form-footer ds-pad"><span class="sim-control sim-dark">Render</span></div></div></div>
<figcaption>Run → chọn tên variant cho lần tạo PDF</figcaption>
</figure>
