Material-ui: [Выбрать] Изменить положение всплывающего окна

Созданный на 20 июл. 2018 · 11Комментарии · Источник: mui-org/material-ui

[x] Это проблема v1.x.
[x] Я искал проблемы в этом репозитории и считаю, что это не дубликат.

Ожидаемое поведение

Я хочу отключить способ отображения всплывающего окна при выборе, при этом выбранный элемент находится в списке выбора, всплывающее окно движется странно, просто хочу отключить его и навсегда разместить меню под выбранным.
Я просмотрел файлы Select , но не нашел. Если вы меня проведете, я сделаю это сам и устрою пиар.

Текущее поведение

Всплывающее окно перемещается в соответствии с выбранным элементом, и нет параметра отключения / изменения положения.

Примеры

Я хочу, чтобы меню было под выбранным.

Контекст

Select question

Источник

w3nda

Самый полезный комментарий

О, это с Select, давайте сделаем еще один шаг глубже:

Выбор использует меню:
♻️

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

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

oliviertassinari 21 июл. 2018

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

Все 11 Комментарий

@ w3nda Следуя документации:

Компонент Menu построен поверх Popover:
Popover можно расположить так, как вы ожидаете:
Объединив эти две информации и исправив предупреждение, мы можем получить:

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

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

Я надеюсь, что это поможет.

oliviertassinari 21 июл. 2018

👍13

О, это с Select, давайте сделаем еще один шаг глубже:

Выбор использует меню:
♻️

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

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

oliviertassinari 21 июл. 2018

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

Король!
Я обнаружил, что если под меню достаточно места, оно будет отображаться отлично, но если у него не будет места на экране, меню будет сдвинуто вверх. правда? или нарушенное поведение?

w3nda 22 июл. 2018

Я обнаружил, что если под меню достаточно места, оно будет отображаться отлично, но если у него не будет места на экране, меню будет сдвинуто вверх.

@wenduzer Это похоже на ожидаемое поведение.

oliviertassinari 22 июл. 2018

🎉3 ❤2

О, это с Select, давайте сделаем еще один шаг глубже:

@oliviertassinari Спасибо, это именно то, что я искал последние 2 часа.

Shrikant9 4 мар. 2019

@ Shrikant9 Как мы можем улучшить обнаруживаемость ответа?

oliviertassinari 4 мар. 2019

Как мы можем улучшить обнаруживаемость ответа?

@oliviertassinari На мой взгляд, наличие более разнообразных версий демок на демонстрационной странице компонента <Select /> . Хотя, честно говоря, я недавно начал использовать material-ui, так что еще нужно привыкнуть к документации.

Shrikant9 5 мар. 2019

🎉2

@ Shrikant9 Мы будем рады принять пулреквест 👍.

oliviertassinari 5 мар. 2019

👍2

@oliviertassinari, спасибо, друг мой, ты очень мне очень помог. Я достаточно хорошо знаю материальный интерфейс, но не мог прийти к такому решению