Панель вкладок

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

iOS

Панель вкладок отображается в нижней части экрана приложения и позволяет быстро переключаться между различными разделами приложения. Панели вкладок являются полупрозрачными, могут иметь фоновый оттенок, сохранять одинаковую высоту во всех ориентациях экрана и скрыты при отображении клавиатуры. Панель вкладок может содержать любое количество вкладок, но количество видимых вкладок зависит от размера и ориентации устройства. Если некоторые вкладки невозможно отобразить из-за ограниченного горизонтального пространства, последняя видимая вкладка становится вкладкой «Дополнительно», которая отображает дополнительные вкладки в списке на отдельном экране.

Используйте панель вкладок для организации информации на уровне приложения. Панель вкладок — это хороший способ сгладить иерархию приложения и обеспечить доступ к нескольким категориям информации одновременно.

Используйте панель вкладок строго для навигации. Кнопки панели вкладок не должны использоваться для выполнения действий.

Избегайте слишком много вкладок. Каждая дополнительная вкладка уменьшает доступную для выбора область и увеличивает сложность вашего приложения, затрудняя поиск информации. С учётом того, что на вкладке «Дополнительно» могут отображаться другие вкладки, для этого требуются дополнительные касания, и они занимают мало места. Включайте только основные вкладки, необходимые для вашей информационной иерархии. Слишком мало вкладок также может быть проблемой, так как интерфейс может выглядеть отключенным. Используйте от трех до пяти вкладок на iPhone. Еще несколько приемлемы на iPad.

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

Не удаляйте и не отключайте вкладку, когда ее функция недоступна. Если вкладки доступны в некоторых случаях, но не доступны в других, интерфейс вашего приложения становится нестабильным и непредсказуемым. Убедитесь, что все вкладки всегда включены, и объясните, почему содержимое вкладок недоступно. Например, если на устройстве iOS нет песен, вкладка «Моя музыка» в приложении «Музыка» объясняет, как загружать песни.

Android

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

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

Вместо этого используйте вкладки.

Не используйте более пяти направлений. В этих случаях попробуйте вкладки или дровер навигации.

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

Нижние навигационные пункты назначения всегда включают значок. Лучше всего сочетать значки с текстовыми метками, особенно если значок не имеет очевидного значения.

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

Нажатие в другой раздел всегда приводит к корневой странице раздела, без сохранения контекста.

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

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

---

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Панель Вкладок

Панель Вкладок

Панель Вкладок

Панель Вкладок, расположенная в верхней части рабочего пространства ARCHICAD, содержит все открытые виды/проекции.

 

•Щелкните на любой вкладке, чтобы активировать ее окно.

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

Отключение Панели Вкладок

Панель Вкладок отображается по умолчанию. Для включения и отключения ее показа воспользуйтесь командой Окно > Показать/Скрыть Панель Вкладок.

Отключение Предпросмотра Вкладок

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

Активация Вкладок щелчком мыши

Обозреватель Вкладок

Навигация по Вкладкам при помощи команд и клавиш

Контекстное меню Панели Вкладок

Открытие Вкладки при Помощи Маркера

Переполнение Панели Вкладок

Закрытие Вкладок

Стыковка/Отстыковка Вкладок (только на Mac)

Настройки открытия Новых Видов/Новых Макетов

Активация Вкладок щелчком мыши

Щелкните на любой вкладке или изображении предпросмотра, чтобы активировать ее окно.

 

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

Обозреватель Вкладок

Нажмите кнопку Обозревателя Вкладок, чтобы скрыть/отобразить все вкладки. Затем щелчком мыши выберите нужную вкладку:

 

Включение/отключение Обозревателя Вкладок

Навигация по Вкладкам при помощи команд и клавиш

•Восползуйтесь клавишными командами для циклического переключения вкладок:

–Ctrl/Cmd+Tab (переключение слева направо)

–Shift+Ctrl/Cmd+Tab (переключение справа налево)

См. также Переполнение Панели Вкладок.

•Воспользуйтесь командами Окно > Показать Следующую Вкладку или Окно > Показать Предыдущую Вкладку

Примечание: Если эти команды не отображаются в меню, то вы можете их добавить при помощи команды Параметры > Окружающая Среда > Меню.

Каждая новая Вкладка располагается на Панели Вкладок справа.

Смотреть видео

Контекстное меню Панели Вкладок

Состав меню зависит от типа вида/проекции вкладки.

•Навигация по этажам при помощи контекстного меню вкладки Плана Этажа.

 

•Из вида Развертки можно перейти в любую другую Развертку той же группы

 

•Переключение между Аксонометрическим и Перспективным видами из Вкладки 3D-окна.

•Переключение в окно Основного Скрипта из вкладки Редактора GDL.

 

•Переход из любой вкладки вида/проекции к связанным видам, созданным на основе одной и той же проекции.

 

•Активируйте команду Все Связанные Виды, чтобы отобразить в виде дерева все виды, созданные на основе той же проекции:

 

Открытие Вкладки при Помощи Маркера

Вы можете воспользоваться размещенным маркером,  чтобы открыть любой вид связанной с этим маркером проекции.

 

Выберите размещенный маркер и сделайте щелчок правой кнопкой мыши, чтобы открыть нужный Вид

Переполнение Панели Вкладок

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

Нажатие этой кнопки позволяет отобразить список всех доступных вкладок.

Активная вкладка помечается в списке галочкой.

 

Сделайте щелчок на названии нужной вкладки, чтобы активировать ее и переместить в Панель Вкладок.

Закрытие Вкладок

Выполните одно из следующих действий:

•Щелкните на символе X рядом с названием вкладки.

•Активируйте в контекстном меню  команду Закрыть Вкладку.

•Воспользуйтесь командой Закрыть Вкладку, находящейся в меню Окно.

•Наведите курсор на нужную вкладку и нажмите на колесо прокрутки мыши

Чтобы закрыть все вкладки кроме текущей, активируйте команду Окно > Закрыть Все Остальные Вкладки и Окна.

Стыковка/Отстыковка Вкладок (только на Mac)

Выполните одно из следующих действий:

•Воспользуйтесь командой Отстыковать, находящейся в контекстном меню вкладки;

•Воспользуйтесь командой Окно > Отстыковать.

Для стыковки вкладки активируйте команду Окно > Пристыковать.

Настройки открытия Новых Видов/Новых Макетов

Вновь открываемые виды и макеты могут открываться в новых или в уже открытых вкладках, заменяя собой ранее открытые виды и макеты (виды открываются во вкладках идентичных типов). Эти параметры можно изменить при помощи команды меню Параметры > Окружающая Среда > Дополнительные Параметры.

Исключение: В любой момент времени может быть открыто только одно окно Плана Этажа и только одно 3D-окно.

Передача Параметров между Вкладками

Смотреть видео

Смотреть видео

tabbedPanel — Панель с вкладками

Служит набором контейнеров для других элементов управления и текст.

Категория

Элементы управления контейнером

Синтаксис

 
  
контент
...
 

Таблица 1. Существенные свойства

Свойство	Описание
идентификатор	( tabbedPanel ) По умолчанию до tabbedPanel1 , tabbedPanel2 и скоро. ( tabPanel ) По умолчанию tabPanel1 , tabPanel2 , и так далее.
выбранная вкладка	( tabbedPanel ) Первоначально открывает панель с вкладками на этой вкладке.
текст	( tabPanel ) Обеспечивает метка для вкладки.

Таблица 2. Все свойства (tabbedPanel)

Категория	Свойства
доступность	роль, заголовок Примечание. Свойство роли устарел, начиная с 9.0.1. По умолчанию соответствующий совместимый генерируется значение. Для соблюдения стандартов доступности выполните не указывать значение для этого свойства.
основы	атрибуты, привязка, каталог, идентификатор, язык, загруженный, визуализированный, rendererType, selectedTab
стиль	containerStyleClass, disableTheme, externalStyleClass, style, styleClass, themeId

Таблица 3. Все свойства (вкладка)

Категория	Свойства
доступность	imageAlt, роль, заголовок Примечание. Свойство роли устарел, начиная с 9.0.1. По умолчанию соответствующий совместимый генерируется значение. Для соблюдения стандартов доступности выполните не указывать значение для этого свойства.
основы	привязка, каталог, ссылка, идентификатор, изображение, метка, язык, загруженный, визуализированный, rendererType
события	onClick
стиль	contentStyleClass, disableTheme, endTabStyleClass, middleTabStyleClass, selectedTabStyleClass, startTabStyleClass, style, styleClass, themeId, unselectedTabStyleClass

Использование

Во время выполнения содержимое выбранного на странице появится панель вкладок. Остальные вкладки видны, но не их содержание. Пользователь меняет панели, выбирая вкладки.

В дизайне В этом режиме фокус на панели с вкладками выбирает элемент tabbedPanel . Для работы с элементами tabPanel щелкните правой кнопкой мыши или используйте меню, чтобы сделать следующее:

• Выбрать активное содержимое вкладки переводит фокус на элемент tabPanel для вкладки в фокусе.
• Remove Active Tab удаляет элемент tabPanel для вкладки в фокусе.
• Insert Tab вставляет новый элемент tabPanel .
• Вкладка Append добавляет новую tabPanel элемент.

Примеры

Этот элемент управления «Панель с вкладками» имеет два панели.

 

<хр:вводтекст
значение="#{document1.phoneday}">



<хр:вводтекст
значение="#{document1.phonenight}">


 

Панели вкладок — AcceDe Web

Сводка

• Принцип.
• Основная база HTML.
• ролей, состояний и свойств ARIA.
• Взаимодействие с клавиатурой.
• Примечание.
• Компоненты.

Принцип

Панели вкладок — это динамические модули, которые оптимизируют видимое пространство на веб-странице с помощью системы элементов, управляющих видимостью или скрытостью панелей.

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

Этот код основан на шаблоне проектирования «Вкладки», найденном в WAI-ARIA 1.1 Authoring Practices W3C.

Основная база HTML

 
 
 
Вкладка 1 
 
Вкладка 2
 
 
Вкладка 3
 
 
Вкладка 4
 
 
 
 
 
 [Содержимое первой панели (скрыто)] 
 
 
 
 
 [Содержимое второй панели (отображается, поскольку выбрана соответствующая вкладка)] 
 
 
 
 
 [Содержимое третьей панели (скрыто)] 
 
 
 
 
 [Содержимое четвертой панели (скрытой)] 
 
 

Роли, состояния и свойства ARIA

Взаимодействие с клавиатурой

Tab и Shift + Tab 6 9 на вкладках пользователя компонент интерфейса, клавиша Tab устанавливает фокус на выбранную вкладку в группе. Когда фокус находится на вкладке, нажатие клавиши Tab покидает группу вкладок и фокус перемещается на отображаемую панель.

Стрелка влево

Когда фокус находится на вкладке, эта клавиша перемещает фокус клавиатуры на предыдущую вкладку в компоненте интерфейса с вкладками и выбирает эту вкладку. Если фокус клавиатуры находится на первой вкладке в группе, эта клавиша перемещает фокус клавиатуры на последнюю вкладку в группе и выбирает ее.

Если вкладки ориентированы вертикально, Стрелка вверх также должна иметь такое поведение.

Стрелка вправо

Когда фокус находится на вкладке, эта клавиша перемещает фокус клавиатуры на следующую вкладку в компоненте интерфейса с вкладками и выбирает эту вкладку. Если фокус клавиатуры находится на последней вкладке в группе, эта клавиша переместит фокус клавиатуры на первую вкладку в группе и выберет ее.

Если вкладки ориентированы вертикально, Стрелка вниз также должна иметь такое поведение.