5.5.2.2.4. CssLayout

Контейнер 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