how can I add custom applayout design? I see the enum AppLayoutDesign.Custom, but how can I change the CSS file? I want to change the header color (–primary-color). I try to import my own css file (@StyleSheet), but that not work.
Evgeniy Zherebin:
Hello Johannes, thank you for great and very usefull add-on! Please, answer these questions about 2.0.0 version:
How to add badge to menu, like “Home [9+]
" in 1.x version demo (”.add(“Home”, VaadinIcons.HOME, badge, View1.class)")?
Why .addToSection(new LeftClickableComponent(…), FOOTER) not aligned to bottom of AppMenu, like in 1.x version demo?
How to change main color (appbar and active menu items) and other predefined styles of app-layout?
How to reduce font-size on mobile layout (title and menu item caption)?
Hi!
Here are some answers to your questions:
DefaultNotificationHolder notificationHolder = new DefaultNotificationHolder(newStatus -> {/*Do something with it*/});
DefaultBadgeHolder badgeHolder = new DefaultBadgeHolder();
LeftNavigationComponent home = new LeftNavigationComponent("Home", VaadinIcon.HOME.create(), View1.class);
LeftNavigationComponent menu = new LeftNavigationComponent("Menu", VaadinIcon.MENU.create(), View9.class);
notificationHolder.bind(home.getBadge());
badgeHolder.bind(menu.getBadge());
The answers to Question 2,3,4 will change when Version 2.0.1 is released:
The reason why this didn’t work out of the box is that I introduced a webcomponent that does a similar job as the old menu but doesn’t support sticky footer / headers this out of the box. 2.0.1 will at least allow to set a sticky footer again.
Since V2.0.1 inherits now styles from lumo this might not be necessary anymore. You may open an issue on github where we can talk in detail about this.
how can I add custom applayout design? I see the enum AppLayoutDesign.Custom, but how can I change the CSS file? I want to change the header color (–primary-color). I try to import my own css file (@StyleSheet), but that not work.
Greetings Benjamin
The enums in AppLayoutDesign aren’t doing anything, those are leftovers from V1.* sorry for the inconvenience. I’ll open an issue for this. The enum might comeback to add support the material theme.
Instead use the css variables mentioned in my previous answer:
Hi , there is one problem,in the attachment,I want to use style sheet in my view,but is doesn’t works! And when I change the @Route like this: @Route(value=“test”),it can work. How I can use style sheet and “MainAppLayout” at same time?
guoguo guoguo:
Hi , there is one problem,in the attachment,I want to use style sheet in my view,but is doesn’t works! And when I change the @Route like this: @Route(value=“test”),it can work. How I can use style sheet and “MainAppLayout” at same time?
When the MainView Class loads, all its menu items are expanded while I would want it to collapse all menus and their respective menuitems(hide submenus and menuitems) and only show the submenu options only when the user clicks the said menu option.
How can I accomplish that?
Allan The Great:
When the MainView Class loads, all its menu items are expanded while I would want it to collapse all menus and their respective menuitems(hide submenus and menuitems) and only show the submenu options only when the user clicks the said menu option.
How can I accomplish that?
Since the Addon does not support this menu behavior out of the box you will have to close them manually. You can do this f.e. by overwriting the method showRouterLayoutContent in your AppLayoutRouterLayout implementation.
@Override
public void showRouterLayoutContent(HasElement content) {
super.showRouterLayoutContent(content);
getCurrent().getMenuChildren().forEach(component -> component.getChildren().forEach(component1 -> {
closeSubmenus(component1.getChildren());
}));
}
public void closeSubmenus(Stream<Component> menuChildren) {
menuChildren.forEach(component -> {
if (component instanceof NavigationElementContainer) {
closeSubmenus(((NavigationElementContainer) component).getMenuChildren());
if (component instanceof LeftSubmenuComponent) {
component.getElement().callFunction("close");
}
}
});
}
Have a problem that I’m sure was working but suddenly stop and I’m unable to trackdown the change, I’m using spring-boot with spring security for login authentication, on validation the homepage plus autoload AppLayout menu is loaded. However, the menu doesn’t have a menu icon/dropdown, just a backwards link arrow option.
Does the menu components need to sit in the directory/level as the MainAppLayout.class
Hi Adam,
yes this addon comes has Back Navigation support when navigating to a View that is not part of the menu. Please open an issue on Github and describe detailed all your @Route() annotations.
Hi guys, how do you link that DefaultBadgeHolder to the button of another class? like if the button is clicked, it will perform increase/decrease count.
