3.5.2.2.4. CssLayout
ДЕМОПРИЛОЖЕНИЕ
ДЕМОНСТРАЦИЯ
API DOCS

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

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

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

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

gui cssLayout 1

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

gui cssLayout 2

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

<cssLayout responsive="true" stylename="responsive-container" width="100%">
    <vbox margin="true" spacing="true" stylename="group-panel">
        <textField caption="Field One" width="100%"/>
        <textField caption="Field Two" width="100%"/>
        <button caption="Button"/>
    </vbox>
    <vbox margin="true" spacing="true" stylename="group-panel">
        <textField caption="Field Three" width="100%"/>
        <textField caption="Field Four" width="100%"/>
        <button caption="Button"/>
    </vbox>
</cssLayout>

Содержимое файла modules/web/themes/halo/halo-ext.scss (в разделе Расширение существующей темы приведена информация о том как создать этот файл):

/* Define your theme modifications inside next mixin */
@mixin halo-ext {
  @include halo;

  .responsive-container {
    &[width-range~="0-900px"] {
      .group-panel {
        width: 100% !important;
      }
    }

    &[width-range~="901px-"] {
      .group-panel {
        width: 50% !important;
      }
    }
  }
}

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

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

      <cssLayout stylename="v-component-group">
    <textField inputPrompt="Search..."/>
    <button caption="OK"/>
</cssLayout>
      gui cssLayout 3

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

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

      <cssLayout height="300px"
           stylename="card"
           width="300px">
    <hbox stylename="v-panel-caption"
          width="100%">
        <label value="Widget caption"/>
        <button align="MIDDLE_RIGHT"
                icon="font-icon:EXPAND"
                stylename="borderless-colored"/>
    </hbox>
    <vbox height="100%">
        <label value="Panel content"/>
    </vbox>
</cssLayout>

      Результат:

      gui cssLayout 4
Атрибуты 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