I need to add two sidebar drawers(left side and right side) for my design using Google MDL.But mdl layout doesn't support for add two sidebar drawers.How can i do this ?.
First of all, having two sidebars drawers is a bad idea usability-wise:
You should consider the following options as per the Material Design Guidelines on top-level view strategies:
Focus on a single view with embedded navigation
Use tabs to switch between a small number of equally important views
Manage more complex structure through a left navigation drawer.
If you have multiple views that would require you to do this, your better of considering tabs.
See UX designers: Side drawer navigation could be costing you half your user engagement
.....if your app has multiple views that users will engage with somewhat equally, then side navigation could be costing you a great deal of your potential user engagement, and interaction with those part of the app accessed via the side menu.
Was researching 2 drawers myself when I came across this question. This is possible, and a good design in certain applications and is actually in the roadmap for material design lite version 2. Please read the Github thread here https://github.com/google/material-design-lite/issues/1597
There are 2 hosted examples of this in action the best is in use in Rich Media Gallery filter option, that is a Google Material Design Showcase.
http://richmediagallery.com/tools/template-database
The other example is a fiddle
Related
I am actually trying to design an ERP web application, currently working with Angular Material, but seems each input element takes a lot of space(vertical height) on the page, so if I have have 15 input element then I have to scroll down to see and fill. Loved Angular Material but want to try something similar which is free(of course) and best compatibility with angularjs.
Thanks.
You can use St table with pagination so that your view is broken into multiple pages, or create your own pagination as well.
It is best practice to make lesser bindings/watchers per page.
I am trying to create an interface with tabbed navigation to navigate through different sections of an app, i.e. in the case of a news app as: Articles, Videos, Pictures. now along with that tabbed navigation I also want a side menu present for main categories relating to news articles, i.e. provinces, country, world, etc...
Now I have the tabbed navigation working along with routing but I cannot seem to get the routing working on the side menu.
Is it possible to have two abstract states in the view? Or is there a way to statically link the side menu to get it working?
I have seen a lot of questions and solutions to this problem however the solutions I have seen have the side menu and tabs using the same routing and linking to the same pages...
obviously I cannot understand the logic behind how one would implement this sort of setup and was wondering if anyone had any insight into this or has any links to articles that deal with this problem?
Im using Bootstrap and AngularJS with .Net Web API for my backend services. Im still a bit new to AngularJS. When considering the different sections of the layout, my app directive is currently at the container level named "Bottom". However, my individual views will be in the area named "main-content" (these are div boundaries).
The layout also contains an area named "sidebar" which will only be used on one page, the rest of my pages will expand "content-wrapper" from 10 to the full 12 column width of the page.
So Im trying to decide on how to use either use one layout (in terms of our MVC _layout.cshtml typically used for the template) for both types of pages, or use two separate layouts. The latter seems "cleaner", since trying to use a single layout for all scenarios seems more trouble. I think Ive used separate master pages with ASP.Net web forms in the past in these cases. Same idea here? I think this would make things cleaner also with regards to setting up the AngularJS code, as I can separate the two page types with different modules with their own controllers. Does this seem like a good approach, considering not just the mvc layout, but any impact on Angular/Javascript code?
TL;DR: Use one layout CSHTML page.
It's hard to give a confident recommendation without having a deeper knowledge of your application. Ultimately, it's your decision to make based on the information you have.
That being said, if indeed that sidebar is only used on one page, it should be considered part of that page. With that in mind, Container in the image you attached would serve as the host element for the router's view directive and the page with the sidebar will have that sidebar in its template.
If, however, the sidebar may appear on other pages in the future, I would simply hide it based on the current page with the view directive on the content-wrapper in your example. I have a similar situation in an app I'm working in which the sidebar behaves as a sort of internal navigation. If the current page does not have any sensible links to put in that sidebar, we hide it. Something like that may work for you in this case.
In either case, I would recommend against using multiple CSHTML layout pages because of the potential strangeness in the user's experience with some pages using a nice, AJAX-driven navigation and others using an old-school, "white-flash" kind of navigation.
Take a look at ui-router, which is an alternative to the default routing that Angular comes with. It allows you to have multiple views, the content of which can change based on the route. If you are used to using a templating system to layout applications pages and your pages have a generalized sort of layout (ie all pages have a top nav, a main body, and a footer, or something similar) then ui-router goes a long way towards making this much easier in Angular.
In the past I have used a lot of ExtJS to make dashboards. One of my favorite features is the full-screen viewport with border layout which helps you to split up a dashboard into panels on the left, right, top and bottom, without creating scrollbars everywhere. see e.g. these examples.
Is there a JS library or jQuery plugin that does just this? I am making a dashboard and want to split the screen into panels, but ExtJS is a bit bloated and overkill only to use for the boarder layout.
Ext JS is a great solution for this but if you are looking for something else then the jQuery UI Layout Plugin may be the option you want.
Example:
http://layout.jquery-dev.net/demos/simple.html
Project Home Page:
http://layout.jquery-dev.net/
Twitter Bootstrap provides help for the layout but you have to follow a certain design and am not sure it manages fullscreen apps with no scroll.
I think it's worth a look though.
You may look at Dojo which now integrates well with jquery and has nice widgets (tabs placed on the left for example, grids) and a good layout system.
I am impressed by ExtJS Samples/Demos especially the Border Layout examples. Is it feasible using ExtJS or other frameworks/libraries to build a viable web app that dynamically creates (say 10) new panels; something like how Eclipse builds and docks new split panels?.
These container panels would contain tabbed widgets and the panels would need to be maximizable/minimizable and closed completely if the last tab member is closed.
(again like how Eclipse closes it’s non-editor views).
I assume that CSS styles would have to be programatically added to the DOM elements that make up the container panels but think that you could use style sheets for member layout(members could be document content or have their own widgets);
I suspect that performance would be poor and that there would be many problems in faithfully rendering the members style sheets.
I have no interest in writing an IDE in js but I am interested in knowing the limits of this approach for creating a ‘reasonably’ extensible app.
I want to provide additional context to my question.
Currently we have a desktop app in Java Swing which allows us create panels dynamically and has the features I outlined and works as follows.
Consider a simple Explorer panel on the left and an Editor panel on the right.
Editing work can be for 4 different regions and all the work for a single region is grouped in tabs in the one panel. When the user is working on a region then other region editor panels are typically minimized; visually apparent as icons on a docking panel to the right of the Editor panel.
There is total flexibility in letting the user switch working to a different region and in some cases even having 2 Editor panels open so that he/she can compare (and even do limited drag&drop from) work in one region to another. When 2 (or more) Editor panels are open they stack vertically under one another. There is no real need to have more than 2 editors open but it is allowed. We have logic that prevents mixing region views in the same editing container.
The current app performs well, allows multiple tabbed views and permits users to segregate their work. More importantly it has allowed us to introduce and use different view ‘types’ providing the extensibilty I mentioned.
Before I get any responses saying that the design is wrong and that I should consider different layouts (Accordion type panels on the left come to mind) let me reiterate that I am interested in knowing the viability of this approach for a web app. whether or not we pursue this approach.
Trigger-happy dismissals of ‘subjective’ content are something I am willing to absorb.
That's an immensely broad question. Technically, I would say that the answer is yes, but your question suggests that you come from a world where the overwhelming paradigm is desktop applications. Trying to impose that dogma on a web context is possible, but suboptimal. You could probably do much better by embracing this media, which is radically different from the one you are familiar with. That is a tall order though.
Somewhere halfway in between, there are some gui toolkits that will allow you to build applications in a browser context, that in many respects act like traditional desktop applications. Google Web Toolkit might be of interest to you, since you use Java. Or, as you have found out your self, ExtJS also belongs in this end of the spectrum. You will have to learn a bit of Javascript, but the programming model is close to what you know from Swing.