Material-UI: Как «вырастить» диалог из заданной позиции? - PullRequest
Новая
       9

Material-UI: Как «вырастить» диалог из заданной позиции?

0 голосов
/ 25 февраля 2019

У меня есть диалоговое окно, которое вызывается нажатием на конкретную div на моей странице.

Как изменить стандартную анимацию постепенного появления диалогового окна на единицу, которая растет изdiv элемент, по которому щелкнули?

1 Ответ

0 голосов
/ 28 февраля 2019

Вы должны проверить CSS3 переходы .В приложении Material-UI вы захотите определить класс в своем объекте стилей, а затем условно добавить его в className *1004* опору, когда вы нажмете div.

Таким образом, вы хотели бы что-то вроде (используя синтаксис Hooks):

Внешний компонент: 

const useStyles = makeStyles({
  openDialog: {
    /* your transition CSS here */
  }
});

Тело компонента: 

const {openDialog} = useStyles();
const [open, setOpen] = useState(false);

И в JSX: 

<div onClick={() => setOpen(true)}>Div content</div>
<Dialog className={open && openDialog}>Dialog content</Dialog>

Material-UI также имеет Переходы компонентов, которые вы можете использовать.

...