0

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

例如在图像中：

当前屏幕截图

如果我想设置一次与上述一致的较低（分隔）复选框，有没有办法做到这一点？

所需的屏幕截图

马尔科

4

2 回答 2

2

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

使用 Chrome 检查 Scout Field

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

  <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;
}

Scout CheckBox 红色背景

现在因为您不想为所有 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;
}

我已经使用小部件演示应用程序（ org.eclipse.scout.docs 存储库，releases/5.2.x 分支）实现了这个示例。我在这个文件中添加了我的 css 代码：（org.eclipse.scout.widgets.ui.html/src/main/js/widgets/main.css这可能不是将所有内容都放入的最佳方法main.css）。

您可以从这个示例中推断出如何将额外的 CSS/LESS 模块和宏添加到您的应用程序中。这篇文章：包含来自 font-awesome 的其他图标也可能很有用。您将拥有 amain.css而不是 a font.css。

警告：这不是最先进的。

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

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

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

让我们说：

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

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

<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>
于 2016-02-19T07:34:59.283 回答
1

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

于 2016-02-18T08:53:10.630 回答