Question

我试图在希伯来语中构建Web应用程序。但所有组件或导航栏均为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;

    }
}

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：https://vaadin.com/blog/localization-gets-an-update-with-right-to-left-rtl-support

以来，正式支持RTL。

使用Vaddin的RTL支持14

2 个答案: