web-dev-qa-db-fra.com

Interface sémantique réactive React Grid, Columns, Rows

J'ai du mal à rendre l'interface utilisateur sémantique React grid full responsive, au moins répondre comme je le souhaite pour Desktop, Tablet et Mobile.

J'ai trois composants suivants que je rend dans des colonnes de grille.

import React,{ Component } from 'react';
import { connect } from 'react-redux';
import { Grid, Header } from 'semantic-ui-react'
import GetJobs from '../../components/Home/GetJobs';
import PostForm from '../../components/Home/PostForm';
import Feed from '../../components/Home/Feed';
import Articles from '../../components/Home/Articles';
import './home.css'

class Home extends Component {
  render() {
    return(
      <Grid id="home" stackable columns={3}>
        <Grid.Row>
          <Grid.Column>
            <Header>Articles</Header>
            <Articles/>
          </Grid.Column>
          <Grid.Column>
            <Feed/>
          </Grid.Column>
          <Grid.Column>
            <Header>Jobs</Header>
            <GetJobs/>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}

export default Home;

Les colonnes s'empilent correctement lorsque vous passez du bureau au mobile. Cela va de 3 à 1 colonne. Cependant, à la taille de la tablette, les 3 colonnes sont juste plus ajustées au lieu d'avoir 2 colonnes sur l'écran, et 1 étant empilées ci-dessous.

Afficher le composant Vue tablette du composant

Idéalement, j'aimerais que le flux et les travaux restent à l'écran lorsque vous passez de la taille du bureau à la taille de la tablette, et lorsque vous passez de la tablette au mobile, le flux en haut, les travaux en dessous et les articles en bas.

Toute aide est appréciée pour que cette grille réponde comme ça.

cssresponsive-designgridresponsivenesssemantic-ui-react
9
Generaldeep

stackable prop réduit les colonnes uniquement sur les appareils mobiles, pour un contrôle précis des largeurs sur différents appareils, vous devez utiliser responsive props. Vous pouvez également essayer de jouer avec niquement et inversé . J'ai fait un exemple qui montre comment procéder.

<Grid>
  <Grid.Column only='computer' computer={5}>
    <Header>Articles</Header>
  </Grid.Column>
  <Grid.Column mobile={16} tablet={8} computer={5}>
    <Feed/>
  </Grid.Column>
  <Grid.Column mobile={16} tablet={8} computer={5}>
    <GetJobs/>
  </Grid.Column>
  <Grid.Column only='mobile tablet' mobile={16} tablet={16}>
    <Header>Articles</Header>
  </Grid.Column>
</Grid>
24
Oleksandr Fediashov