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?
Related
I am working on my first extensive MERN project and part of the functionality involves specific components (like a checkbox to-do list, images, text, ets...) that then allow the user to build out different pages, larger multi-checkbox aggregation lists, etc... Think of it as something like https://www.notion.so/notes.
Building the individual react components and configuring them on static pages is straightforward. However, I'm having a hard time conceptually understanding how to take those components and then dynamically allow users to build out custom pages using them.
In a broad sense, how do page builders functionally work?
Here is a broad idea. You will need a page where the left side lists all your UI components [thump nails] and the right side area for dragging and dropping those compoents. You will need a grid system with rows and columns components like Bootstrap Grid or MUI Grid dividing space into 12 portions for the layout of any page. You should let each dropped component give an option to accept its props so users can set it. Setting props can be another component.
When they save the design you should get the react component tree of what they are saving along with all properties and save it in your DB. You should be able to generate both the design view and the actual view with those saved data.
It was easy to say but I know it's a lot of work. I have seen similar work done using Angular and .NET.
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
I am trying to understand how to structure parts of my angular.js app when using angular-ui-router. I have followed this article and created a demo app.
My app has a home page with a top navbar. and a view (say view1) which has a left vertical navbar. and a right pane in which I'll show the details of the item selected in the left navbar.
Currently I have put the top navbar in a template and loading it using ng-include in header tag. After that I have a ui-view.
What I need to know is, am I doing it correctly? I have Googled a lot and tried to understand the functionalities of ui-router and its ui-views. But just need to be sure if I'm following the standard way.
There's not any specific piece of code that I could show so not posting any. Please provide some information on the same or if any resources that explain these concepts in detail.
I assumed you had already done some research on ui-router. So I just recommend one tutorial that I found that it was useful for me when I war trying to learn ui-route. https://egghead.io/lessons/angularjs-introduction-ui-router The website has a lot of nice tutorial for angular, enjoy.
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.
I want to create a tab control, which supports both static and dynamic tabs.
The dynamic tabs are of N different types, and display their contents according to some id.
I would like to do all that using routing (ui-router probably), since I would like deep linking and all the other benefits that come with it.
I've been trying to find an example on the web, but couldn't find any (I did find some questions resembling this one on other sites though, alas, they were not answered).
The closest thing I found was ui-router-extras which offer functionality that seem to be a good starting place, however, I'm still not sure if what I would like to achieve would be possible using it.
Any ideas if this is possible, any guidelines or suggestions on how to get started ?
I think the best way to create this if you have a lot of tabs would be using a controller for the tabs which has the scope for all sections you want to have, and then a view which ng-repeats through all the tabs, populating your view.
I recommend for the style that you try bootstrap's nav-tabs if they fit your design (http://getbootstrap.com/components/#nav-tabs)
If you have few sections, you could just hardcode the tabs into the view, each with it's ui-sref.