将自定义 HTML 属性添加到 Grav 生成的表单的按钮
Add custom HTML attribute to buttons of a Grav generated form
我创建了一个带有以下页脚的 Bootstrap 表单:
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-bs-dismiss="modal" // <----------------------
>Close
</button>
<button type="button" class="btn btn-primary">Send</button>
</div>
在 Grav 中,我创建了一个样式类似于 Bootstrap 表单的表单。我用的是official documentation。要关闭模式和表单,我需要将自定义属性 data-bs-dismiss="modal"
添加到由 Grav 生成的按钮:
buttons:
-
type: reset
value: Cancel
classes: btn btn-secondary mx-3
attributes: data-bs-dismiss="modal" <-------- add custom attribute how?
-
type: submit
value:
classes: btn btn-primary
process: ...
我的示例代码不起作用。
如何在表单 frontmatter 中添加自定义属性,使其由 Grav 使用按钮生成?
没有文档说明 Grav 表单插件接受了哪些附加属性或值,所以我不知所措。只需点击屏幕上的任意位置即可,但我不能指望所有不懂技术的用户都知道这一点,所以我还需要一个按钮。
你可以试试下面的方法。
buttons:
submit:
type: submit
value: Submit
classes: btn btn-secondary
attributes:
data-bs-dismiss: modal
reset:
type: reset
value: Reset
生成的元素:
<button type="submit" data-bs-dismiss="modal" class="btn btn btn-secondary">Submit</button>
注:
- 我还没有用Bootstrap
测试过
- 不确定使用 'attributes' 是否有任何副作用,但它似乎有效。
我创建了一个带有以下页脚的 Bootstrap 表单:
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-bs-dismiss="modal" // <----------------------
>Close
</button>
<button type="button" class="btn btn-primary">Send</button>
</div>
在 Grav 中,我创建了一个样式类似于 Bootstrap 表单的表单。我用的是official documentation。要关闭模式和表单,我需要将自定义属性 data-bs-dismiss="modal"
添加到由 Grav 生成的按钮:
buttons:
-
type: reset
value: Cancel
classes: btn btn-secondary mx-3
attributes: data-bs-dismiss="modal" <-------- add custom attribute how?
-
type: submit
value:
classes: btn btn-primary
process: ...
我的示例代码不起作用。
如何在表单 frontmatter 中添加自定义属性,使其由 Grav 使用按钮生成?
没有文档说明 Grav 表单插件接受了哪些附加属性或值,所以我不知所措。只需点击屏幕上的任意位置即可,但我不能指望所有不懂技术的用户都知道这一点,所以我还需要一个按钮。
你可以试试下面的方法。
buttons:
submit:
type: submit
value: Submit
classes: btn btn-secondary
attributes:
data-bs-dismiss: modal
reset:
type: reset
value: Reset
生成的元素:
<button type="submit" data-bs-dismiss="modal" class="btn btn btn-secondary">Submit</button>
注:
- 我还没有用Bootstrap 测试过
- 不确定使用 'attributes' 是否有任何副作用,但它似乎有效。