Wie unterstreichen Sie einen Buchstaben der Tastenbeschriftung in Vaadin?

Question

Ich verwende Tastaturkürzel in meiner Vaadin-Anwendung. Also möchte ich einen Buchstaben in der Tastenbeschriftung hervorheben. Die Unterstreichung kann für den ersten oder zweiten oder dritten Buchstaben der Überschrift sein.

Ich bin in der Lage, den ersten Buchstaben zu unterstreichen, indem Sie die Eigenschaft "first-letter" von CSS verwenden. Wie unterstreichen Sie den zweiten oder dritten Buchstaben?

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

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

Gibt es eine Lösung?

Vielen Dank !!!

Answer 1

Deshalb möchte ich einen Brief in Schaltfläche Beschriftung markieren ...

Sie nicht die Vaadin Version angegeben haben, die Sie verwenden. Aber letzte vaadin 7 (> 7.4) Versionen unterstützen HTML in Button Beschriftung.

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

Answer 2

Sieht so aus, als gäbe es keine einfache CSS-Lösung, basierend auf This Answer, wo jemand versucht, das gleiche zu tun, und This Answer von den Vaadin-Foren.

Grundsätzlich Ihre einfachste Möglichkeit ist, den Brief, den Sie in ihrem eigenen Element zu unterstreichen wollen wickeln, die die unterstrichenen gilt:

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

... oder etwas in diese Richtung. Der erste Link oben hat eine Antwort, die auf eine Reihe anderer JS-Bibliotheken (latching.js, nth-everything-css) verweist, die Ihnen vielleicht helfen könnten.

Answer 3

Ist möglich, es während der Erstellung des Shortcut-Listeners mit dem Symbol & anzugeben.

Nach Vaadin docs: 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")); 

Hoffe, es hilft.