Виджет вкладок использует настраиваемый элемент <devsite-selector> для организации данных, которые имеют несколько представлений, таких как примеры кода на разных языках программирования или структуры данных, представленные в разных форматах (например, JSON, YAML или XML).
Общее использование
В следующем примере настраиваемый элемент <devsite-selector> используется для отображения трех разделов вкладок с использованием HTML.
Вкладка 1 Название
Вкладка 1 Содержание
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Вкладка 2 Название
Вкладка 2 Содержание
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Вкладка 3 Заголовок
Вкладка 3 Содержание
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
В следующем примере используется синтаксис Markdown для отображения тех же трех вкладок.
Вкладка 1 Название
Вкладка 1 Содержание
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Вкладка 2 Название
Вкладка 2 Содержание
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Вкладка 3 Заголовок
Вкладка 3 Содержание
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
Виджет вкладок с дополнительным меню
В следующем примере используется настраиваемый элемент <devsite-selector> , но в нем слишком много вкладок, чтобы поместиться на экране, и он автоматически переполняется раскрывающимся меню « Дополнительно ».
яблоки
Контент о яблоках
Абрикосы
Контент об абрикосах
Авокадо
Контент об авокадо
Инжир
Контент об инжире
Виноград
Контент о винограде
Киви
Контент о киви
Лимоны
Контент о лимонах
Лаймы
Контент о лаймах
манго
Контент о манго
Персики
Контент о персиках
В следующем примере используется синтаксис Markdown для отображения того же меню переполнения.
яблоки
Контент о яблоках
Абрикосы
Контент об абрикосах
Авокадо
Контент об авокадо
Инжир
Контент об инжире
Виноград
Контент о винограде
Киви
Контент о киви
Лимоны
Контент о лимонах
Лаймы
Контент о лаймах
манго
Контент о манго
Персики
Контент о персиках
Дублирование имен вкладок в виджетах с несколькими вкладками
Щелчок по вкладке влияет на все другие вкладки на странице с тем же текстом и тем же синтаксисом. Например, нажатие яблок или абрикосов в виджете ниже также влияет на второй виджет в предыдущем разделе, поскольку они оба созданы с помощью Markdown.
яблоки
Больше контента о яблоках!
Абрикосы
Еще больше информации об абрикосах!
Настройка виджетов вкладок
Хотя вы можете создать виджет вкладок с помощью Markdown, вам необходимо использовать синтаксис HTML для назначения настраиваемых атрибутов.
Обтекание текста внутри вкладки
Текст, превышающий максимальную ширину вкладки, установленную DevSite, обрезается и добавляется многоточием. В следующем примере используется класс two-line-tab в пользовательском элементе <devsite-selector> для переноса текста на вторую вкладку.
Это длинная этикетка, которая не оборачивает
Эта метка не переносится на другую строку.
Эта метка переносится на вторую строку
Метка этой вкладки переносится на вторую строку.
Обтекание текста внутри вкладки с меньшей меткой
В следующем примере two-line-tab устанавливается первая строка, а для tab-label — вторая строка в пользовательском элементе <devsite-selector> , чтобы отображалась меньшая метка во второй строке двухстрочной вкладки.
Быстрый
Эта вкладка имеет ярлык Swift .
Джава
Эта двухстрочная вкладка имеет меньшую метку Android под меткой Java .
Котлин
Эта двухстрочная вкладка имеет меньшую метку Android под меткой Kotlin .
Джава
Эта вкладка имеет метку Java .
Прямая ссылка на конкретную вкладку
Следующий пример напрямую ссылается на конкретную вкладку и открывает ее, указав id в пользовательском элементе <devsite-selector> .
Кобол
Эта вкладка используется по умолчанию, но вы можете использовать #cobol .
Фортран
Вы можете напрямую перейти на эту вкладку, добавив якорь #fortran к своей ссылке.
Хаскелл
Эта вкладка будет использовать якорь #haskell в вашей ссылке.
Создание ссылки со всеми виджетами, открытыми на одной вкладке
Следующая ссылка добавляет параметр запроса ?tab=Apricots к URL-адресу этой страницы и загружает страницу с открытой вкладкой Apricots во всех селекторах:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Абрикосы