导航栏中的wicket-bootstrap面包屑答案

【问题标题】：wicket-bootstrap breadcrumb in navbar导航栏中的wicket-bootstrap面包屑
【发布时间】：2015-12-13 00:27:50
【问题描述】：

是否可以使用wicket-bootstrap 将面包屑添加到导航栏？

BasePage.java

public BasePage(final PageParameters params) {
    super(params);
    add(createNavbar("navbar"));
    add(new Footer("footer"));
    add(newBreadcrumb("breadcrumb"));
}

protected Navbar createNavbar(String markupId) {
    Navbar navbar = new Navbar(markupId);

    navbar.setPosition(Navbar.Position.TOP);
    navbar.setInverted(true);

    navbar.setBrandName(Model.of("Title"));
    navbar.add(newBreadcrumb("breadcrumb"));

    return navbar;
}

protected Component newBreadcrumb(String markupId) {
    Breadcrumb breadcrumb = new Breadcrumb(markupId);
    breadcrumb.setActive(new BreadCrumbPanel("breadcrumbid", breadcrumb) {
        /**
         * 
         */
        private static final long serialVersionUID = 165186734860620567L;

        @Override
        public IModel<String> getTitle() {
            return Model.of("Home");
        }
    });
    return breadcrumb;
}

BasePage.html

<div wicket:id="navbar" class="bs-docs-nav">
    <ul wicket:id="breadcrumb"></ul>
</div>

但我仍然收到错误，我无法在#navbar 标签中添加任何内容

For Navbar Components only raw markup is allow in between the tags but not other Wicket Component.

【问题讨论】：

标签： java html css wicket

【解决方案1】：

Navbar 组件与 INavbarComponent 作为子组件一起使用。

你应该这样做：

Navbar navbar = new Navbar("id");
navbar.addComponents(new INavbarComponent() {
    @Override
    public Component create(String markupId) {
        return new NavbarButton(Page.class, Model.of("Link Name"));
    }

    @Override
    public Navbar.ComponentPosition getPosition() {
        return Navbar.ComponentPosition.LEFT;
    }
});

这取自示例模块中的IssuesPage。

如果这没有帮助，那么您的最后一个选择是将面包屑单独放在标记中。但我想你需要控制active crumb，所以这可能没有帮助。

Bootstrap 导航栏是一个复杂的组件。他们将在第 4 版中对其进行简化。那我希望 Wicket-Bootstrap 也能更简单。

【讨论】：