Question

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

例如在图片中：

如果我想将下面的（分开的）checkBox设置为符合上述一次，有没有办法做到这一点？

马尔科

Answer 1

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

与Checkbox字段对应的代码是这样的：

  <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模块和宏。这篇文章：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>

Answer 2

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

在田野上侦察Eclipse霓虹边缘

2 个答案: