使用 Vaadin 14 的 RTL 支持

Question

我正在尝试用希伯来语构建 Web 应用程序。但所有组件或导航栏都是 LTR。我怎样才能让我的导航栏或我的所有网站成为 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;

    }
}

Answer 1

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

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

Answer 2

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

使用 Vaadin 14 的 RTL 支持

RTL Support Using Vaadin 14

java

spring-boot

vaadin

vaadin8