Question

在模板中使用@helper.input ....时，默认css的示例是：

<dl class="error" id="age_field">
    <dt><label for="age">Age:</label></dt>
    <dd><input type="text" name="age" id="age" value=""></dd>
    <dd class="error">This field is required!</dd>
    <dd class="error">Another error</dd>
    <dd class="info">Required</dd>
    <dd class="info">Another constraint</dd>
</dl>

如何自定义？

感谢。

Answer 1

如果您的目标只是将类应用于输入帮助程序，则可以使用以下代码段执行此操作：

@helper.inputText(myForm("username"), 'class -> "myClass", 'size -> 30)

如果要设置错误过程的样式，则需要将FieldConstructor放在一起，它基本上用作默认输入助手的替换模板。

这可以通过创建模板来完成：

myFieldConstructorTemplate.scala.html

@(elements: helper.FieldElements)

<div class="@if(elements.hasErrors) {error}">
    <label for="@elements.id">@elements.label</label>
    <div class="input">
        @elements.input
        <span class="myErrorClass">@elements.errors.mkString(", ")</span>
        <span class="myHelpClass">@elements.infos.mkString(", ")</span> 
    </div>
</div>

将其导入您要在其中使用的模板：

@implicitField = @{ FieldConstructor(myFieldConstructorTemplate.f) }

@inputText(myForm("username"))

来源：Play API Docs

我该如何自定义表单css？

1 个答案:

myFieldConstructorTemplate.scala.html