Popover component


#1

Hi there,

Any plans to add popover components to Ionic? Such as the examples below:

Bootstrap:
http://getbootstrap.com/javascript/#popovers

iOS: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Art/action_sheet_ipad_2x.png

Similar to Ionic popups it would be handy if the popovers could handle different configurations of content such as a list, forms or custom content as well as an option of what direction to open the popover (top, right, bottom, or left)

Thanks!


#2

I’m not on the dev team so I don’t know what they have in the works, but you can always make a feature request on github.


#3

In the meantime, there’s a nice set of angular directives for the bootstrap components. No reason you couldn’t use it with Ionic, I’m leveraging a couple of them myself. Just do a custom build of the components you want.

http://angular-ui.github.io/bootstrap/


#4

Thanks for posting @bostondv, we do plan to add a popover component to Ionic. In fact, it may be added as soon as next week. @max and I will be cranking this one out very soon. Stay tuned!


#5

That’s great news, thanks! :smile:


#6

Looking forward to this as it’s needed to replicate android’s Action Overflow - unless there’s something existing that I’ve missed. @Ben, any update? :smile:


#7

+1 on an Ionic popover component. Let me know if you need testers.


#8

I just sent over the design for this component a couple days ago. @Max has it working internally, but it won’t be hitting the press until late this week next. That’s a promise… which I rarely make with these sorts of things! :slight_smile:


#9

It’s a lot easier making promises for other people, huh? :wink:


#10

Thanks @Ben. We’ll make sure the pitchforks are directed at @max. :wink:


#11

Obviously we’re past late last week, but is this component still on the roadmap? Asking for a friend. :wink:


#12

I should know by now not to make promises. :wink:

We are working on it, but a few things came up between when I wrote here last and now. To be clear, it 100% is on the roadmap. We want to add something very cool to Ionic before we release the component though.


#13

Thank you for the information. Can you give us an idea when the popover is coming? Please consider that this is absolutely essential if you want to port an iOS tab-type app to Android because according to the Android developer guide this is the Android way to realize a view control like tabs. Thank you!
By the way here the link to the Android developer guide regarding this topic (see ‘2. View Control’):
http://developer.android.com/design/patterns/actionbar.html


#14

I really can’t say when… I get in trouble when I do that. I promise we are working on it and want to get it out soon though!


#15

Ok, ok, I don’t want you to get in trouble;-) Since my app is as tab-style version in the Apple App Store now I will just shift the tab bar to the top in the Android version for now and change its button style as shown further down in the android developer page linked above.


#16

Ups, I just tried to move the tab bar to the top of the page but I could not find a way how to do this in Ionic :frowning: Is there any way to realize an action bar with view changes according to the Android developer guide (see link in post above) in Ionic?


#17

I’m not sure what popover has to do with tabs, but this is how you do top tabs:

<ion-tabs class="tabs-icon-top has-tabs-top tabs-top">

Popover will be very useful though for implementing the action overflow mentioned in that link.


#18

Thank your for your hint! :smile:

According to the Android developer guide a popover in the top action bar is one way to represent tabs. Another way is to put the tabs directly under the top action bar. This is what I am doing right now…


#19

Is this still on the roadmap or has it been usurped by the platform-specific styling?


#20

Same question here. This feature would be great! :smiley: