Виджет Навигация по видам

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

Пример

Используйте этот виджет для поддержки требований к разработке приложений, таких как:

  • Вы создаете несколько видов похожих ресурсов в виджете Раздел, чтобы избежать длительной прокрутки в вашем приложении. Включите виджет Навигация по видам, чтобы пользователи могли щелкать по вкладкам или использовать кнопки и бегунок для обновления содержания раздела и доступа к видам.

Примечания по использованию

У страницы должен быть виджет Раздел, с которым вы можете связать виджет Навигация по видам. Вы должны разместить этот виджет за пределами раздела, вы не можете вложить виджет Навигация по видам в соответствующий ему виджет Раздел. Например, можно разместить виджет над или под разделом (идеальный вариант для горизонтальных вкладок), либо слева или справа от раздела (для вертикальных вкладок).

При добавлении виджета Навигация по видам рядом с ним появляется окно Быстрый стиль, в котором можно выбрать различные стили, включая вкладки, символы, бегунок и кнопки навигации. (Чтобы получить доступ к этому окну снова, щелкните кнопку Быстрый стиль Быстрый стиль в панели инструментов виджета) Вы также можете настроить собственный дизайн, выбрав в расширенных настройках цвета и шрифты для различных состояний виджета.

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

Настройки

У виджета Навигация по видам есть следующие настройки:

  • Связать с – выберите виджет раздела на странице.

В зависимости от выбранного стиля вы можете настроить различные параметры.

Для стилей вкладок (по умолчанию, подчеркивание и знак) можно настроить следующие параметры:

  • Виды – укажите виды, которые должны быть показаны в виджете, выбрав одну из следующих опций:
    • Автоматический – включить вкладки для всех видов в разделе.
    • Пользовательский – включить вкладки для выбранных видов в разделе.
  • Направление – показать вкладки горизонтально или вертикально.
  • Расстояние - задает расстояние между вкладками в пикселах.
  • Выравнивание - определяет расположение текста вкладки. Например, если вы выбираете горизонтальный стиль, название вкладки будет выровнено с вкладкой: левый или правый край либо по центру.
  • Показывать значок — отображает значки для каждого вида. Вы можете изменить значок каждого вида в настройках виджета Раздел.
  • Показать текст – отображает надпись для каждого вида.
    Примечание:

    Вы должны включить Показать значок или Показать текст, либо и то, и другое.

  • Расширенный – измените тему вашего приложения, чтобы изменить цвет фона виджета и стиль трех состояний вкладок и дать пользователям знак, когда они могут задержать курсор или выбрать вкладку. По умолчанию – это состояние вкладки без взаимодействия с пользователем; Выбранный – это выбор пользователем вкладки, которая отображает соответствующий вид в связанном виджете Раздел; и Наведение курсора – это состояние вкладки, когда пользователь указывает на нее.
    Подсказка:

    Чтобы поэкспериментировать с этими опциями, нажмите Реальный вид на панели инструментов конструктора.

    • Текст – измените размер шрифта (в пикселах) и цвет, а также стиль вкладки (полужирный, курсив, зачеркнутый или подчеркнутый).
    • Значок — если включена опция Показывать значок, вы можете изменить размер (в пикселях) и цвет значков видов.
    • Фон – выберите цвет заливки для вкладки.
    • Граница или Подчеркивание– выберите для вкладки цвет границы, стиль (штриховой или точками), а также толщину в пикселах. Для стиля Подчеркивание вкладки вы можете только выбрать цвет и толщину линии.
    • Радиус границы – измените размер радиуса (в пикселах или процентах), чтобы настроить форму углов вкладки.

Для стиля Символ вы можете настроить следующее:

  • Виды – укажите виды, которые должны быть показаны в виджете, выбрав одну из следующих опций:
    • Авто – включить символы для всех видов в разделе.
    • Пользовательский – включить символы для выбранных видов в разделе.
  • Направление – показать символы горизонтально или вертикально.
  • Расстояние - задает расстояние между символами в пикселах.
  • Выравнивание - определяет расположение символов в виджете. Например, если вы выбираете вертикальное направление, символы выравниваются по контейнеру виджета: по левому или по правому краю или по центру.
  • Подсказка инструмента – показать текст подсказки, которая отображает имя вида.
  • Символ – выбрать значки для текущего вида или видов.
  • Расширенный – измените тему вашего приложения и выберите цвет фона виджета, размер значков (в пикселах) и цвет для трех состояний символа навигации по видам: По умолчанию, Выбранный и Наведение курсора.

Для стиля Бегунок вы можете настроить следующее:

  • Маркер – включить маркер (указатель) на бегунке, чтобы отобразить продвижение вдоль дорожки.
  • Расширенный – измените тему вашего приложения, чтобы изменить цвет фона виджета и цвет трех состояний бегунка:
    • Активный – пройденная часть дорожки бегунка.
    • Маркер – указатель-маркер на дорожке бегунка. Вы можете выбрать цвета заливки и границ для маркера.
    • Неактивный – не пройденная часть дорожки бегунка.

Для стиля стрелки вы можете настроить следующее:

  • Направление – отображение кнопок навигации и текста горизонтально или вертикально.
  • Шаг – определите, насколько раздел перемещается вперед и назад при каждом нажатии кнопок навигации. Значение по умолчанию равно 1. Допустимый диапазон входных значений от 0 до 1. Чтобы увидеть эффект шага, вам необходимо настроить анимацию перехода для соответствующего виджета Раздел.
  • Предыдущий и следующий – введите текст и выберите значок для кнопок навигации.
  • Расширенный – измените тему вашего приложения, чтобы выбрать цвет фона виджета и цвет шрифта разбивки на страницы (для стилей Стрелка 1 и Стрелка 3) и стили трех состояний кнопки навигации: По умолчанию – это состояние кнопки без взаимодействия с пользователем; Наведение курсора – это состояние кнопки, когда пользователь указывает на нее; и Отключено – это состояние кнопки, когда она не доступна, если нет следующего или предыдущего вида.
    • Текст – выберите размер шрифта (в пикселах), цвет и стиль текста кнопки навигации.
    • Значок – измените размер (в пикселах) и цвет кнопок навигации.
    • Фон – выберите цвет заливки кнопок навигации.
    • Граница – выберите цвет, стиль и ширину (в пикселах) для границ кнопок.
    • Радиус границ – измените размер радиуса (в пикселах или процентах), чтобы настроить углы кнопок навигации.

Опции взаимодействия

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

Виджет Навигация по видам поддерживает триггеры Изменение вида и Нажатие кнопки. Например, вы можете сделать виджет Боковая панель открывающимся каждый раз, когда пользователь меняет вид с помощью виджета Навигация по видам. Для этого добавьте оба виджета в свое приложение. В настройках виджета Навигация по видам щелкните Добавить триггер, выберите Изменить вид, выберите виджет Боковая панель в качестве целевого и щелкните действие Открыть боковую панель.