Menu UI matériel utilisant des itinéraires

Je suis jongle avec matériel-de l'interface utilisateur. J'ai mis en place LeftNav utiliser les routes, mais je ne pouvais pas trouver un moyen d'obtenir IconMenu, ou le Menu de travail avec des liens ou des routes. Quelqu'un peut m'indiquer une bonne source /tutoriel? La documentation est insuffisante, et les deux composantes ne semblent pas en charge les "menuItems" comme bien comme LeftNav.

source d'informationauteur gattermeier | 2015-08-19

  1. 53

    2016 décembre Edit: la linkButton prop est obsolètevous obtiendrez un avertissement:

    Warning: Unknown props `linkButton` on <a> tag.

    Donc simplement supprimer la prop:

    <MenuItem
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  }
/>

    Voici un Exemple de Repoet le Live de la Démo Ici.

    Réponse originale à cette question:

    Voulais juste faire remarquer que si vous êtes à l'aide de réagir-routeur, vous pouvez utiliser <Link to="/some/page" /> plutôt que de la <a> tag.

    Pour ce faire, vous devez utiliser le containerElement prop

    <MenuItem
  linkButton
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  }
/>

    (le ={true} peut être omis si vous êtes seulement de passage true
    en d'autres termes, <MenuItem linkButton /> est la même que <MenuItem linkButton={true} />)

    La containerElement et linkButton accessoires est réellement documentée dans la section de boutonsmais vous pouvez l'utiliser dans MenuItem.

  2. 12

    Vous pouvez définir la linkButtton prop sur MenuItemde créer du lien, puis ajoutez également une href.

    <MenuItem linkButton={true} href="link/to/some/page" primaryText="Sample Link" />
  3. 6

    La prop linkButton de EnhancedButton est obsolète. LinkButton n'est plus nécessaire lorsque le href propriété est fourni.
    Il sera supprimé avec v0.16.0.

    <MenuItem onTouchTap={this.handleClose} href="/link/data">Link Item</MenuItem>

    Fonctionne très bien

  4. 2

    Dans le Matériau d'INTERFACE utilisateur 1.0 (actuellement en bêta), la nouvelle syntaxe sera probablement:

    <MenuItem
  component={Link}
  //the 'to' prop (and any other props not recognized by MenuItem itself)
  //will be passed down to the Link component
  to="/profile"
>
  Profile
</MenuItem>

    (Note: cet exemple n'est pas une icône. Il y a un nouveau ListItemIcon composant.)

  5. 0

    onTouchTap ne fonctionne pas pour moi j'ai utiliser onClick voir l'exemple ci-dessous

      <MenuItem onClick={this.logout} containerElement={<Link to="/" />} primaryText="Sign out" rightIcon={<b style={style.rightIcon}><img className="menu-img" src="img/app/logout.png"  alt="logout"/></b>}/>

    espère que cela va en aider d'autres et

  6. -1

    Voici mon œuvre, qui ressemble exactement à ce que dans le matériel de l'interface utilisateur du site internet officiel. Le composant que vous pouvez utiliser sont AppBarDrawer et ListItem. Le SelectableList peut être mis en œuvre let SelectableList = MakeSelectable(List).

     <div>
    <AppBar 
    onLeftIconButtonTouchTap={this.handleLeftIconButtonTouchTap}
    title={title}
    showMenuIconButton={true}
    zDepth={0}
    />
    <Drawer 
      open={this.state.open} 
      docked={true} 
      onRequestChange={(open, reason) => {
        this.setState({open:false})
      }}
    >
      <AppBar title={title} />
      <SelectableList
        value={location.pathname}
        onChange={this.handleRequestChangeList}
       >
        <Subheader>Selectable Contacts</Subheader>
        <ListItem
          value={"link1"}
          primaryText="Link1"
        />
        <ListItem
          value={"link2"}
          primaryText="Link2"
        />
      </SelectableList>
    </Drawer>
 </div>
  7. -1

    Je ne pouvais pas faire la containerElement travail sur Safari dans iOS avec react-router. Je suis en utilisant 0.17.2 de Matériel de l'INTERFACE utilisateur et react-router@v3 et voici un travail autour de ce qui a fonctionné pour moi:

      <MenuItem
    onTouchTap={() => {
      this._yourMethod()
      browserHistory.push('/howItWorks')
    }}
    primaryText="Menu Link"
  />