所需的提交指示器未显示vaadin Flow中的标签文本是否为空

发布于 2025-02-10 00:48:20 字数 352 浏览 3 评论 0原文

摘要下方是vaadin流量代码：

    ComboBox<String> shipmentStatus = new ComboBox<>();
    shipmentStatus.setPlaceholder("Shipment  Status");
    shipmentStatus.setId("shipmentStatus");
    shipmentStatus.setRequired(true);
    shipmentStatus.setRequiredIndicatorVisible(true);

由于标签文本为空，因此所需的指示器未显示。我们如何在左侧显示它？先感谢您。

原文

Below snippet is a piece of Vaadin Flow code:

    ComboBox<String> shipmentStatus = new ComboBox<>();
    shipmentStatus.setPlaceholder("Shipment  Status");
    shipmentStatus.setId("shipmentStatus");
    shipmentStatus.setRequired(true);
    shipmentStatus.setRequiredIndicatorVisible(true);

Because the label text is empty, the required indicator does not show. How can we make it show at left side? Thank you in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

删除→记忆 2025-02-17 00:48:21

如果您需要认真对待可访问性，则需要为该领域提供可访问的标签。

占位符并不能替代适当的标签。最好根本不使用占位符（有些用户可以将其混淆以填充值），或者使用它来显示预期输入的示例（例如，日期模式）。

如果您无法在字段上方/旁边显示视觉标签，则可以在组件上设置aria-label属性：

shipmentStatus.getElement().setAttribute("aria-label", "Shipment status");

在您的情况下，我认为设置相同的字符串是可以接受的作为占位符，以指示视力用户的字段目的。

对于所需的字段指示灯，我相信您必须手动重新创建它，因为您不使用内置标签。我会将字段包裹在水平布局中，并在其之后添加适当的符号/角色。如果您想使其看起来像默认的Lumo主题指示器，则是这些样式： https://github.com/vaadin/web-components/web-components/blob/master/packages/vaadin-lumo-styles/mixins/mixins/mixins/required-field .js＃l43-l55

In case you need to take accessibility seriously, you need to provide an accessible label for the field.

A placeholder is not a replacement for a proper label. It’s better to either not use a placeholder at all (some users can confuse it for a filled-in value), or use it to show an example of the expected input (for example, a date pattern).

If you can’t show a visual label above/next to the field, you can set the aria-label attribute on the component:

shipmentStatus.getElement().setAttribute("aria-label", "Shipment status");

In your case, I think it is be acceptable to set the same string as the placeholder, to indicate the purpose of the field for sighted users.

For the required field indicator, I believe you will have to recreate it manually since you are not using the built-in label. I would wrap the field in a horizontal layout and add an appropriately styled symbol/character after it. If you want to make it look like the default Lumo theme indicator, here are those styles: https://github.com/vaadin/web-components/blob/master/packages/vaadin-lumo-styles/mixins/required-field.js#L43-L55

回复收藏 0 原文

~没有更多了~