gui_CssLayout.adoc

CssLayout

ДЕМОНСТРАЦИЯ

API DOCS

Контейнер CssLayout позволяет управлять размещением и стилизацией своих компонентов с помощью CSS.

XML-имя компонента: cssLayout.

Ниже приведен пример использования cssLayout в простом responsive экране.

Отображение компонентов на широком дисплее:

Отображение компонентов на узком дисплее:

XML-дескриптор экрана:

link:../../../../../../source/gui_vcl/cssLayout_1.xml[role=include]

Содержимое файла modules/web/themes/halo/halo-ext.scss (в разделе [web_theme_extension] приведена информация о том как создать этот файл):

link:../../../../../../source/gui_vcl/cssLayout_2.css[role=include]

• Атрибут stylename позволяет применять стили к компоненту CssLayout в XML-дескрипторе или контроллере экрана.

  • стиль v-component-group используется для склеивания компонентов, т.е. группировки без отступов между ними:

    link:../../../../../../source/gui_vcl/cssLayout_3.xml[role=include]

    

  • стиль well делает контейнер "утопленным" с затемнением фона.

  • стиль card придаёт контейнеру вид карточки. В сочетании со стилем v-panel-caption, установленным для любого вложенного контейнера, он позволяет создавать сложные составные контейнеры, например:

    link:../../../../../../source/gui_vcl/cssLayout_4.xml[role=include]

    Результат:

    

---

Атрибуты cssLayout

caption - captionAsHtml - contextHelpText - contextHelpTextHtmlEnabled - description - descriptionAsHtml - enable - css - box.expandRatio - height - id - responsive - stylename - visible - width

API

add - addShortcutAction - addLayoutClickListener - getComponent - getComponentNN - getComponents - getOwnComponent - getOwnComponents - indexOf - remove - removeAll

---