---
title: "Tabs"
description: "Thêm điều hướng tab để chuyển đổi các bảng nội dung trong một flow."
---

**Tabs** chia một phần màn hình thành các bảng nội dung có thể chuyển đổi — người dùng nhấn vào tiêu đề tab và bảng bên dưới cập nhật tương ứng.

{/* TODO: on-device GIF */}

## Thêm, xóa và chọn tab \{#add-remove-and-select-tabs\}

Mỗi tab gồm hai phần

- **Tab header** — nhãn có thể nhấn (Tab 1, Tab 2, v.v.).
- **Tab content** — một container cho mỗi tab. Bất cứ thứ gì bạn đặt trong container nội dung sẽ hiển thị khi tab đó được chọn.

Nhấn **Add tab** để thêm tab mới. Mỗi tab mới sẽ có một container nội dung tương ứng.

Để đặt một tab cụ thể là active khi màn hình xuất hiện lần đầu, bật **Selected by default**.

## Tùy chỉnh giao diện tab \{#style-the-tabs\}

### Templates \{#templates\}

Flow Builder cung cấp ba template tab có sẵn:

- **Segment control** — bộ chuyển đổi hình viên thuốc với góc bo tròn quanh tab đang được chọn.
- **Button Tabs** — các tab được tạo kiểu như nút bấm riêng biệt.
- **Underline** — nhãn văn bản có gạch chân đánh dấu tab đang được chọn.

### Trạng thái tab \{#tab-states\}

Mỗi tab riêng lẻ có bộ chuyển đổi trạng thái (**Default / Selected**) để tùy chỉnh trạng thái đang active và không active riêng biệt — kiểu chữ, màu sắc, nền và viền theo từng trạng thái.

## Selectable group \{#selectable-group\}

Tabs là một **selectable group chọn một** — đúng một tab được active tại một thời điểm. Quản lý nhóm từ bảng **Screen settings**, trong mục [Selectable groups](paywall-layout-and-products#selectable-groups).

Nhóm cung cấp hai biến:

- `tabs.selectedOptionId` — ID của tab đang được chọn. Dùng trong các điều kiện.
- `tabs.selectedOptionTitle` — nhãn của tab đang được chọn. Dùng trong văn bản động.

Thay `tabs` bằng **Group ID** tùy chỉnh của bạn nếu bạn đã đổi tên nhóm.

Xem [Selectable elements and groups](flow-selectable-elements) để có cái nhìn toàn diện hơn.