How to create a horizontal scrolling list in OnsenUI-Reactjs?
-
Does someone know how to do this?
-
@beebase You “might” be able to do this with this plugin: https://github.com/Morhaus/react-list-view
You would be able to place the Onsen components in the renderItem portion.
Otherwise an option would be to just do it with a standard unordered list and CSS.
<ul class="images"> <li>...</li> <li>...</li> <li>...</li> </ul>
ul.images { margin: 0; padding: 0; white-space: nowrap; width: 900px; overflow-x: auto; background-color: #ddd; } ul.images li { display: inline; width: 150px; height: 150px; }
-
Thanks, unordered list works well except not with the Splitter (sidebar navigation) as the outer component of the app.
Is there a way to disable the Splitter on certain pages?
Or should I set the Navigator (stacked navigation) as outer component and then add the splitter on pages where I need them?(index.html)
<Splitter> <SplitterSide side='left' collapse={true} isOpen={this.state.isOpen} onClose={this.hide.bind(this)} isSwipeable={true}> <Page> Menu content </Page> </SplitterSide> <SplitterContent> <Navigator initialRoute={{component: Skills}} renderPage={this.renderPage}/> </SplitterContent> </Splitter>
-
Ah, found it. isSwipeable={false} makes the scrollbar work perfectly.
return ( <Splitter> <SplitterSide isSwipeable={false}>
-
@beebase Glad you got it figured out! This is one I was watching because I have a project coming up soon where I will need to do a horizontal scroller as well. Thanks for the upvote and the feedback!