I've read this solution: Having trouble combining Onsen UI ons-sliding-menu and ons-tabbar
But, the question is, when I change the page on right menu, i just lost the tabmenu on boton, so, what I can do programmatic to avoid this?
If you want to give a same role to slidingMenu and tabbar, i.e. both of them switch a category,
Please see the answer Sliding menu with Tab bar in Onsen UI
Related
I'm about to try to create a walkthrough for a web app created using React. I'm trying to think of the best way to do it, and have been thinking of using things like Material UI's modal component. I'm thinking I should also include some kind of arrow component that points the user to whichever element (button, link, etc) on my page I want them to click next. Also I will want to create a backdrop to fade the screen except for whichever element I want the users attention to be drawn to.
I feel like this must have been done many times before, but I can't find anything from searching. Obviously whenever I Google "react walkthrough/guide/intro" I just get suggestions for teaching basic React.
(NB: I'm not looking to do one of those intro sliders, as I want to provide a more detailed step-by-step)
The keyword your need to search for is 'tour'. Searching on google for 'react tour', I found 2 libraries for you:
React Joyride: https://github.com/gilbarbara/react-joyride | Live Demo
reactour: https://github.com/elrumordelaluz/reactour | Live Demo
Both seem to have similar features:
Instruction modal that explains about an element on the page.
The modal is positioned next to the highlighted element.
The window will scroll down to the highlighted element if it's outside of the viewport.
The element is highlighted to bring more attention while the rest of the page is in the backdrop.
There are steppers on the modal to indicate which step you're on.
I'm trying to have an always open sidebar on desktop and screens that are large enough. and the a sidebar on mobile;
like the one shown here: http://onsen.io/pattern-sliding_menu.html
but there when you click on the main page the sidebar goes away.
any way to make it stick? I couldn't find anything for this
Onsen UI has <ons-split-view> for that. Explained in the docs: http://onsen.io/reference/ons-split-view.html
<ons-split-view
secondary-page="secondary.html"
main-page="main.html"
main-page-width="70%"
collapse="portrait">
</ons-split-view>
I'm going through Angular Material Design Gridlist and they have not mentioned anything about handling hover/click on the grids.
So, is there a way to do it or should I use buttons inside each grid to handle click events ?
For anyone coming across this using material-ui, you can use the onClick attribute to the same effect.
You could just add a ng-click="foo(bar)" to the <md-grid-tile> element:
http://codepen.io/anon/pen/pJggEb
Why not just add the ng-click event to the grid-list. See:
codepen example
(click yellow)
Just giving 1 more option for this to work:
Angular Bottom Sheet. Here click on the 'Show as Grid' to see clickable grid items.
Using ExtJS5 I want my toolbar buttons to look like the normal ExtJS buttons. In the documentation I see the CSS Mixins but I am not putting things together. Can someone give me a kick in the right direction? Thanks.
Use defaultButtonUI in your toolbar:
defaultButtonUI : 'default'
See documentation of defaultButtonUI:
A default ui to use for Button items. This is a quick and simple way
to change the look of all child Buttons.
If there is no value for defaultButtonUI, the button's ui value will
get -toolbar appended so the Button has a different look when it's a
child of a Toolbar.
See https://fiddle.sencha.com/#fiddle/jpo
The previous version of Onsen UI, there was a function call presentPage, so you could show a page without any characteristics of the previous page. It would clear the stack.
It was useful for examples, to be able to have just a page with a Sliding menu, but subsequent pages would not.
How can this in the latest Onsen UI (currently at v1.14)?
I tried using the resetToPage function, but that doesn't stop the Sliding menu.
Let me try to answer this one. I believe I understood the question :)
So, you have a "sliding menu" page with a main page, then a hidden menu page that could slide out when you swipe. Now you want a new page that show but doesn't have any sliding menu in it, just a regular page?
If so, you can achieve it by using ons-sliding-menu on top of an ons-nagivator
Take a look at this sample, I modified the sliding-menu code sample from onsen documentation: 'http://codepen.io/vnguyen972/pen/EjHDk'
Link to Page2 from the menu will open up a new page without any sliding menu in it.
Give + if this helps!
[1]: http://codepen.io/vnguyen972/pen/EjHDk