Comments (3)
Hello Borax I don't know how much of the API you already have discovered and if you found the following method.
public class DemoUI extends UI {
...
protected void init(VaadinRequest request) {
setContent(NavigationDrawerBuilder.get()
.withVariant( ... ) // <-- this one
.build());
}
}
And if one of the offered Variants satisfy you.
Now to your question:
I do not recommend removing the app bar from because from a UX point of view, about no user will be able to figure out how to open the drawer if you remove the AppBar.
But If you really want no app bar 😉 yes it is possible to do so:
1. You could either use the variant LEFT or LEFT_OVERLAY and hide the App Bar by setting some scss variables and applying some styles in a custom theme:
$app-bar-height: 0px;
$app-bar-shadow: none;
@import ...
@mixin mytheme {
...
app-toolbar {
display: none;
}
...
}
2. (This requires more work but is a cleaner solution) Or create your own Custom Layout and use your own template.
Checkout the package com.github.appreciated.app.layout.drawer, the associated Resource folder and /webapp/VAADIN/addons/app-layout figure out how I made polymer app-layout working and try to mimic it and make only app-drawer work. It is actually not that complicated than it may sounds. The Examples are very straight forward.
from vaadin-app-layout.
Thanks, I'll look into it. You are correct about the appbar, but my problem is that I already have one in my project :) I just need a drawer that will play nice with my appbar.
from vaadin-app-layout.
@borax1974 Ah yeah you are right didn't think about that usecase 🙂 you then might want to add a button to that app-bar which calls the following then the UX does not suffer
AbstractNavigationDrawer::toggleDrawer()
from vaadin-app-layout.
Related Issues (20)
- LeftNavigationItem Highlighting is triggered by unrelated Navigation HOT 2
- [4.0.0] Is there any way to have the drawer toggle button visable at any of width HOT 4
- Display Issue with AppLayoutRouterLayout and LeftLayouts.LeftOverlay Vaadin 14 HOT 7
- Support for FontAwesome Iron Iconset HOT 3
- Why are the drawer at the right side, when I want it to be on the left side? HOT 2
- A few questions HOT 5
- Separate drawer header, default, and footer elements
- On vaadin 14.6 the style are not properly loaded HOT 1
- Avoid showing notifications at startup in vaadin-app-layout
- How to create a sticky header HOT 1
- Dark Mode and Live Reload don't works on Vaadin 21.0.4
- Vaadin 22.x support HOT 7
- Iron-Icons not visible 21.0.0-beta1 on Vaadin 21.0.8 (production mode)
- Why does the drawer not shows up? HOT 2
- Couldn't find the definition of the element with tag 'app-layout-left-responsive' in any template file declared using '@JsModule'
- Setting a new icon to LeftIconItem, the previous one is not removed correctly
- Vaadin 23: ERROR: Could not resolve "@vaadin/vaadin-element-mixin" HOT 3
- Change AppToolBar Background Color HOT 5
- Reduce jar size
- Change App Layout Style
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vaadin-app-layout.