I was looking at the Tabs option for a UI. The default behavior is that they are stacked horizontally. Is there a way to change that?
I would like to stack the Tabs vertically. It would save significant UI "real estate", especially in mobile application UIs.
Try this:
Tabs tabs = new Tabs(Component.LEFT)
Related
First I would like to say I am not entirely certain that I am in the correct area of Stack Overflow with regards to this question. If I am not, apologies in advance.
I am wondering, can I modify Chrome this way- I would like to create a vertical "view" of tabs and eliminate horizontal tabs. Can I build an extension to do this? It should be retractable to hide the tabs.
Can this be done with HTML and CSS?
i want to create a side bar using polymers paper tabs i want them stacked up and down not left to right. is this possible? if not is there another tab system i can use that can. I do not want to use links in my tabs.
AFAIK, material design doesn't have a design for this...which is why you don't see this option on paper-tabs.
It would be cool if paper-tabs easily supported a vertical property or allowed you to easily set the flex-direction of the tabs. However, that would require some work. If you'd like to see this added, I'd suggest filing a feature request (https://github.com/Polymer/paper-tabs/issues/new) and see what the designers think.
paper-menu could be a alternative if features like the underline transition aren't necessary?
I've thrown together a page based on the paper ui elements and love how mobile-friendly it is. But it does fall short with some functionality. For instance, I'd love for users to be able to swipe out the drawer of my core-drawer-panel, instead of using the button I'v provided on the toolbar.
What I'm looking for is along the lines of the Gmail app for Android.
Does anyone have an example page where this is used to good effect?
There is currently a pull request pending which will add swipe to open the drawer. See for details.
You can use a core-scaffold instead of core-drawer-panel
I have a navigation bar on the mobile version of a website and want it to be always as wide as the screen, i.e. when the user zooms in, the bar is supposed to not zoom in with the rest of the page.
Illustration of the problem:
Without zoom
With zoom
I know this is possible with JavaScript as described in this approach: https://stackoverflow.com/a/14466070/695457
But is there a way without JS? If not, are there any other libraries for this except detect-zoom?
There is no way without JavaScript. I suggest you leave it as it to be honest as those menu items look mighty small on the first screenshot if it was on a phone. You may be introducing an accessibility issue by disabling the functionality to let people with poorer eyesight view the menu text.
I am designing a mobile website. On the homepage i have menu items say 'a' ,'b' ,'c',...,'h'.
I want to display only first three menu items and make a 'View All Items' button that on clicking expands to show all the items.Also the button should become 'Show Less Items' after clicking on it.
I want to do this using only HTML5 and CSS3 and no JavaScript.
Also i want this functionality to be reusable around the website.
How should i do it?
--Thanks in advance!
Modern mobile browsers all support JavaScript, but give end users (at least in Android's case, not sure about iOS) a configuration setting to disable it.
Your best bet as a developer is to use the "fail safe" strategy: Ship the HTML with the menu fully expanded, and use JavaScript to collapse the menu immediately on load (or on DOM ready). That way, if you have mobile users with JavaScript disabled, they will see the whole menu. Most of your users should have JavaScript enabled, in which case they will get the expand/collapse functionality you describe.
It's unrealistic to expect to implement this without JavaScript, and if you can find a workaround I don't believe it to be as stable as simply using JavaScript. In terms of hiding the menu items you could set their CSS property to display: none; and place a button which targets these menu items and toggles their display property.