Question

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

我可以使用＆＃34;第一个字母＆＃34;来强调第一个字母。 CSS的属性。如何强调第二或第三封信？

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

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

有没有解决方案？

三江源!!!

Answer 1

所以我想在按钮标题中突出显示一个字母......

您尚未指定正在使用的vaadin版本。但最新的vaadin 7（＆gt; 7.4 ）版本支持Button标题中的HTML。

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

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

看起来没有简单的CSS解决方案，基于This Answer，有人试图做同样的事情，以及来自Vaadin论坛的This Answer。

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

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

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

如何在vaadin中强调按钮标题的字母？

3 个答案: