I'm trying to get full width dividers (the thin grey lines between menu items) on the sub items in an expandable ons-list. See red circled areas in attached pic. I know about the longdivider modifier (docs link) but it doesn't seem to have an effect on subitems. Is there any CSS or other technique that might achieve this please? Thanks
Menu HTML structure for reference is:
<ons-list-item expandable="true">
<div class="expandable-content">
<ons-list>
<ons-list-item tappable modifier="tappable longdivider">Menu subitem #1</ons-list-item>
<ons-list-item tappable modifier="tappable longdivider">Menu subitem #2</ons-list-item>
<ons-list-item tappable modifier="tappable longdivider">Menu subitem #3</ons-list-item>
</ons-list>
</div>
</ons-list-item>
Related
Is there a way to invert the colors of an ons-list-item when tapped on, e.g. when the tap starts (i.e. when user starts touching the screen) and revert back to normal colours when the tap ends (i.e. user lifts their finger from the screen)?
Code is pretty standard:
<ons-list-item tappable>
<div class="left">
<img class="list-item__thumbnail" src="img/MyIcon.png">
</div>
<div class="center">
Some text
</div>
<div class="right">
<i class="fa-solid fa-circle" style="color: blue"></i>
</div>
</ons-list-item>
I’ve tried using the touchstart and touchend events then changing the one-list-item CSS color and background properties with partial success but find the ends of the list item don’t change color due to padding and offsets etc. Wondering if there is a better way?
Thanks
Here is my line of code that has a problem:
<ons-list-item onclick={this.toBonusSummary} tappable>Bonus Summary</ons-list-item>
Basically toBonusSummary simply changes the state of the component itself, which is supposed to render a new content when clicking the list.
The problem I have right now is that I'm getting an Unexpected token of ( error. I've tried changing the onclick to other functions and they're not working only in that line of code.
My guesses are that it has something to do with clicking an Onsen List.
Here is my whole code for the page anyway:
<Ons.Splitter>
<Ons.SplitterSide
style={{
boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
}}
side='left'
width={300}
collapse={true}
isSwipeable={true}
isOpen={this.state.menuOpen}//will open once you click the menu button
onClose={this.closeMenu}
onOpen={this.openMenu}
>
{/*Sidebar Content*/}
<Ons.Page renderToolbar={this.renderSidebar}>
{/*start of list*/}
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>Home</ons-list-item>
<ons-list-item onclick={this.toBonusSummary} tappable>Bonus Summary</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Sign Up</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Upgrade Package</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Group</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Finance</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Buy/Sell Credit</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Promo Pin Buy/Sell</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Information Centre</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>iChat</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Settings</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Log Out</ons-list-item>
</ons-list>
{/*end of list*/}
</Ons.Page>
{/*End of Sidebar Content*/}
</Ons.SplitterSide>
{/*Page Content*/}
<Ons.SplitterContent>
<Ons.Page renderToolbar={this.renderToolbar}>
<PageContent data-pageName={this.state.pageClicked} onChange={this.closeMenu} name={this.state.username} data-defaultOption={'a'} value={'a'} data-error={'a'} data-options={[]}/>
</Ons.Page>
</Ons.SplitterContent>
{/*End of Page Content*/}
</Ons.Splitter>
Still in development & mostly a lot of copy pasted code.
Any explanation why clicking an ons-list-item won't work in my case?
PS: Those other onclick links doesn't work & is actually redundant.
React is case sensitive and in this case onclick should be with upper case C - onClick.
I have a navigator and global splitter in my app. My navigator pushes my first page as tempHome and i need set page attribute for splitter also tempHome to use the splitter.
<ons-navigator id="myNavigator">
<ons-page>
<ons-splitter>
<ons-splitter-side id="menu" side="right" width="220px" swipe-target-width="150px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item tappable>
test
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tempHome"></ons-splitter-content>
</ons-splitter>
</ons-page>
</ons-navigator>
so I have twice tempHome in the first page of my app.
Is there any help?
Thank you
The codepen which you mentioned shows a splitter inside a navigator.
However both the navigator and splitter can contain inner pages - so in your case what you want to do is just change the structure the other way around. Since you want to have the side menu always that just means that it should be outside the navigator.
You can put the navigator inside the ons-splitter-content and you will get the desired result.
<ons-splitter>
<ons-splitter-side collapse swipeable>
// menu content...
</ons-splitter-side>
<ons-splitter-content>
<ons-navigator id="myNavigator" page="home.html"></ons-navigator>
</ons-splitter-content>
</ons-splitter>
Here's a modified Demo.
Sidenote: I just modified the example from the codepen which you mentioned, so it's actually using angular, however do note that for Onsen 2 angular is not a required :)
<ons-navigator id="myNavigator">
<ons-page>
<ons-splitter>
<ons-splitter-side id="menu" side="right" width="220px" swipe-target-width="150px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item tappable>
test
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tempHome"></ons-splitter-content>
</ons-splitter>
</ons-page>
I'm using Onsen UI and AngularJS, and trying to pass a value on Onsen navigation , but it is not working. What can be wrong?
page1.html
<ons-button modifier="clean" ng-click="menu.setMainPage('page2.html', {closeMenu: true}, {color:'red'})"><img src="red.jpg"></ons-button>
<ons-button modifier="clean" ng-click="menu.setMainPage('page2.html', {closeMenu: true}, {color:'blue'})"><img src="blue.jpg"></ons-button>
page2.html
<p>the color is: {{ color }}!</p>
app.js
app.controller('colorController', function($scope, colorData) {
var page = $scope.ons.navigator.getCurrentPage();
$scope.color = page.options.color;
});
When I run it, the page2 at <p>***{{ color }}***</p> does not display the color based on clicked button (red or blue). It displays only the color is: !
Any help will be appreciated. Thank you in advance!!!
You cannot pass options with a Sliding Menu and read them with a Navigator. There is no menu.getCurrentPage() in Sliding Menu so you have to use a Navigator for that. It's possible to emulate it using navigator.resetToPage() method instead of menu.setMainPage(). First, you need a Navigator as a child of your Sliding Menu:
<ons-sliding-menu
menu-page="menu.html" main-page="navigator.html" var="menu" ...>
</ons-sliding-menu>
<ons-template id="navigator.html">
<ons-page>
<ons-navigator var="navi" page="main.html"></ons-navigator>
</ons-page>
</ons-template>
Then, in the menu:
<ons-template id="menu.html">
<ons-page>
<ons-list>
<ons-list-item onclick="navi.resetToPage('main.html'); menu.close()">Main</ons-list-item>
<ons-list-item onclick="navi.resetToPage('page.html', {param1: 'hoge', param2: 'fuga'}); menu.close()">Page with params</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
Now you can access to the parameters with navi.getCurrentPage().options.
Working in this codepen: http://codepen.io/frankdiox/pen/OyvvGZ
The sliding menu template has a button on the toolbar that opens the side menu (shows it). The same menu (I mean appearance) is used in the split view example app. In this case there is no menu button on the toolbar, but the menu, even in the portait view, can be open by swiping right. Why not allow a user to open the menu from a button? Unfortunately there's no toggleMenu() method for the object. There is however openMenu() method but it doesn't work if used from code. My example code is:
<ons-split-view
secondary-page="secondary.html"
main-page="page1.html"
main-page-width="70%"
collapse="portrait"
var="menu">
</ons-split-view>
<script type="text/ons-template" id="page1.html">
<ons-page class="center">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.openMenu()">
<ons-icon icon="bars"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
</ons-page>
</script>
Could you please me to achieve the effect of opening the menu by clicking on a button?
Raf
Ok, I've found it... ons.splitView.toggle() - it opens/closes the menu.