web-dev-qa-db-fra.com

Interface utilisateur matérielle et système de grille

Je joue un peu avec Material-UI . Existe-t-il des options pour créer une disposition de grille (comme dans Bootstrap )?

Sinon, comment ajouter cette fonctionnalité?

Il y a un composant GridList mais je suppose qu'il a un but différent.

reactjsmaterial-designmaterial-uigrid-system
109
kharandziuk

Les interfaces utilisateur des matériaux ont mis en œuvre leur propre présentation Flexbox.

Il semble qu'ils initialement voulus se gardent comme une simple bibliothèque de 'composants'. Mais l’un des développeurs principaux décida que c’était trop important de ne pas avoir le leur . Il a maintenant été fusionné dans le code principal et était publié avec v1.0. .

Vous pouvez l'installer via:

npm install @material-ui/core

Il est maintenant dans la version officielle documentation avec exemples de code .

119
icc97

D'après la description de spécifications de conception des matériaux :

Les listes de grille sont une alternative aux vues de liste standard. Les listes de grilles sont distinctes des grilles utilisées pour les mises en page et autres présentations visuelles.

Si vous recherchez une bibliothèque de composants Grid beaucoup plus légère, j'utilise React-Flexbox-Grid , l'implémentation de flexboxgrid.css dans React.

En plus de cela, React-Flexbox-Grid a bien joué avec les deux material-ui , et react-toolbox (l'implémentation de conception de matériau alternative) .

34
Roy Lee

J'ai cherché une réponse à cette question et le meilleur moyen que j'ai trouvé était d'utiliser Flex et le style en ligne sur différents composants.

Par exemple, pour que deux composants de papier divisent tout mon écran en deux composants verticaux (rapport 1: 4), le code suivant fonctionne bien.

const styles = {
  div:{
    display: 'flex',
    flexDirection: 'row wrap',
    padding: 20,
    width: '100%'
  },
  paperLeft:{
    flex: 1,
    height: '100%',
    margin: 10,
    textAlign: 'center',
    padding: 10
  },
  paperRight:{
    height: 600,
    flex: 4,
    margin: 10,
    textAlign: 'center',
  }
};

class ExampleComponent extends React.Component {
  render() {
    return (
      <div>
        <div style={styles.div}>
          <Paper zDepth={3} style={styles.paperLeft}>
            <h4>First Vertical component</h4>
          </Paper>
          <Paper zDepth={3} style={styles.paperRight}>
              <h4>Second Vertical component</h4>
          </Paper>
        </div>
      </div>
    )
  }
}

Maintenant, avec quelques calculs supplémentaires, vous pouvez facilement diviser vos composants sur une page.

Lectures complémentaires sur flex

19
shobhit1

J'espère que ce n'est pas trop tard pour donner une réponse.

Je recherchais également un système de grille bootstrap simple, robuste, flexible et hautement personnalisable à utiliser dans mes projets.

Le meilleur que je connaisse est react-pure-gridhttps://www.npmjs.com/package/react-pure-grid

react-pure-grid vous donne le pouvoir de personnaliser chaque aspect de votre système de grille tout en offrant des paramètres par défaut intégrés qui conviennent probablement à tout projet.

Utilisation 

npm install react-pure-grid --save

-

import {Container, Row, Col} from 'react-pure-grid';

const App = () => (
      <Container>
        <Row>
          <Col xs={6} md={4} lg={3}>Hello, world!</Col>
        </Row>
        <Row>
            <Col xsOffset={5} xs={7}>Welcome!</Col>
        </Row>
      </Container>
);
10
Musyoka Morris

La façon dont je fais est d'aller à http://getbootstrap.com/customize/ et seulement cocher "système de grille" à télécharger. Il y a bootstrap-theme.css et bootstrap.css dans les fichiers téléchargés, et je n'ai besoin que de ces derniers.

De cette façon, je peux utiliser le système de grille de Bootstrap, avec tout le reste de Material UI.

8
6324

Je viens d'utiliser https://react-bootstrap.github.io/ pour Responsive Layout et Material-ui pour tout le composant

5
yuchien

J'ai eu du mal à trouver un cadre d'interface utilisateur capable de mettre en œuvre les normes de comportement réactif de Material Design. J'ai donc créé deux packages qui implémentent un système de grille pour Material Design:

  1. Un framework CSS: material-responsive-grid
  2. Un ensemble de React composants qui implémentent ce cadre: react-material-responsive-grid .

Ces packages respectent les normes pour interface utilisateur réactive décrites par Google. Toutes les tailles de fenêtres spécifiées dans leurs normes sont prises en charge en prenant en compte les gouttières appropriées, le nombre de colonnes recommandé et même le comportement d'une présentation dépassant 1600 dp. Il doit se comporter comme recommandé pour chaque périphérique dans le guide Device Metrics .

5
Ken Gregory

C'est une vieille question mais google me ramène ici. Après une petite recherche, j'ai trouvé un bon paquet: https://www.npmjs.com/package/react-grid-system

Je pense que c'est le meilleur, facile à utiliser et léger.

0
kodmanyagha