Перейти к основному содержимому

Expandable (Раскрывающийся блок)

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

Стандартное дерево виджетов Expandable

Когда вы добавляете виджет Expandable, его базовая структура обычно включает:

  • Header (Заголовок): видимая часть блока в обоих состояниях — свёрнутом и развёрнутом. Обычно содержит текст или иконку, указывающую, к какому содержимому относится раскрывающаяся область.
  • Collapsed View (Свёрнутое состояние): отображает минимальную информацию или краткое описание.
  • Expanded View (Развёрнутое состояние): содержит дополнительную информацию или элементы управления, которые становятся видимыми при раскрытии блока.

expandable-widget-tree.avif

Свойства виджета Expandable​

  • Icon Properties (Свойства иконки): см. руководство по Icon.

  • Expandable Properties (Основные параметры):

    • Active View: определяет, находится ли виджет в состоянии «свёрнут» или «развёрнут».
    • Initially Expanded: задаёт, должен ли блок быть раскрыт по умолчанию при загрузке страницы.
    • Tap Header to Toggle: позволяет пользователю разворачивать или сворачивать блок, нажимая на заголовок.
    • Tap Body to Expand/Collapse: определяет, можно ли переключать состояние при нажатии на содержимое раскрытой области.

  • Style Properties (Стили):

    • Width & Height (Ширина и высота): размеры виджета; можно задать значение infinity, чтобы занять всю ширину или высоту контейнера.
    • Background Color (Фоновый цвет): цвет фона под раскрывающимся содержимым.
    • Header Alignment (Выравнивание заголовка): положение содержимого заголовка — слева, по центру или справа.

Практическое использование Expandable​

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