具有自定义内容的 Vaadin 选项卡

Posted 2023-02-23

【中文标题】具有自定义内容的 Vaadin 选项卡

【英文标题】：Vaadin tabs with custom content

【发布时间】：2019-10-09 00:07:37

【问题描述】：

我有一个带有自定义内容的 Vaadin 选项卡组件。在某些选项卡中，按钮是由简单文本组成的。当我使用键盘导航选项卡组件时，我可以使用箭头键导航选项卡。

当我想激活标签内的按钮时，我需要再次按tab键来设置tabindex从标签到按钮。

如何在不按两次 Tab 键的情况下使用键盘导航激活按钮？

在 vaadin 选项卡演示中，有一个 example of a tab with custom content。选项卡中没有按钮，而是有一个复选框，但问题是一样的。

【问题讨论】：

您引用了一个 Java 示例，但您的标签建议使用 javascript。这不是偶然的，你真的想要 JS，对吧？

是的，带有自定义内容的选项卡的示例仅在Java示例中。您可以通过单击左侧导航中的 html 按钮切换到 HTML（Web 组件）示例。

我的第一个想法是，如果选项卡有一个子按钮，则将活动选项卡的 tabindex 设置为 -1。但我不知道这是否可行:-(

【参考方案1】：

我已经解决了这个问题。现在我可以用键盘激活选项卡内的按钮了。

我在标准vaadin-tab web component中找到了我的问题的答案

在_onKeyup 函数中，它们对选项卡内的锚元素执行完全相同的操作。

在我的 Web 组件中，我添加了 _onKeyup 函数并修改了选择器以使用 vaadin 按钮而不是锚元素：

_onKeyup(event) 
          const willClick = this.hasAttribute('active');

          super._onKeyup(event);

          if (willClick) 
            const slottedButton = this.querySelector('vaadin-button');
            if (slottedButton) 
              slottedButton.click();