Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. lifz
    L
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    lifz

    @lifz

    1
    Reputation
    5
    Posts
    962
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    lifz Follow

    Posts made by lifz

    • RE: Lists inside other lists?

      In case others are curious, it actually wasn’t that big a deal.

      The pseudo-code (notice, no tappable on the parent ListItem):

      <List
        <ListItem>
          Category name
          <List className="childList"
            <ListItem tappable>Item name</ListItem>
          />
      >
      

      The CSS:

      .list.childList {
      	width: 100%;
      	border: 0;
      }
      

      It looks like this on Android:
      0_1470422427007_upload-6933bd34-2ea3-4d2c-bc29-5d6dc4dac548

      It looks like this on iOS:
      0_1470422598421_upload-e131afcf-50d5-4417-8421-d560a911e8ea

      posted in Onsen UI
      L
      lifz
    • Lists inside other lists?

      Is it possible to add a list to another list? What I’m looking for is something like jQueryMobile’s idea of collapsible lists. You have an overarching category and then when you click on that, it expands to show the details inside.

      I started by adding a List to a ListItem and while it didn’t error, it displayed the “inside” list next to the category title. Maybe it’s up to me to get crazy with the CSS but I’m just checking here before I venture into that mess!

      posted in Onsen UI
      L
      lifz
    • RE: Using a splitter menu with a navigator - example inside!

      Aha! You are a wonderful person, @IliaSky, fantastic responses!

      you can probably check your dom or your react inspector

      I didn’t have a “react inspector” so I added the extension to Chrome and found out what was going on! React was angry that the newly separated components didn’t have the key attribute (not the <Page>). This tiny addition made the errors go away:

      renderPage: function(route, nav) {
        route.props = route.props || {};
        route.props.key = route.title;  /* <-- React needs this key to be on <Home />, < Settings />, etc */
        route.props.renderToolbar = this.renderToolbar.bind(this, route);
        route.props.title = route.title;
      
        return React.createElement(route.page, route.props);
      },
      

      Also, there’s definitely issues replacing the page with itself so thanks for commenting on that. I’ll figure out a way to disallow that (disable the menu selection, possibly).

      posted in Onsen UI
      L
      lifz
    • RE: Using a splitter menu with a navigator - example inside!

      @IliaSky Fantastic, thanks so much! Now I’m trying to figure out how to put each page in its own component and then use that inside the <Navigator /> component. I’ll keep working on it and hope that @argelius and/or @patrick notice this topic!

      Edit:
      Forgive me for the large post but I thought someone coming in the future may benefit! I think I got it:

      // Import pages as separate compents
      import Home from "./Home";
      import TeamMember from "./TeamMember";
      
      /* pushPage() instead of replacePage() */
      load(route) {
        this.hideMenu();
        this.nav.pushPage(route, {animation: "fade"});
      },
      
      /* Pass props to the page so it can render the toolbar */
      renderPage: function(route, nav) {
        route.props = route.props || {};
        route.props.renderToolbar = this.renderToolbar.bind(this, route);
        route.props.title = route.title;
      
        return React.createElement(route.page, route.props);
      },
      

      And then in render():

      <List
        dataSource={[
          {title: "Home", page: Home},
          {title: "Team Member", page: TeamMember}
        ]}
        renderRow={route => (
          <ListItem key={route.title} onClick={this.load.bind(this, route)} tappable>{route.title}</ListItem>
        )}
      />
      

      I am getting an interesting warning in the console though:
      0_1470328621484_upload-44c8cc88-5c3a-4d21-b4bc-3b79b0f2f609

      My Home.js file is super simple. In its entirety:

      import React from "react";
      import ReactDOM from "react-dom";
      import {Page} from "react-onsenui";
      
      export default React.createClass({
        render() {
          return (
            <Page key={this.props.title} renderToolbar={this.props.renderToolbar}>
              <p style={{textAlign: "center"}}>
                We're on the HOME page!
              </p>
            </Page>
          );
        }
      });
      
      posted in Onsen UI
      L
      lifz
    • RE: Using a splitter menu with a navigator - example inside!

      Awesome guys! Is this able to be reproduced in the React version?

      posted in Onsen UI
      L
      lifz