java - 使用 Vaadin 14 的 RTL 支持

Question

我尝试用希伯来语构建网络应用程序。但所有组件或导航栏都是 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 年上半年得到修复。