Question

我是vaadin的新手，我创建了两个标签的标签页，一个带有图表，另一个带有一些信息，我的问题是如何在标签的右上角（同一行）添加组件（组合框，标签）。

final TabSheet tabSheet = new TabSheet();
    tabSheet.setSizeFull();
    tabSheet.addTab(rightAndLowerPanels, "Graphs");
    tabSheet.addTab(new Label("<b>Haiiiiiiiiiiiii</b>", ContentMode.HTML), "Message");

实施例;
TAB1 | TAB2 我想在此添加
我无法发布此问题的图像提前致谢

Answer 1

虽然组件本身不支持此功能，但可以通过使用css设置组件绝对位置来实现此目的，以便将其悬停在标签页上的正确位置。

包含tabseet和悬停组件的div（布局）应设置为position: relative;，以便从组件的角落而不是浏览器设置绝对位置，然后将组合框的位置设置为这样的位置：position:absolute; right: 3px; top: 3px;。

如果您想添加一些检查以确定组件位置，您甚至可以使用Vaadin的AbsoluteLayout或CssLayout。

AbsoluteLayout al = new AbsoluteLayout();
al.addStyleName("tab-sheet-layout"); // position: relative;
al.addComponent(new TabSheet(new Label("1"),new Label("2")));
al.addComponent(new ComboBox(), "right: 5px; top: 5px;");

或使用CssLayout：

public static class TabSheetLayout extends CssLayout {
    public TabSheetLayout() {
        addStyleName("tab-sheet-layout"); // position: relative;
        addComponent(new TabSheet(new Label("1"),new Label("2")));
        addComponent(new ComboBox());
    }

    @Override
    protected String getCss(Component c) {
        if (c instanceof ComboBox) { // do some check here
            return "position:absolute; right: 3px; top: 3px;";
        }
        return null;
    }  
}

但是，您应该注意，如果您将屏幕调整得足够小，组合框将悬停在标签上，因此您需要通过修复布局宽度或其他方法来停止此操作。

如何在标签页中的标签后使用额外空格

1 个答案: