Widget tab menggunakan elemen kustom <devsite-selector> untuk mengatur data yang memiliki beberapa representasi, seperti contoh kode dalam berbagai bahasa pemrograman atau struktur data yang direpresentasikan oleh format yang berbeda (seperti JSON, YAML, atau XML).
Penggunaan umum
Contoh berikut menggunakan elemen kustom <devsite-selector> untuk merender tiga bagian tab menggunakan HTML.
Judul Tab 1
Konten Tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
semper tortor nec dictum sagitt. Nunc massa ipsum, mollis non neque
sed, vulputate dignissim odio.
Judul Tab 2
Konten Tab 2
Curabitur semper tortor nec dictum sagitt. Nunc massa ipsum, mollis
non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Judul Tab 3
Konten Tab 3
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec dictum sagitis.
Contoh berikut menggunakan sintaksis Markdown untuk merender tiga tab yang sama.
Judul Tab 1
Konten Tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec dictum sagitis. Nunc massa ipsum, mollis non neque sed,
vulputate dignissim odio.
Judul Tab 2
Konten Tab 2
Curabitur semper tortor nec dictum sagit. Nunc massa ipsum, mollis non-neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Judul Tab 3
Konten Tab 3
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor
nec dictum sagitis.
Widget tab dengan menu tambahan
Contoh berikut menggunakan elemen kustom <devsite-selector>, tetapi memiliki terlalu banyak
tab yang dapat dimuat di layar dan otomatis masuk ke menu drop-down
Lainnya.
Apel
Konten tentang apel
Aprikot
Konten tentang aprikot
Alpukat
Konten tentang alpukat
Tin
Konten tentang buah ara
Anggur
Konten tentang anggur
Buah Kiwi
Konten tentang buah kiwi
Lemon
Konten tentang lemon
Jeruk nipis
Konten tentang jeruk nipis
Mangga
Konten tentang mangga
Persik
Konten tentang buah persik
Contoh berikut menggunakan sintaksis Markdown untuk merender menu tambahan yang sama.
Apel
Konten tentang apel
Aprikot
Konten tentang aprikot
Alpukat
Konten tentang alpukat
Tin
Konten tentang buah ara
Anggur
Konten tentang anggur
Buah Kiwi
Konten tentang buah kiwi
Lemon
Konten tentang lemon
Jeruk nipis
Konten tentang jeruk nipis
Mangga
Konten tentang mangga
Persik
Konten tentang buah persik
Menduplikasi nama tab di widget beberapa tab
Mengklik tab akan memengaruhi semua tab lain di halaman yang memiliki teks yang sama dalam sintaksis yang sama. Misalnya, mengklik Apples atau Apricots pada widget di bawah juga akan memengaruhi widget kedua di bagian sebelumnya karena keduanya dibuat dengan Markdown.
Apel
Lebih banyak konten tentang apel!
Aprikot
Konten lainnya tentang aprikot juga!
Menyesuaikan widget tab
Meskipun Anda dapat mem-build widget tab dengan Markdown, Anda harus menggunakan sintaksis HTML untuk menetapkan atribut khusus.
Menggabungkan teks dalam tab
Teks yang melampaui lebar maksimum untuk tab yang ditetapkan oleh DevSite akan dipotong dan ditambahkan
dengan elipsis. Contoh berikut menggunakan class two-line-tab dalam elemen kustom <devsite-selector> untuk menggabungkan teks dalam tab kedua.
Ini adalah label panjang yang tidak digabungkan
Label ini tidak digabungkan ke baris lain.
Label ini digabungkan ke baris kedua
Label untuk tab ini digabungkan ke baris kedua.
Menggabungkan teks dalam tab dengan label yang lebih kecil
Contoh berikut menetapkan two-line-tab ke baris pertama dan tab-label ke baris kedua dalam elemen kustom <devsite-selector> untuk menampilkan label yang lebih kecil di baris kedua tab dua baris. data.
Swift
Tab ini memiliki label Swift.
Java
Tab dua baris ini memiliki label Android yang lebih kecil di bawah label Java.
Kotlin
Tab dua baris ini memiliki label Android yang lebih kecil di bawah label Kotlin.
Java
Tab ini memiliki label Java.
Penautan langsung ke tab tertentu
Contoh berikut langsung menautkan ke dan membuka tab tertentu dengan menentukan
id dalam elemen kustom <devsite-selector>.
Kobol
Tab ini adalah default, tetapi Anda dapat menggunakan anchor #cobol.
Fortran
Anda akan langsung menautkan ke tab ini dengan menambahkan anchor #fortran ke link Anda.
Haskell
Tab ini akan menggunakan anchor #haskell di link Anda.
Membuat link dengan semua widget terbuka ke tab yang sama
Link berikut menambahkan parameter kueri ?tab=Apricots ke URL halaman ini dan memuat halaman dengan tab Apricots yang terbuka di semua pemilih:
https://www.GoToMeetingtest.how/integration-tests/widgets/tabs?tab=Apricots