risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come centrare un componente nell'interfaccia utente materiale e renderlo reattivo?

Non capisco bene il sistema React Material-UI grid. Se voglio usare un componente del modulo per il login, qual è il modo più semplice per centrarlo sullo schermo su tutti i dispositivi (mobile e desktop)?

reactjsmobileloginmaterial-uidesktop
19
zorro

Dal momento che lo userai in una pagina di accesso. Ecco un codice che ho usato in una pagina di accesso usando Material-UI

<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justify="center"
  style={{ minHeight: '100vh' }}
>

  <Grid item xs={3}>
    <LoginForm />
  </Grid>   

</Grid>

questo renderà questo modulo di login al centro dello schermo.

Ma comunque IE non supporta la griglia UI materiale e vedrai alcuni contenuti fuori posto in IE.

Spero che questo ti possa aiutare.

36
Nadun

Un'altra opzione è:

<Grid container justify = "center">
  <Your centered component/>
</Grid>
6
Max

La versione di @ Nadun non ha funzionato per me, il dimensionamento non funzionava bene. Rimosso il direction="column" o modificandolo in row, aiuta a creare moduli di accesso verticali con dimensionamento reattivo.

<Grid
        container
        spacing={0}
        alignItems="center"
        justify="center"
        style={{ minHeight: '100vh' }}
      >
  <Grid item xs={6}>
  </Grid>
</Grid>
2
Onur Yıldırım

Ecco un'altra opzione senza griglia:

<div
    style={{
        position: 'absolute', 
        left: '50%', 
        top: '50%',
        transform: 'translate(-50%, -50%)'
    }}
>
    <YourComponent/>
</div>
2
Jöcker

Tutto quello che devi fare è avvolgere il tuo contenuto all'interno di un tag Grid Container, specificare la spaziatura, quindi avvolgere il contenuto effettivo all'interno di un tag Grid Item.

 <Grid container spacing={24}>
    <Grid item xs={8}>
      <leftHeaderContent/>
    </Grid>

    <Grid item xs={3}>
      <rightHeaderContent/>
    </Grid>
  </Grid>

Inoltre, ho lottato molto con la griglia dei materiali, ti suggerisco di fare il checkout flexbox che è integrato automaticamente nel CSS e non hai bisogno di alcun pacchetto aggiuntivo da usare. È molto facile da imparare.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

0
Gavin Thomas