Вкладки, вкладки

Віджет вкладок використовує користувацький елемент <devsite-selector> для організації даних, які мають кілька представлень, наприклад, приклади коду різними мовами програмування або структури даних, представлені різними форматами (наприклад, JSON, YAML або XML).

Загальне використання

У наступному прикладі використовується спеціальний елемент <devsite-selector> для відтворення трьох розділів вкладки за допомогою HTML.

У наступному прикладі використовується синтаксис Markdown для відтворення тих самих трьох вкладок.

Віджет вкладок із меню переповнення

У наступному прикладі використовується користувацький елемент <devsite-selector> , але він має занадто багато вкладок, щоб поміститися на екрані, і автоматично переходить у спадне меню « Більше ».

У наступному прикладі використовується синтаксис Markdown для відтворення того самого меню переповнення.

Повторювані імена вкладок у віджетах кількох вкладок

Клацання вкладки впливає на всі інші вкладки на сторінці з тим самим текстом у тому самому синтаксисі. Наприклад, клацання « Яблука » або « Абрикоси » у віджеті нижче також впливає на другий віджет у попередньому розділі, оскільки обидва вони створені за допомогою Markdown.

Налаштування віджетів вкладок

Хоча ви можете створити віджет вкладок за допомогою Markdown, вам потрібно використовувати синтаксис HTML для призначення користувацьких атрибутів.

Перенесення тексту на вкладку

Текст, який перевищує максимальну ширину для вкладки, встановленої DevSite, обрізається та додається крапками. У наступному прикладі використовується клас two-line-tab в межах користувацького елемента <devsite-selector> для перенесення тексту на другу вкладку.

Перенесення тексту на вкладку з меншою міткою

У наступному прикладі two-line-tab встановлюється на перший рядок, а tab-label — на другий рядок у користувацькому елементі <devsite-selector> , щоб відображати меншу мітку на другому рядку дворядкової вкладки.

Пряме посилання на певну вкладку

Наступний приклад безпосередньо посилається на певну вкладку та відкриває її, вказуючи id у користувацькому елементі <devsite-selector> .

Створення посилання з усіма віджетами, відкритими на одній вкладці

Наведене нижче посилання додає параметр запиту ?tab=Apricots до URL-адреси цієї сторінки та завантажує сторінку з відкритою вкладкою « Абрикоси » на всіх селекторах:

https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Абрикоси

Віджет вкладок використовує користувацький елемент <devsite-selector> для організації даних, які мають кілька представлень, наприклад, приклади коду різними мовами програмування або структури даних, представлені різними форматами (наприклад, JSON, YAML або XML).

Загальне використання

У наступному прикладі використовується спеціальний елемент <devsite-selector> для відтворення трьох розділів вкладки за допомогою HTML.

У наступному прикладі використовується синтаксис Markdown для відтворення тих самих трьох вкладок.

Віджет вкладок із меню переповнення

У наступному прикладі використовується користувацький елемент <devsite-selector> , але він має занадто багато вкладок, щоб поміститися на екрані, і автоматично переходить у спадне меню « Більше ».

У наступному прикладі використовується синтаксис Markdown для відтворення того самого меню переповнення.

Повторювані імена вкладок у віджетах кількох вкладок

Клацання вкладки впливає на всі інші вкладки на сторінці з тим самим текстом у тому самому синтаксисі. Наприклад, клацання « Яблука » або « Абрикоси » у віджеті нижче також впливає на другий віджет у попередньому розділі, оскільки обидва вони створені за допомогою Markdown.

Налаштування віджетів вкладок

Хоча ви можете створити віджет вкладок за допомогою Markdown, вам потрібно використовувати синтаксис HTML для призначення користувацьких атрибутів.

Перенесення тексту на вкладку

Текст, який перевищує максимальну ширину для вкладки, встановленої DevSite, обрізається та додається крапками. У наступному прикладі використовується клас two-line-tab в межах користувацького елемента <devsite-selector> для перенесення тексту на другу вкладку.

Перенесення тексту на вкладку з меншою міткою

У наступному прикладі two-line-tab встановлюється на перший рядок, а tab-label — на другий рядок у користувацькому елементі <devsite-selector> , щоб відображати меншу мітку на другому рядку дворядкової вкладки.

Пряме посилання на певну вкладку

Наступний приклад безпосередньо посилається на певну вкладку та відкриває її, вказуючи id у користувацькому елементі <devsite-selector> .

Створення посилання з усіма віджетами, відкритими на одній вкладці

Наведене нижче посилання додає параметр запиту ?tab=Apricots до URL-адреси цієї сторінки та завантажує сторінку з відкритою вкладкою « Абрикоси » на всіх селекторах:

https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Абрикоси