web-dev-qa-db-fra.com

Comment puis-je définir une hauteur pour une boîte de dialogue dans material-ui?

Je vais avec l'exemple material-ui pour une boîte de dialogue avec une largeur personnalisée:

const customContentStyle = {
  width: '100%',
  maxWidth: 'none',
};

// some omitted code

<Dialog
  title="Dialog With Custom Width"
  actions={actions}
  modal={true}
  contentStyle={customContentStyle}
  open={this.state.open}
>
  This dialog spans the entire width of the screen.
</Dialog>

Je sais que je suis en mesure de définir une hauteur personnalisée parce que j'ai remplacé le maxWidth, mais je ne pourrai pas faire de même avec la hauteur afin de pouvoir redimensionner la hauteur de la boîte de dialogue . J'ai essayé de définir maxHeight sur none et de définir height, mais je n'ai pas eu de chance avec.

reactjsmaterial-ui
11
Smarticles101

Vous devez remplacer certains des comportements par défaut de Dialog . Sa classe paper implémente un flexbox avec une direction flex en colonne et définit une hauteur max de 90vh. Cela permet à la boîte de dialogue d'atteindre son contenu et de présenter des barres de défilement une fois qu'elle atteint 90% de la hauteur visible de la fenêtre.

Si vous devez définir la hauteur de la boîte de dialogue sur un certain pourcentage de la fenêtre, remplacez la classe paper, définissant min-height et max-height d'une manière similaire à l'exemple ci-dessous:

import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Dialog from 'material-ui/Dialog';

const styles = {
    dialogPaper: {
        minHeight: '80vh',
        maxHeight: '80vh',
    },
};

const YourDialog = ({ classes }) => (
    <Dialog classes={{ paper: classes.dialogPaper }}>
        <div>dialogishness</div>
    </Dialog>
);

export default withStyles(styles)(YourDialog);

Cela garantira que la hauteur de la boîte de dialogue est de 80% de la fenêtre.

27
Ken Gregory