如何在 vaadin 中为按钮标题的字母加下划线？

Question

我在我的 Vaadin 应用程序中使用键盘快捷键。所以我想突出显示按钮标题中的一个字母。下划线可能是标题的第一个或第二个或第三个字母。

我可以使用 CSS 的 "first-letter" 属性在第一个字母下划线。如何给第二个或第三个字母加下划线？

NativeButton btn = new NativeButton("Edit");
btn.addStyleName("myunderline");

.mytheme .myunderline.v-nativebutton::first-letter {
     text-decoration: underline;
}

有什么解决办法吗？

谢谢！！！

Answer 1

看起来没有简单的 CSS 解决方案，基于来自 Vaadin 论坛的 This Answer where someone is trying to do the same, and This Answer。

基本上，最简单的选择是将要加下划线的字母包裹在其自己的应用下划线的元素中：

<button ...>Te<span class=underline>x</span>t</button>

... 或者类似的东西。上面的第一个 link 有一个答案，它引用了许多其他 JS 库（lettering.js、nth-everything-css），这可能会帮助你。

Answer 2

可以在创建快捷方式侦听器时使用&符号表示。

根据 Vaadin 文档： https://vaadin.com/docs/-/part/framework/advanced/advanced-shortcuts.html

// A field with Alt+A bound to it, using shorthand notation
TextField address = new TextField("Address (Alt+A)");
address.addShortcutListener(
        new AbstractField.FocusShortcut(address,  "&Address"));

希望对您有所帮助。

Answer 3

So I want to highlight one letter in button caption...

您没有指定正在使用的 vaadin 版本。但最新的 vaadin 7 (> 7.4) 版本在 Button 标题中支持 HTML。

NativeButton nb = new NativeButton("<u>E</u>dit");
nb.setCaptionAsHtml(true);

如何在 vaadin 中为按钮标题的字母加下划线？

how to underline a letter of button caption in vaadin?

css

vaadin