Tuỳ chọn của nhóm tab

Trang này tra cứu từng ô chỉnh của nhóm tab. Cách tạo tab từ đầu nằm ở bài Nhóm mục thành tab, thêm banner và card.

Mở các ô này ở đâu?

Ở bước Build Menu, bạn bấm vào một mục loại Tab để mở Edit item. Khối Tab style chứa Tab position (chỉ Desktop Mega Menu), Tab style, Display, Tab column width (chỉ hiện khi Tab position là Left) và Tab color. Ô Tab ID nằm cuối bảng, trong nhóm Nested tab group.

Một nhóm tab là các mục Tab nằm liền nhau ở cùng cấp. Bốn ô Tab style, Display, Tab color và Tab position (cùng Tab column width) chỉ lấy theo tab đầu tiên của nhóm. Mở một tab khác trong nhóm, bạn sẽ thấy dòng “Style is set on the first tab of this group” kèm nút bấm để nhảy sang form của tab đầu.

Các ô này không cần gói trả phí riêng và dùng giống nhau trên Shopify, Wix và website khác.

Kiểu và cách xếp tab

Tab style

• Ở đâu: Edit item của tab đầu tiên trong nhóm, khối Tab style, một dãy bốn ô hình nhỏ.
• Dùng để làm gì: chọn hình dáng của các nút tab cho cả nhóm.
• Lựa chọn: Underline (gạch chân dưới tab đang chọn), Outline (viền quanh tab), Segmented (các nút chia đoạn trong một thanh nền) và Top line (vạch ở trên tab). Mặc định cho nhóm mới là Underline.
• Áp cho: mục loại Tab ở cả 6 loại menu (Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu, Mobile Mega Menu, Icon Menu). Tab nào không phải tab đầu thì ô này bị ẩn. Mọi gói. Shopify, Wix và website khác như nhau.
• Khách thấy gì: thanh tên các tab trên cửa hàng đổi hình dáng ngay, nội dung bên dưới không đổi. Nhóm cũ chưa từng chọn gì vẫn giữ kiểu Underline.

Display

• Ở đâu: Edit item của tab đầu tiên, khối Tab style, ngay dưới ô Tab style. Năm nút: Hug, Spread out, Left, Center, Right.
• Dùng để làm gì: chọn cách các tab chiếm chỗ trên hàng và cách icon với chữ nằm trong từng tab.
• Lựa chọn:
  • Hug (mặc định): các tab chia đều chiều ngang thanh, icon và chữ đứng gọn thành cụm ở giữa mỗi tab.
  • Spread out: mỗi tab vẫn chia đều chiều ngang, nhưng icon và chữ bị đẩy ra hai mép của tab. Ô này chỉ có tác dụng khi icon và chữ nằm ngang nhau (icon bên trái hoặc bên phải chữ). Nếu icon nằm trên chữ thì bạn không thấy khác gì.
  • Left, Center, Right: mỗi tab co vừa chữ, hai tab cách nhau khoảng 24px, cả dải tab dồn về bên trái, giữa hoặc phải.
• Áp cho: mục loại Tab ở cả 6 loại menu; tab đầu tiên của nhóm. Khi Tab position là Left thì ô này tự ẩn, vì cột bên trái không dùng Display. Mọi gói.
• Khách thấy gì: nếu có nhiều tab hoặc tên dài, dải tab không vừa hàng thì khách cuộn ngang để tới các tab còn lại.

Tab color

• Ở đâu: Edit item của tab đầu tiên, khối Tab style, ô chọn màu cuối khối (gõ mã #RRGGBB hoặc bấm chọn).
• Dùng để làm gì: đặt màu nhấn của tab đang chọn. Khác với màu chữ: ô này không đổi màu chữ của các tab.
• Giá trị: mặc định trống, tab lấy màu chữ chung của cấp menu đó.
• Áp cho: mục loại Tab ở cả 6 loại menu; tab đầu tiên của nhóm. Mọi gói.
• Khách thấy gì: với Underline và Top line là màu của gạch; với Outline là màu viền; với Segmented là màu thanh nền chứa các nút.

Thanh tab thành cột bên trái (Desktop Mega Menu)

Tab position

• Ở đâu: Edit item của tab đầu tiên, khối Tab style, đứng đầu khối, hai thẻ hình Top và Left. Ô này chỉ hiện khi bạn sửa menu loại Desktop Mega Menu.
• Dùng để làm gì: chọn thanh tab nằm ngang trên đầu bảng menu con hay xếp thành cột dọc bên trái.
• Lựa chọn: Top (mặc định, thanh ngang) hoặc Left.
• Áp cho: chỉ Desktop Mega Menu. Mọi gói. Shopify, Wix và website khác như nhau.
• Khách thấy gì: với Left, trên máy tính các tab xếp thành một cột bên trái bảng menu và mở nội dung khi khách rê chuột vào. Trên điện thoại các tab vẫn là thanh ngang cuộn được ở đầu. Cột chỉ hoạt động với nhóm tab ở mức gốc của bảng nhiều cột; nhóm tab nằm trong một dropdown một cột hẹp, nhóm lồng trong tab khác hay nhóm tab thứ hai trong cùng danh sách vẫn là thanh ngang.

Tab column width (px)

• Ở đâu: ngay dưới ô Display, trong khối Tab style: ba hình Narrow · 120, Default · 220, Wide · 320 và một ô nhập số có đơn vị px.
• Dùng để làm gì: đặt bề rộng của cột tab khi bạn chọn Tab position = Left.
• Giá trị: từ 120 đến 420 px. Để trống thì bằng 220. Nhập số ngoài khoảng thì app lấy giá trị gần nhất trong khoảng.
• Áp cho: chỉ Desktop Mega Menu, và chỉ hiện khi Tab position = Left. Mọi gói.
• Khách thấy gì: cột tab rộng hoặc hẹp tương ứng; phần còn lại của bảng menu co giãn theo. Cột quá hẹp sẽ cắt tên tab dài, nên bạn nên xem thử trên cửa hàng.

Nhóm tab lồng nhau và đóng nhóm

Tab ID

• Ở đâu: cuối bảng Edit item của mục Tab, nhóm Nested tab group. Có nút See more mở hình giải thích “How tab groups work”.
• Dùng để làm gì: đặt mã cho các tab nằm bên trong nội dung của một tab khác để chúng thành một nhóm tab riêng.
• Cách dùng:
  1. Đặt các tab con vào dưới tab cha, nằm trong nội dung của tab cha.
  2. Gõ cùng một mã ngắn (ví dụ sub) vào Tab ID của mọi tab con.
  3. Để trống Tab ID của các tab ngoài. Nếu ghi mã vào tab ngoài, chúng cũng bị tính là một nhóm lồng.
  4. Thêm một mục End of tab group sau tab con cuối để đóng nhóm trong, rồi một mục nữa để đóng nhóm ngoài.
• Giá trị: mặc định trống, và đa số menu để trống. Chỉ cần mã khi lồng tab; menu chỉ có một hàng tab phẳng thì bỏ qua.
• Áp cho: mục loại Tab ở cả 6 loại menu. Mọi gói.
• Khách thấy gì: nếu có mã, các tab con hiện thành thanh tab thứ hai bên trong tab cha. Nếu thiếu mã, các tab con chỉ thành thêm tab của thanh ngoài, và mục End của chúng đóng luôn thanh ngoài.

End of tab group

• Ở đâu: đây là một mục riêng trong cây. Bạn thêm bằng Add item rồi chọn mục End of tab group. Mở mục này trong Edit item, bạn sẽ chỉ thấy một dòng giải thích “This marks the end of a tab group”. Ô tích “End of tab group” trong form bị ẩn, bạn không đổi qua lại giữa Tab và End được.
• Dùng để làm gì: đánh dấu nơi nhóm tab kết thúc. Các mục nằm dưới nó hiện như mục thường, không còn nằm trong tab nào.
• Giá trị: mục Tab thường có giá trị tắt (0); mục End là giá trị bật.
• Áp cho: cả 6 loại menu. Mục End không có ô chỉnh kiểu riêng. Mọi gói.
• Khách thấy gì: bản thân mục End không hiện trên cửa hàng. Mục nào nằm dưới nó luôn hiện bên ngoài, dưới nhóm tab. Với tab lồng nhau, End nào đứng trước thì đóng nhóm đang mở ở trong cùng; vị trí đặt End mới quyết định, không phải mã Tab ID của nó.