Tiện ích thẻ sử dụng phần tử tùy chỉnh <devsite-selector> để sắp xếp dữ liệu có nhiều nội dung đại diện, chẳng hạn như ví dụ về mã bằng các ngôn ngữ lập trình hoặc cấu trúc dữ liệu được biểu thị theo các định dạng khác nhau (chẳng hạn như JSON, YAML, hoặc XML).
Sử dụng chung
Ví dụ sau sử dụng phần tử tùy chỉnh <devsite-selector> để hiển thị
3 phần thẻ bằng cách sử dụng HTML.
Tiêu đề thẻ 1
Thẻ 1 Nội dung
Lorem ipsum dolor sit amet, consectetur ad grossscing elit. Curabitur
semper tortor nec dictum sagittis. Nunc Massa ipsum, mollis non neque
sed, vulputate dignissim odio.
Tiêu đề thẻ 2
Thẻ 2 Nội dung
Curabitur semper tortor nec dictum sagittis. Nunc Massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur ad adsscing elit.
Tiêu đề thẻ 3
Thẻ 3 Nội dung
Nunc Massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adlocscing elit. Curabitur semper
tortor nec dictum sagittis.
Ví dụ sau đây sử dụng cú pháp Markdown để hiển thị 3 thẻ tương tự.
Tiêu đề thẻ 1
Thẻ 1 Nội dung
Lorem ipsum dolor sit amet, consectetur adrollscing elit. Curabitur semper
tortor nec dictum sagittis. Nunc Massa ipsum, mollis non neque sed,
vulputate dignissim odio.
Tiêu đề thẻ 2
Nội dung thẻ 2
Curabitur semper tortor nec dictum sagittis. Nunc Massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adlocscing elit.
Tiêu đề thẻ 3
Thẻ 3 Nội dung
Nunc Massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur ad grossscing elit. Chân toa dành cho bộ phận cơ thể của
curabitur semper.
Tiện ích Thẻ có trình đơn mục bổ sung
Ví dụ sau đây sử dụng phần tử tùy chỉnh <devsite-selector> nhưng có quá nhiều
thẻ cho vừa với màn hình và tự động tràn vào trình đơn thả xuống Thêm.
Táo
Nội dung về táo
Mơ
Nội dung về mơ
Quả bơ
Nội dung về bơ
Quả sung ngọt
Nội dung về quả sung
Nho
Nội dung về nho
Quả kiwi
Nội dung về quả kiwi
Chanh vàng
Nội dung về chanh
Chanh xanh
Nội dung về chanh
Xoài
Nội dung về xoài
Đào
Nội dung về đào
Ví dụ sau đây sử dụng cú pháp Markdown để hiển thị cùng một trình đơn mục bổ sung.
Táo
Nội dung về táo
Mơ
Nội dung về mơ
Quả bơ
Nội dung về bơ
Quả sung ngọt
Nội dung về quả sung
Nho
Nội dung về nho
Quả kiwi
Nội dung về quả kiwi
Chanh vàng
Nội dung về chanh
Chanh xanh
Nội dung về chanh
Xoài
Nội dung về xoài
Đào
Nội dung về đào
Tên thẻ trùng lặp trong nhiều tiện ích thẻ
Thao tác nhấp vào một thẻ sẽ ảnh hưởng đến tất cả các thẻ khác trên trang có cùng một văn bản trong cùng một cú pháp. Ví dụ: việc nhấp vào Apple hoặc Apricot trong tiện ích bên dưới cũng ảnh hưởng đến tiện ích thứ hai trong phần trước vì cả hai đều được xây dựng bằng Markdown.
Táo
Xem thêm nội dung về táo!
Mơ
Cũng có nhiều nội dung về mơ.
Tùy chỉnh các tiện ích của thẻ
Mặc dù bạn có thể tạo tiện ích thẻ bằng Markdown, nhưng bạn cần sử dụng cú pháp HTML để chỉ định các thuộc tính tùy chỉnh.
Xuống dòng tự động trong một thẻ
Văn bản vượt quá chiều rộng tối đa cho một thẻ do DevSite đặt sẽ bị cắt và nối bằng dấu ba chấm. Ví dụ sau đây sử dụng lớp two-line-tab trong phần tử tùy chỉnh <devsite-selector> để gói văn bản trong thẻ thứ hai.
Đây là một nhãn dài không được bao bọc
Nhãn này không nằm ở một dòng khác.
Nhãn này bao quanh một dòng thứ hai
Nhãn cho thẻ này bao quanh một dòng thứ hai.
Gói văn bản trong một thẻ có nhãn nhỏ hơn
Ví dụ sau đây đặt two-line-tab thành dòng đầu tiên và tab-label thành
dòng thứ hai trong phần tử tùy chỉnh <devsite-selector> để hiển thị
nhãn nhỏ hơn trên dòng thứ hai của thẻ hai dòng.
Swift
Thẻ này có nhãn Swift.
Java
Thẻ hai dòng này có nhãn Android nhỏ hơn nhãn Java.
Kotlin
Thẻ hai dòng này có nhãn Android nhỏ hơn bên dưới nhãn Kotlin.
Java
Thẻ này có nhãn Java.
Liên kết trực tiếp với một thẻ cụ thể
Ví dụ sau liên kết trực tiếp đến và mở một thẻ cụ thể bằng cách chỉ định id trong phần tử tùy chỉnh <devsite-selector>.
Phô mai Cobol
Thẻ này là thẻ mặc định nhưng bạn có thể sử dụng thẻ liên kết #cobol.
Fortran
Bạn sẽ liên kết trực tiếp với thẻ này bằng cách thêm neo #fortran vào đường liên kết của bạn.
Haskell
Thẻ này sẽ sử dụng thẻ liên kết #haskell trong đường liên kết của bạn.
Tạo liên kết với tất cả các tiện ích được mở tới cùng một thẻ
Liên kết sau sẽ thêm tham số truy vấn ?tab=Apricots vào URL của
trang này và tải trang bằng thẻ Apricots trên tất cả các bộ chọn:
https://www.devsitetest.how/integration-tests/RTB/tabs?tab=Apricots