使用 Vaadin 14 的 RTL 支持答案

【问题标题】：RTL Support Using Vaadin 14使用 Vaadin 14 的 RTL 支持
【发布时间】：2019-09-29 12:28:30
【问题描述】：

我尝试用希伯来语构建网络应用程序。但所有组件或导航栏都是 LTR。如何使我的 NavBar 或我的所有网站成为 RTL？

还有一个问题，我可以更改导航栏的样式吗？

@Viewport("width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes, viewport-fit=cover")
@Theme(Lumo.class)
@Route
@PWA(name = "SimpleIT", shortName = "SimpeIT")
public class MainView extends AppLayout {
    public static final String ITM_DASHBOARD = "DashBoard";
    private Map<Tab, Component> tab2Workspace = new HashMap<>();

    public MainView() {
       // setPrimarySection(Section.DRAWER);
        Image img = new Image("https://i.imgur" +
                ".com/GPpnszs.png", "Vaadin Logo");
        img.setHeight("75px");
        addToNavbar(new MenuBar(), img);
    Tabs menu = new Tabs(dashBoard()
            ,new Tab("Customers"),new Tab("Todo"),new Tab("Tickets"));
    menu.setOrientation(Tabs.Orientation.HORIZONTAL);
        menu.addSelectedChangeListener(event -> {
            final Tab selectedTab = event.getSelectedTab();
            final Component component = tab2Workspace.get(selectedTab);
            setContent(component);
        });

        addToNavbar(menu);
        this.setPrimarySection(Section.NAVBAR);
        setContent(new Span("click in the menu ;-) , you will see me never again.."));





    }

    private Tab dashBoard() {
        final Span label = new Span("DashBoard");
        final Icon icon  = DASHBOARD.create();
        final Tab  tab   = new Tab(new HorizontalLayout(icon,label));
        tab2Workspace.put(tab, new DashBoardView());
        return tab;

    }
}

【问题讨论】：

标签： java spring-boot vaadin vaadin8

【解决方案1】：

您可以通过将 CSS 规则 direction:rtl 添加到正文来转换 RTL。或者，您可以使用为您执行此操作的 RTL 模式插件：https://vaadin.com/directory/component/rtl-mode/discussions

许多组件在 RTL 模式下工作，但有些仍然存在一些问题。它们有望在 2020 年上半年得到修复。

【讨论】：

【解决方案2】：

更新信息：自 Vaadin 14.3 (LTS) 和 Vaadin 17 起正式支持 RTL：https://vaadin.com/blog/localization-gets-an-update-with-right-to-left-rtl-support

【讨论】：