web-dev-qa-db-fra.com

Comment ajouter une icône de fermeture dans le coin supérieur droit de l'en-tête de la boîte de dialogue Material UI

Vous souhaitez ajouter une icône de fermeture dans le coin supérieur droit de la section d'en-tête. S'il vous plaît, aidez-moi pour la même chose. J'ai utilisé la boîte de dialogue Material UI. tout fonctionne bien mais je veux un bouton de fermeture sur la section supérieure. Veuillez voir l'image ci-jointe. enter image description here

user-interfacereactjsmaterial-uimaterial
11
Nitin Shinde

Mettez l'icône de l'image dans le titre et utilisez le css pour le positionner correctement, essayez ceci:

Appliquez ce css sur l'image de fermeture:

let closeImg = {cursor:'pointer', float:'right', marginTop: '5px', width: '20px'};

<Dialog
    modal={false}
    open={true}
    title={
            <div>
                ABC 
                <img src='https://d30y9cdsu7xlg0.cloudfront.net/png/53504-200.png' style={closeImg}/>
            </div>
        }
>
    Hello
</Dialog>

Vérifiez le violon de travail: https://jsfiddle.net/ve0qbgLr/

17
Mayank Shukla

Je sais que cela a été demandé avant Material UI V1 mais la réponse acceptée fonctionne pour Material UI version 0 (ou ce qu'ils ont appelé).

Pour les gens qui veulent de l'aide avec la version 1, les gars de MUI ont exposé un <DialogTitle /> composant qui accepte un disableTypography afin que vous puissiez personnaliser votre boîte de dialogue.

PAR EXEMPLE

<Dialog open={this.state.show} onClose={this.onClose}>
    <DialogTitle disableTypography className={styles.dialogTitle}>
        <h2>Dialog...</h2>
        <IconButton onClick={this.onClose}>
            <CloseIcon />
        </IconButton>
    </DialogTitle>
    <DialogContent>
        <span>Dialog Content</span>
    </DialogContent>
</Dialog>

J'utilise simplement flex avec un espace entre pour le h2 et l'icône

.dialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

J'espère que ça aide quelqu'un. :-)

15
Kurtis