3.5.2.2.4. CSS 布局

示例程序

在线示例

API 文档

CssLayout 是一个容器,可以使用 CSS 完全控制这个容器里的组件的位置和样式。

该组件的 XML 名称: cssLayout

下面是使用 cssLayout 实现简单地响应式界面的示例。

在宽屏中显示组件:

gui cssLayout 1

在窄屏中显示组件:

gui cssLayout 2

界面的 XML 描述:

  1. <cssLayout responsive="true" stylename="responsive-container" width="100%">
  2. <vbox margin="true" spacing="true" stylename="group-panel">
  3. <textField caption="Field One" width="100%"/>
  4. <textField caption="Field Two" width="100%"/>
  5. <button caption="Button"/>
  6. </vbox>
  7. <vbox margin="true" spacing="true" stylename="group-panel">
  8. <textField caption="Field Three" width="100%"/>
  9. <textField caption="Field Four" width="100%"/>
  10. <button caption="Button"/>
  11. </vbox>
  12. </cssLayout>

modules/web/themes/halo/halo-ext.scss 文件的内容 (参考 扩展现有主题 创建这个文件):

  1. /* Define your theme modifications inside next mixin */
  2. @mixin halo-ext {
  3. @include halo;
  4. .responsive-container {
  5. &[width-range~="0-900px"] {
  6. .group-panel {
  7. width: 100% !important;
  8. }
  9. }
  10. &[width-range~="901px-"] {
  11. .group-panel {
  12. width: 50% !important;
  13. }
  14. }
  15. }
  16. }
  • stylename 属性允许在 XML 描述或界面控制器中为 CssLayout 组件设置预定义样式。

    • v-component-group 样式用于创建组件分组,即一行无缝连接的组件:

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

      gui cssLayout 3

    • well 样式使窗口的外看起来带有下沉阴影效果。

    • card 样式使布局看起来像卡片。与嵌套的具有属性 stylename="v-panel-caption" 的布局组合使用,可以创建复杂的组合布局,例如:

      1. <cssLayout height="300px"
      2. stylename="card"
      3. width="300px">
      4. <hbox stylename="v-panel-caption"
      5. width="100%">
      6. <label value="Widget caption"/>
      7. <button align="MIDDLE_RIGHT"
      8. icon="font-icon:EXPAND"
      9. stylename="borderless-colored"/>
      10. </hbox>
      11. <vbox height="100%">
      12. <label value="Panel content"/>
      13. </vbox>
      14. </cssLayout>

      效果如下:

      gui cssLayout 4


cssLayout 的属性

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

API

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