Two tab navigators in one page in Ionic 2 (beta-11) - ionic-framework

I am trying to find any examples for Ionic 2 where there are 2 Tab navigators in the same page but with no luck.
I currently have 1 Tabber as my root navigators and then I would like to have another tab menu under it (like a sub-menu) which would be visible only on a specific page.
So I added another tabs view in the <ion-content> of that page but that destroyed all my CSS - it moved the ion-content to absolute:0 and would not even show the newly added tabs menu.
It's just as shot in the dark but has anyone managed to achieve something similar to what I am trying?
(I know there are many examples for Ionic 1, but it's not compatible with 2)

It is better to avoid nested tabs. Because nested that layout will become a mess with the css and will be harder to maintain.
Try segments, this will simplify the layout
http://ionicframework.com/docs/v2/components/#segment382

If you really want to do that, you can use select(index|tab) method of Tabs. At first, get the ref of the Tabs. About how to get ref of Tabs, check this post

Related

Setup a notebook with tabs and multiple gtk input fields on each tab using glade

I am an experienced Fortran programmer and have used an in-house UI package for many years with similar concepts to that of glade (3.22). I'm completely new to glade so I must be doing something bad due to a lack of understanding. My glade setup only uses gtkWindow and a gtkNotebook with some child tabs. All I want to do is add multiple fields (boxes and labels mostly) to a tab which covers the complete window area. Then when I switch tabs, I need to see a completely different page with it's own fields, also using the complete window area. Adding just one gtkButton takes up the whole page for the current tab and I cannot add another gtkbutton to that page. How do I add another button to the same page? If this is a stupid question, are there any good videos that demonstrate how to do it please? :)
You can use the option Edit Page from General to edit each of the pages in the glade.
You can change this value, and edit pages one by one, like add some box/grid then add buttons/label.
For adding new pages, right-click on one page and select 'insert page after' or 'insert page before'
download the glade file from there: https://github.com/f4iteightiz/UWR_simulator
edit / look at (this is a notebook with several inputs / buttons all different in each tabs).
you will find few answers to your needs
You have to add a GtkBox or a GtkGrid to your notebook tab. And here you can read a bit on the difference between a box and a grid. There are of course a lot of other containers you could use to pack your widgets (in your case a button) into. Gtk3 only allows one widget per notebook page, so you have to add a multi-child widget to pack multiple widgets per page.

How to implement vertical tabs cocoa app

I want to achieve something like this:
the left side is the tab list or menu list, and the right side is the detail page of this tab. When I select one of the tab, then the content on the right side will change. Since the contents of tabs are totally different, so I think maybe I should use different ViewControllers for different right-side pages, and something like a root controller for the tabs. But I don't know how exactly the app architecture should be, I want to have a simple example of that (maybe something like:
-TabController
-TabOneDetailViewController
-TabTwoDetailViewController)
Thanks.
In macOS this is named sidebar and not vertical tabs. There is an older sample code from Apple which shows you exactly how it should be implemented. https://developer.apple.com/library/archive/samplecode/SidebarDemo/Introduction/Intro.html
To simplify it if you don't need the NSOutlineView functionality you could use NSTableView instead.
Have fun.

Sliding Tab/menu within ionic template

I am trying to insert 'sliding tabs' within a tabs starter. Basically I'm wanting to use the 'starter' tabs at the bottom, but within one of those tabs (template pages) I want to have a sliding menu (https://github.com/leoruhland/ion-slides-tabs). I've tried what I know and can't seem to figure out how to make it work. Any tips would be helpful.
For simple Ionic slider you can refer from this link http://ionicframework.com/docs/api/directive/ionSlideBox/ and for other your sample INstallation is already showing .You can use that directive and can work. I am also using this in my Project.

Is it possible to move the tab bar to left and right direction in iPhone

Im developing a tabbar application.
There are almost 7 tabs in this app.
Usuall when we add more than 5 tabs a "more button"will come and rest of options will come under that "More option".
But i found a very interesting app in app store and they are moving the tabbar to left and right(just like we do in scroll view) like in the image below.
How can i implement this.
Can anyone help me with this please.
Thanks in advance.
As far as I can see, it's 2 custom UIButtons placed over the tabBar that may programmatically rearrange the tab options on their IBActions. What makes me say that is that the highlighted area of the last tab is just normal, and the arrows does not seem as well placed as what Apple could have done by standard.
You can use custom tabBar, like InfiniTabBar, nice and functional.
Project on GitHub:
https://github.com/iosdeveloper/InfiniTabBar

Scrolling TabPanel

I Am trying to create a Tab Panel where I can add and delete tabs on demand.
Where I am getting stuck is that if a potential user adds too many tabs the new tabs go off the screen.
Each Tab is to contain a text area widget where a user may enter text.
Is there any way of horizontally scrolling the just the TabBar and not the whole browser window?
I could use a scroll panel but I was hoping to scrol just the Tabs, not the panel contents.
I cannot see any available method in the com.google.gwt.user.client.ui.TabPanel API that will perform this function and no real way to split the panel.
Help!
It's not what you've asked for, but you might consider using a StackPanel instead of a TabPanel, since if the user can enter a long list of items it's generally better to have vertical scrolling instead of horizontal scrolling.
The gwt TabPanel isn't the greatest, and there's not a real easy way to do what you want. You could take a look at the tab widget in Ext-GWT, which scrolls the tabs, but I don't think extjs is generally a good idea.
There's a bunch of new layout-based widgets arriving with GWT 2.0. Look at TabLayoutPanel. It places tabs in a very wide container inside a div with overflow=hidden. You might be able to add some controls to scroll that container and get the effect you want.
Good luck, and report back if you get something working. GWT really needs more widget contributors.