Material-ui: [Sélectionner] Modifier la position du popover

Créé le 20 juil. 2018 · 11Commentaires · Source: mui-org/material-ui

[x] Il s'agit d'un problème v1.x.
[x] J'ai recherché les problèmes de ce référentiel et je pense que ce n'est pas un doublon.

Comportement prévisible

Je veux désactiver la façon dont la sélection affiche le popover, l'élément sélectionné étant sur la sélection, le popover se déplaçant bizarrement, je veux simplement le désactiver et positionner le menu sous la sélection de manière permanente .
J'ai parcouru les fichiers de Select , je n'ai pas pu les trouver. si vous pouvez me guider, je le ferai moi-même et je ferai un PR.

Comportement actuel

Le popover se déplace en fonction de l'élément sélectionné et il n'y a pas d'option de désactivation / de repositionnement.

Exemples

Je veux que le menu soit sous la sélection.

Le contexte

Select question

Source

w3nda

Commentaire le plus utile

Oh, c'est avec le Select, allons un peu plus loin:

Le Select utilise le menu:
♻️

      <Select
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >

https://codesandbox.io/s/18l2042y97

oliviertassinari le 21 juil. 2018

👍53 ❤8 🎉6 🚀5 😄2 👀1 👎1

Tous les 11 commentaires

@ w3nda Suite à la documentation:

Le composant Menu est construit au-dessus du Popover:
Le Popover peut être positionné comme vous le souhaitez:
En combinant ces deux informations et en corrigeant un avertissement, nous pouvons trouver:

        <Menu
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left"
          }}
          getContentAnchorEl={null}

https://codesandbox.io/s/9l17k3qnk4

J'espère que cette aide.

oliviertassinari le 21 juil. 2018

👍13

Oh, c'est avec le Select, allons un peu plus loin:

Le Select utilise le menu:
♻️

      <Select
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >

https://codesandbox.io/s/18l2042y97

oliviertassinari le 21 juil. 2018

👍53 ❤8 🎉6 🚀5 😄2 👀1 👎1

Roi!
J'ai constaté que si le menu a suffisamment d'espace en dessous, il rendra parfaitement, mais s'il n'a pas d'espace sur l'écran, le menu sera poussé vers le haut. vrai? ou comportement brisé?

w3nda le 22 juil. 2018

J'ai constaté que si le menu a suffisamment d'espace en dessous, il rendra parfaitement, mais s'il n'a pas d'espace sur l'écran, le menu sera poussé vers le haut.

@wenduzer Cela ressemble au comportement attendu.

oliviertassinari le 22 juil. 2018

🎉3 ❤2

Oh, c'est avec le Select, allons un peu plus loin:

@oliviertassinari Merci, c'est exactement ce que je cherchais depuis 2 heures.

Shrikant9 le 4 mars 2019

@ Shrikant9 Comment pouvons-nous améliorer la découvrabilité de la réponse?

oliviertassinari le 4 mars 2019

Comment pouvons-nous améliorer la découvrabilité de la réponse?

@oliviertassinari À mon avis, avoir des versions plus diverses de démos sur la page de démonstration du composant <Select /> . Bien qu'honnêtement, j'ai récemment commencé à utiliser material-ui, je dois donc m'habituer à la documentation.

Shrikant9 le 5 mars 2019

🎉2

@ Shrikant9 Nous serions heureux d'accepter une pull request 👍.

oliviertassinari le 5 mars 2019

👍2

@oliviertassinari merci mon ami, vous m'avez beaucoup aidé. Je connais assez bien le matériel, mais je n'ai pas pu prendre cette décision