Scout Eclipse 霓虹灯田地边缘

Question

是否可以在字段周围设置边距。

例如图片：

如果我想设置一次与上面一致的下（分隔）复选框，有什么办法吗？

马尔科

Answer 1

您始终可以使用自定义 CSS：让您的字段实现 IStyleable 并使用 setCssClass() 应用适当的 CSS class。我会尽量避免使用这种像素推送方法。

Answer 2

首先检查 HTML 代码（使用 Chrome）。

复选框字段对应的代码是这样的：

  <div class="form-field check-box-field" 
      data-modelclass="org.eclipse.scout.widgets.client.ui.forms.CheckboxFieldForm$MainBox$ConfigurationBox$CheckboxField"
      data-classid="CheckboxField_org.eclipse.scout.widgets.client.ui.forms.CheckboxFieldForm"
      id="scout.CheckBoxField[1-49]" 
      style="left: 0px; top: 14px; width: 1598px; height: 30px;"
    >
    <div class="field has-inner-alignment halign-left valign-top" style=
    "left: 148px; top: 0px; width: 1420px; height: 30px;">
      <div class="check-box" tabindex="0"></div>
      <div class="label">
        Checkbox
      </div>
    </div>
  </div>

有了CSS你可以做任何可能的事情：

.check-box-field {
    background-color: red;
}

现在因为您不想为所有 CheckBox 字段添加一些自定义 CSS 样式，您可以在 CheckBox 中定义自定义 Css-Class:

  @Order(4)
  public class UnknownCheckBox extends AbstractBooleanField {

    @Override
    protected String getConfiguredCssClass() {
      return "checkbox-under-listbox";
    }
    // ... Some Code ...
  }

现在您添加此 CSS 代码：

.checkbox-under-listbox {
    margin-left: 20px;
}

我已经使用 Widgets 演示应用程序 (org.eclipse.scout.docs repository, releases/5.2.x branch) 实现了这个示例。我在这个文件中添加了我的 css 代码：org.eclipse.scout.widgets.ui.html/src/main/js/widgets/main.css（将所有内容都包含在 main.css 中可能不是最好的方法）。

您可以从此示例中推断出如何向您的应用程序添加额外的 CSS/LESS 模块和宏。这个 post: Inclusion of additional icons from font-awesome 也可能有用。您将得到 main.css 而不是 font.css。

警告：这不是最先进的。

最后这是正常的HTML开发（当然是单页应用），所以你可以做你想做的...

如果你不想使用 LESS 编译器和文件预处理器，你可以简单地在文件夹中添加一个普通的 CSS 文件：

<your_project>.ui.html/src/main/resources/WebContent

假设：

<your_project>.ui.html/src/main/resources/WebContent/my_custom.css

不要忘记在 HTML 索引文件的 <head> 和 </head> 标签之间包含您的 CSS 文件：

<your_project>.ui.html/src/main/resources/WebContent/index.html

类似于：

<head>
  <!-- some code -->
  <link rel="stylesheet" type="text/css" href="my_custom.css">
  <scout:stylesheet src="res/scout-module.css" />
  <!-- some code -->
</head>

Scout Eclipse 霓虹灯田地边缘

Scout Eclipse Neon margin on fields

user-interface

field

margins

eclipse-scout