Material-ui: Lien de l'élément de liste ?

Créé le 7 oct. 2015  ·  3Commentaires  ·  Source: mui-org/material-ui

Comment transformer un ListItem en lien ?

J'ai essayé de l'envelopper avec une balise achor mais cela n'a pas fonctionné. Je n'ai pas vu de propriété dans http://material-ui.com/#/components/lists. Je préférerais éviter d'utiliser des gestionnaires d'événements pour que le survol affiche une URL.

picture sys13

Commentaire le plus utile

Utilisez le containerElement avec les accessoires linkButton !

voir:
http://stackoverflow.com/questions/32106513/material-ui-menu-using-routes/34507786#34507786

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

ou si vous n'utilisez pas react-router, utilisez simplement

<MenuItem linkButton href="/profile" primaryText="Profile" />
picture DaxChen le 29 déc. 2015
👍11

Tous les 3 commentaires

J'ai le problème inverse. J'aimerais que cela l'empêche de s'afficher sous forme de lien. J'obtiens une erreur de lien imbriqué lors de l'utilisation d'un IconMenu avec des MenuItems à l'intérieur d'un ListItem. Cela fonctionne cependant dans la doc, alors peut-être que je fais quelque chose de mal.

ListItem > EnhancedButton > a > ... > IconMenu > ReactTransitionGroup > Menu > MenuItem > ListItem > EnhancedButton > a.

Est-il un moyen d'empêcher cela? Je sais que c'est un problème différent de @ sys13 , mais il pourrait avoir la même solution.

rhythnic picture rhythnic le 11 nov. 2015

Utilisez le containerElement avec les accessoires linkButton !

voir:
http://stackoverflow.com/questions/32106513/material-ui-menu-using-routes/34507786#34507786

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

ou si vous n'utilisez pas react-router, utilisez simplement

<MenuItem linkButton href="/profile" primaryText="Profile" />
DaxChen picture DaxChen le 29 déc. 2015
👍11

Cela a été corrigé dans #2708

alitaheri picture alitaheri le 30 déc. 2015
Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

TimoRuetten picture TimoRuetten  ·  3Commentaires
finaiized picture finaiized  ·  3Commentaires
ericraffin picture ericraffin  ·  3Commentaires
ryanflorence picture ryanflorence  ·  3Commentaires
mattmiddlesworth picture mattmiddlesworth  ·  3Commentaires