# Chọn mẫu từ Gallery

Khám phá các mẫu được Tembuilder thiết kế và chọn lọc, xem trước rồi chọn mẫu cho project của bạn.

**Gallery** là bộ sưu tập các mẫu do đội ngũ Tembuilder thiết kế, xây dựng và chọn lọc cho nhiều mục đích sử dụng khác nhau. Mỗi mẫu mang một cách sắp xếp nội dung và một phong cách trình bày riêng, để bạn có thêm lựa chọn khi bắt đầu một tài liệu mới.

Bạn có thể dạo qua Gallery để tìm cảm hứng, tham khảo cách thiết kế hoặc chọn một mẫu làm nền cho ý tưởng của mình. Từ mẫu có sẵn, bạn được tự do thay đổi nội dung, màu sắc và bố cục để tạo nên thiết kế như mong muốn.

## 1. Khám phá bộ sưu tập

Mở **Gallery** để xem các mẫu hiện có. Mỗi thẻ mẫu có ảnh thu nhỏ, tên và mô tả ngắn, giúp bạn hình dung thiết kế trước khi mở xem chi tiết. Thẻ cũng hiển thị khổ giấy để bạn dễ chọn mẫu phù hợp với tài liệu định làm.

Bạn có thể bắt đầu bằng cách xem qua bộ sưu tập, hoặc thu hẹp lựa chọn khi đã có ý tưởng:

- **Tìm kiếm** theo tên hoặc từ khóa. Chẳng hạn, gõ `invoice` để tìm mẫu hóa đơn.
- **Danh mục** ở bên trái giúp bạn xem các mẫu cùng loại.
- **Popular** đưa các mẫu phổ biến lên trước; **Newest** giúp bạn khám phá những mẫu vừa được thêm vào.

Kết hợp tìm kiếm với danh mục để tìm nhanh hơn. Khi danh sách có nhiều trang, dùng các nút chuyển trang bên dưới để xem thêm.

## 2. Xem kỹ mẫu bạn thích

Bấm vào thẻ mẫu để mở bản xem trước. Bạn sẽ thấy thiết kế ở kích thước lớn hơn, cùng tên, mô tả và khổ giấy của mẫu.

Đây là lúc để xem những chi tiết khó nhận ra từ ảnh nhỏ: cách chia các phần nội dung, khoảng cách giữa các khối, kiểu chữ và cách trình bày bảng. Với mẫu có nhiều ảnh xem trước, bạn có thể dùng mũi tên hoặc chọn ảnh nhỏ bên dưới để xem lần lượt.

Bạn không cần tìm một mẫu khớp hoàn toàn với ý tưởng ban đầu. Một bố cục gần với điều bạn muốn cũng có thể là điểm bắt đầu tốt, vì bạn vẫn có thể chỉnh lại sau khi thêm mẫu vào project.

Chưa tìm được mẫu ưng ý? Đóng phần xem trước để tiếp tục khám phá. Khi muốn dùng mẫu đang xem, bấm **Use template**.

## 3. Đưa mẫu vào project

Để lưu mẫu vào nơi bạn sẽ làm việc, hãy mở **Gallery** từ project muốn dùng. Sau khi bấm **Use template**, hộp **Import** sẽ xuất hiện để bạn đặt tên cho mẫu.

- **Name** là tên hiển thị trong Templates. Bạn có thể đặt theo cách mình dễ nhớ, chẳng hạn **Hóa đơn dịch vụ**.
- **Slug** là tên ngắn để tham chiếu đến mẫu, ví dụ `service-invoice`. Slug cần khác với các mẫu đã có trong cùng project.

Bấm **Import** rồi chờ hoàn tất. Ứng dụng sẽ mở mẫu trong editor; từ đây, bạn đã có một mẫu trong project để tiếp tục làm việc. Mẫu cũng xuất hiện trong **Templates** để bạn dễ tìm lại sau này.

Bạn có thể quay lại Gallery bất cứ khi nào cần một thiết kế mới, dù để tham khảo một cách trình bày khác hay bắt đầu thêm một mẫu cho project.

## Thử chọn một mẫu

Khung dưới đây mô phỏng các bước vừa giới thiệu. Thử tìm `invoice`, mở bản xem trước, chọn **Use template** rồi đặt tên cho mẫu.

<figure class="doc-sim gallery-walkthrough" data-gallery-demo data-locale="vi" aria-label="Thử chọn và thêm mẫu từ Gallery">
<div class="sim-kicker">THỬ CÁC BƯỚC BÊN DƯỚI</div>
<div class="sim-stage">
<div data-gg-screen="browse"><div class="sim-toolbar"><strong>Gallery</strong><span class="sim-badge">1 template</span></div><label class="gg-search"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="10" cy="10" r="6"/><path d="m15 15 5 5"/></svg><input data-gg-search placeholder="Tìm mẫu…" aria-label="Tìm mẫu trong minh họa" /></label><div class="gg-categories"><button type="button" data-gg-category="all" aria-pressed="true">All</button><button type="button" data-gg-category="invoice" aria-pressed="false">Invoice</button></div><button type="button" class="gg-template" data-gg-preview aria-label="Xem trước Monochrome Service Invoice"><div class="gg-thumb"><div class="gg-mini-paper"><b>Tembuilder</b><strong>INVOICE</strong><i></i><i></i><i></i><span>$597.20</span></div></div><div class="gg-template-copy"><strong>Monochrome Service Invoice</strong><small>Invoice · A4</small><span>Xem trước ↗</span></div></button><p class="gg-empty" data-gg-empty hidden>Không có mẫu phù hợp. Thử tìm “invoice”.</p></div>
<div data-gg-screen="preview" hidden><div class="sim-gallery-dialog"><div class="sim-gallery-heading"><div><strong>Monochrome Service Invoice</strong><small>Invoice · A4</small></div><button type="button" class="sim-close" data-gg-back aria-label="Quay lại danh sách mẫu">×</button></div><div class="sim-gallery-preview"><div class="gg-mini-paper gg-preview-paper"><b>Tembuilder</b><strong>INVOICE</strong><small>TB-2026-0042</small><i></i><small>BILL TO</small><b>Tembuilder</b><i></i><i></i><span>$597.20</span></div></div><div class="sim-gallery-footer"><small>Schema v1 · A4</small><button type="button" class="sim-control sim-dark sim-focus" data-gg-use>Use template</button></div></div></div>
<div data-gg-screen="import" hidden><form class="sim-form" data-gg-form><div class="sim-toolbar"><strong>Import template</strong><button type="button" class="sim-close" data-gg-back aria-label="Quay lại Gallery">×</button></div><label>Name<input name="name" data-gg-name value="My invoice" required maxlength="64" /></label><label>Slug<input name="slug" data-gg-slug value="my-invoice" required maxlength="64" pattern="[a-z0-9]+(-[a-z0-9]+)*" /></label><small>Đặt tên dễ nhớ cho mẫu, ví dụ: Hóa đơn dịch vụ.</small><div class="sim-form-footer"><button type="submit" class="sim-control sim-dark sim-focus">Import</button></div></form></div>
<div data-gg-screen="done" hidden><div class="sim-completion"><span aria-hidden="true">✓</span><strong data-gg-result></strong><p>Bạn đã đi hết các bước chọn mẫu. Trong ứng dụng, mẫu vừa thêm sẽ nằm trong Templates.</p><button type="button" class="sim-reset" data-gg-back>Thử lại ↺</button></div></div>
</div><figcaption data-gg-caption aria-live="polite">Bấm vào mẫu để xem trước · Minh họa tương tác</figcaption>
</figure>

Sau khi đã chọn được mẫu, bạn có thể xem [hướng dẫn làm quen với editor](/docs/vi/editor/tour/) để bắt đầu chỉnh sửa.