Компонент вкладки

1. Обзор

1.1 Версия

Версия FineBI	Функциональные изменения
6.0	-

1.2 Сценарии применения

Компоненты вкладок позволяют интегрировать информацию, оптимизировать расположение, проводить многомерный анализ и другие сценарии для удовлетворения различных потребностей пользователей в анализе данных.

• Сценарий 1: При анализе данных вы хотите разместить анализ с одной точки зрения на одной странице и нажать Tab для переключения между разными перспективами анализа. Например, просмотрите анализ общего объема заказов по контрактам, анализ заказов в разных регионах.
• Сценарий 2: В приборной панели анализируется несколько тем, страница анализа приборной панели слишком длинная, и есть надежда, что соответствующий контент можно интегрировать, чтобы он отображался на одной странице, а разные материалы можно было переключать, нажимая на вкладку, чтобы сократить длину приборной панели и добиться упорядоченной компоновки.
• Сценарий 3: В рамках различных вкладок необходимо добиться гибкого анализа и свободной компоновки, которая не будет ограничена страницей вкладки.

Пользователи в производстве приборной панели, содержание приборной панели будет разделена на несколько тем для отображения, сократить длину приборной панели, чтобы достичь гибкой компоновки, и может быть просмотрен в то же время, эффект показан на рисунке ниже:

1.3 Функциональный профиль

• Пользователи могут добавлять компоненты на разные вкладки внутри компонента Tab и нажимать на заголовок вкладки для переключения между вкладками.
• Компонент Tab поддерживает наведение, копирование, удаление и стилизацию.

Примечание: Страницы вкладок в компоненте Tab загружаются асинхронно.

Раздел 1.2 используется в качестве примера для наглядности.

2. Добавление компонента Tab

Нажмите "Другое > Компонент вкладки" в интерфейсе редактирования приборной панели, после чего компонент вкладки будет успешно добавлен. Как показано на следующем рисунке:

3. Новая страница вкладки

Нажмите "+" рядом с заголовком страницы вкладки компонента, чтобы добавить страницу вкладки, добавьте страницу вкладки, называемую вкладкой, и нажмите на заголовок страницы вкладки, чтобы переключить страницу вкладки, как показано на следующем рисунке:

4. добавьте компонент страницы вкладок

• Диапазон поддерживаемых компонентов: компоненты диаграмм/таблиц, компоненты фильтров, текстовые компоненты, компоненты изображений, веб-компоненты. Примечание: компоненты вкладок не включены.
• Эффективный диапазон добавленных компонентов: компоненты вкладки не изменяют настройки и эффективный диапазон исходных компонентов. (Включая такие эффекты, как связывание, сверление и т. д.)
• Компоненты, для которых установлен режим наведения, не поддерживают перетаскивание внутрь и наружу компонентов Tab.

4.1 Создание компонентов

Начните с добавления всех компонентов для анализа данных, которые были созданы и добавлены на приборную панель. Дополнительные сведения см. в разделе Добавление компонентов в приборные панели

4.2 Добавление компонентов на вкладку

Перейдите на первую вкладку, переключитесь на страницу вкладки, где вы хотите добавить компонент, а затем перетащите компонент в нее, после чего компонент будет успешно добавлен, как показано на следующем рисунке:

Примечание: Компонент вкладки можно пропорционально изменить, перетаскивая его.

Примечание 1: Если вкладка не переименована, она будет изменена только в соответствии с именем первого перетащенного компонента. Например, на рисунке выше, когда компонент фильтра перетаскивается на вкладку первым, имя вкладки будет изменено на имя компонента фильтра "Диапазон дат". Если в это время перетащить второй компонент, это не повлияет на текущее имя вкладки, а имя вкладки будет зафиксировано на имени первого перетащенного компонента.

Примечание 2: Когда компонент с вкладкой перетаскивается во второй и последующие компоненты, заголовок компонента не скрывается, а заголовок первого компонента переводится из скрытого в отображаемый.

Примечание 3: Добавление полей не поддерживается для ярлыков страниц вкладок и заголовков компонентов вкладок.

Аналогичным образом перетащите необходимые компоненты на вторую вкладку, как показано на следующем рисунке:

5. Изменение заголовка страницы вкладки

Страница вкладки поддерживает настройку заголовка. Наведите курсор на заголовок вкладки, которую нужно переименовать, появится выпадающее окно, нажмите "Редактировать заголовок", чтобы переименовать заголовок вкладки. Как показано на рисунке ниже:

6. настройка стилей компонентов

6.1 Вход на страницу настройки стиля

1) Нажмите на компонент Tab и выберите "> Настройки стиля", чтобы войти в интерфейс настроек стиля. Как показано на рисунке ниже:

Экран "Настройки стиля" позволяет задать заголовок, фон и стиль страницы вкладки компонента Tab.

6.2 Установка заголовка компонента

Установите форматирование шрифта заголовка компонента Tab, как показано на следующем рисунке:

6.3 Установка фона компонента

Чтобы настроить "Фон заголовка" и "Фон компонента", обратитесь к разделу "Настройки стиля фона компонента ", как показано ниже:

6.4 Настройка стилей вкладок

Поддержка настройки стиля вкладки переключения, включая "Стиль", "Положение", "Шрифт", "Выбранное состояние" и "Состояние по умолчанию".

Пример установки второго стиля вкладки, нажмите "OK" после установки, эффект показан на рисунке ниже:

Существует три стиля "Стиль" заголовка страницы вкладки:

• Стиль 1: Фоновым цветом этикетки является линия ниже, а эффект для мобильного терминала такой же, как и для терминала ПК.
• Стиль 2: цвет фона выбранной метки - цветовой блок, а невыбранной - линия, эффект для мобильного терминала и терминала ПК одинаков.
• Стиль 3: Цвет фона всех ярлыков - color block, эффект отображения на ПК и мобильных устройствах не совпадает, а эффект отображения на мобильных устройствах аналогичен стилю 1.

"Состояние по умолчанию" - это состояние без флажка, поддерживающее установку шрифта и цвета фона страницы вкладки в состоянии без флажка.

"Selected State" означает выбранное состояние, поддерживается установка шрифта и цвета фона страницы вкладки для выбранного состояния, нажмите "OK", чтобы сохранить стиль после установки компонента Tab. Нажмите "ОК", чтобы сохранить стиль после установки компонента Tab:

7. Настройте порядок страниц вкладки

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

8. Размножение

Примечание: размер копируемого компонента соответствует размеру оригинального компонента, содержимое настроек такое же, а состояние наведения такое же.

8.1 Дублирование компонента Tab

О копировании компонентов Tab см. в документации: Копирование компонентов.

8.2 Дублирование компонентов вкладки на странице

Компоненты, перетащенные на вкладку внутри компонента Tab, также поддерживают копирование. Например, если щелкнуть компонент диаграммы "Запись клиента", опустить вниз и выбрать "Копировать", компонент диаграммы будет успешно скопирован, после копирования он останется на текущей вкладке и автоматически будет помещен в нижнюю часть вкладки. Как показано на рисунке ниже:

9. Подвеска

Компоненты Tab, Tab страницы вкладок внутри компонента поддерживают настройку наведения, устанавливают способ обращения к документу: наведение компонента

Примечание: Перетаскивание компонентов Tab внутрь и наружу не поддерживается для компонентов, которые настроены на наведение внутри или вне компонента Tab.

10. Удалить

Удаление страницы вкладки или компонента вкладки приводит к удалению соответствующего компонента, и вам будет выдан запрос на его удаление. Дополнительные сведения об удалении компонентов см. в разделе Удаление компонентов.

10.1 Удаление компонента вкладки

При удалении компонента Tab соответствующие компоненты внутри компонента также удаляются, как показано на следующем рисунке:

10.2 Удаление страницы вкладки

Щелкните заголовок страницы вкладки, выберите "v > Удалить", нажмите "OK", чтобы успешно удалить страницу вкладки, и компоненты на странице вкладки также будут удалены, как показано на следующем рисунке:

10.3 Удаление компонента Tab Page

Компоненты, добавленные на страницу Tab, можно удалить из компонента Tab и вернуть на экран Dashboard, как показано на следующем рисунке:

11. Экспорт компонентов

Каждая вкладка компонента Tab поддерживает отдельный экспорт в Excel, причем порядок экспорта соответствует текущей позиции на вкладке Tab слева направо, сверху вниз.

Например, пример, приведенный в этой статье, экспортируется так, как показано ниже:

12. Мобильный предварительный просмотр

Эффект от отображения компонента Tab на мобильных устройствах показан на следующем рисунке:

Примечание: Высота компонента Tab может быть изменена в мобильном макете.