Vaadin 输入字段，带有用于帮助/信息、验证和输入助手的内联图标按钮答案

【问题标题】：Vaadin input fields with inline icon buttons for help/info, validation and input helpersVaadin 输入字段，带有用于帮助/信息、验证和输入助手的内联图标按钮
【发布时间】：2018-02-04 07:08:58
【问题描述】：

我需要在 Vaadin 8（或更高版本）中找到一种可靠的方法来将图标按钮添加到字段、文本区域甚至复选框和可能的标签。

是否已经有一些我可以利用的内置支持？例如，我注意到 Vaadin 如何在字段旁边显示带有红色感叹号的组件错误 - 该机制是否以某种方式可访问和可扩展？

您是否实现了类似的东西？您能否分享一些关于如何实现这一目标的一般战略建议？

理想情况下，这些图标会显示在字段内，但我可以忍受它们显示在输入旁边，只要它不会完全破坏页面布局。

这些将用于显示：

弹出帮助的帮助按钮
显示验证信息的验证按钮（警告或错误）
帮助选择输入的输入帮助按钮（例如，弹出日历或其他实体选择对话框）
用于清除输入的清除按钮

基本上，我希望像 Vaadin 一样已经为带有日历图标的 DateField 实现了相同的功能，除了我需要其中几个按钮，并且我需要能够控制它们（它们应该显示在右侧边）：

【问题讨论】：

... icons would show inside the field, I could live with them being shown next to the input. 您是否尝试在输入旁边添加标准按钮？使用 CSS，您可以将它们合并到一个布局中：查看这个答案以获取几个示例：stackoverflow.com/questions/44007835/…

标签： validation vaadin vaadin8

【解决方案1】：

我决定使用Composite 或CustomComponent 创建自定义组件。

自定义组件的根是HorizontalLayout，我将所需的按钮放在输入字段旁边。

这种方法还允许我包装 Label、ComboBox、CheckBox、DateField、PasswordField 等。

如果我决定添加其他标记（例如脏/修改标记或必需的输入标记），它也是可扩展的。

【讨论】：

【解决方案2】：

在您的问题中，您说“... 字段的图标按钮，文本区域...”。

对于字段，最好使用com.vaadin.ui.CustomField 而不是Composite 或CustomComponent。

【讨论】：

谢谢，我不知道这门课。我去看看。