Приспособлението tabs използва персонализирания елемент <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.
Притурка Tabs с меню за препълване
Следващият пример използва персонализирания елемент <devsite-selector> , но има твърде много раздели, за да се поберат на екрана и автоматично прелива в падащото меню Още .
ябълки
Съдържание за ябълки
кайсии
Съдържание за кайсии
авокадо
Съдържание за авокадото
Фиг
Съдържание за смокини
грозде
Съдържание за гроздето
Киви
Съдържание за киви
лимони
Съдържание за лимони
лайм
Съдържание за лаймите
манго
Съдържание за манго
Праскови
Съдържание за праскови
Следващият пример използва синтаксис на Markdown за изобразяване на същото меню за препълване.
ябълки
Съдържание за ябълки
кайсии
Съдържание за кайсии
авокадо
Съдържание за авокадото
Фиг
Съдържание за смокини
грозде
Съдържание за гроздето
Киви
Съдържание за киви
лимони
Съдържание за лимони
лайм
Съдържание за лаймите
манго
Съдържание за манго
Праскови
Съдържание за праскови
Дублиращи се имена на раздели в джаджи за множество раздели
Щракването върху раздел засяга всички други раздели на страницата със същия текст в същия синтаксис. Например, щракването върху Ябълки или Кайсии в приспособлението по-долу също засяга втората джаджа в предишния раздел, защото и двете са изградени с Markdown.
ябълки
Още съдържание за ябълки!
кайсии
Повече съдържание и за кайсиите!
Персонализиране на джаджи за раздели
Въпреки че можете да създадете джаджа за раздели с Markdown, трябва да използвате HTML синтаксис, за да присвоите персонализирани атрибути.
Обвиване на текст в раздел
Текстът, който надвишава максималната ширина за раздел, зададен от DevSite, се изрязва и се добавя с многоточия. Следващият пример използва класа на two-line-tab в рамките на персонализирания елемент <devsite-selector> за обвиване на текст във втория раздел.
Това е дълъг етикет, който не се обвива
Този етикет не се пренася в друг ред.
Този етикет се обвива до втори ред
Етикетът за този раздел се обвива във втори ред.
Обвиване на текст в раздел с по-малък етикет
Следващият пример задава two-line-tab на първия ред и tab-label на втория ред в рамките на персонализирания елемент <devsite-selector> за показване на по-малък етикет на втория ред на двуредов раздел.
Бърз
Този раздел има етикет Swift .
Java
Този двуредов раздел има по-малък етикет за Android под етикета на Java .
Котлин
Този двуредов раздел има по-малък етикет за Android под етикета Kotlin .
Java
Този раздел има етикет на Java .
Директна връзка към конкретен раздел
Следващият пример директно свързва и отваря конкретен раздел, като посочва id в персонализирания елемент <devsite-selector> .
Кобол
Този раздел е по подразбиране, но можете да използвате котвата #cobol .
Fortran
Бихте се свързали директно с този раздел, като добавите котвата #fortran към вашата връзка.
Haskell
Този раздел ще използва котвата #haskell във вашата връзка.
Създаване на връзка с всички джаджи, отворени към същия раздел
Следната връзка добавя параметъра на заявката ?tab=Apricots към URL адреса на тази страница и зарежда страницата с отворен раздел Apricots на всички селектори:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=кайсии