it-swarm.com.de

Material UI und Grid System

Ich spiele ein bisschen mit Material-UI . Gibt es Optionen zum Erstellen eines Rasterlayouts (wie in Bootstrap )?

Wenn nicht, wie können Sie diese Funktionalität hinzufügen?

Es gibt eine GridList-Komponente , aber ich denke, es hat einen anderen Zweck.

109
kharandziuk

Material UI hat ein eigenes Flexbox Layout implementiert.

Es scheint, als wollten sie ursprünglich sich als reine "Komponenten" -Bibliothek halten. Aber einer der Kernentwickler entschied, dass es zu wichtig war, keine eigenen zu haben . Es wurde nun in den Core-Code eingebunden und wurde mit v1.0.0 veröffentlicht .

Sie können es installieren über:

npm install @material-ui/core

Es ist jetzt in der offiziellen Dokumentation mit Codebeispielen .

119
icc97

Aus der Beschreibung von Material Design Specs :

Rasterlisten sind eine Alternative zu Standardlistenansichten. Rasterlisten unterscheiden sich von Rastern, die für Layouts und andere visuelle Präsentationen verwendet werden.

Wenn Sie nach einer viel leichteren Grid-Komponentenbibliothek suchen, verwende ich React-Flexbox-Grid , die Implementierung von flexboxgrid.css in Reagieren.

Darüber hinaus wird React-Flexbox-Grid sowohl mit Material-UI als auch React-Toolbox (Implementierung des alternativen Materialdesigns) gut gespielt. .

34
Roy Lee

Ich habe mich nach einer Antwort umgesehen und das Beste, was ich gefunden habe, war, Flex und Inline-Styling für verschiedene Komponenten zu verwenden.

Damit beispielsweise zwei Papierkomponenten meinen Vollbildmodus in zwei vertikale Komponenten (im Verhältnis 1: 4) aufteilen, funktioniert der folgende Code einwandfrei.

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>
    )
  }
}

Mit ein paar weiteren Berechnungen können Sie Ihre Komponenten jetzt ganz einfach auf einer Seite unterteilen.

Weiterführende Literatur zu flex

19
shobhit1

Ich hoffe, dies ist nicht zu spät, um eine Antwort zu geben.

Ich suchte auch nach einem einfachen, robusten, flexiblen und hochgradig anpassbaren bootstrap Reaktionsgittersystem zur Verwendung in meinen Projekten.

Das beste, von dem ich weiß, ist react-pure-gridhttps://www.npmjs.com/package/react-pure-grid

react-pure-grid Gibt Ihnen die Möglichkeit, jeden Aspekt Ihres Rastersystems anzupassen, während es gleichzeitig Standardeinstellungen enthält, die wahrscheinlich für jedes Projekt geeignet sind

Verwendung

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

Ich gehe zu http://getbootstrap.com/customize/ und überprüfe nur "grid system" zum Herunterladen. Es gibt bootstrap-theme.css und bootstrap.css in heruntergeladenen Dateien, und ich brauche nur die letzteren.

Auf diese Weise kann ich das Rastersystem von Bootstrap mit allem anderen aus der Material-Benutzeroberfläche verwenden.

8
6324

Ich benutze einfach https://react-bootstrap.github.io/ für Responsive Layout und Material-UI für alle Komponenten

5
yuchien

Ich hatte Schwierigkeiten, ein UI-Framework zu finden, das die Material Design-Standards für reaktionsfreudiges Verhalten implementiert. Daher habe ich zwei Pakete erstellt, die ein Rastersystem für Material Design implementieren:

  1. Ein CSS-Framework: material-responsive-grid
  2. Eine Menge von React Komponenten, die dieses Framework implementieren: React-Material-Responsive-Grid .

Diese Pakete folgen den von Google festgelegten Standards für responsive UI . Alle in ihren Standards angegebenen Ansichtsfenstergrößen werden unter Berücksichtigung der richtigen Rinnen, der empfohlenen Anzahl von Spalten und sogar des Verhaltens eines Layouts mit mehr als 1600 dpi unterstützt. Es sollte sich so verhalten, wie es für jedes Gerät in der Anleitung Device Metrics empfohlen wird.

5
Ken Gregory

Dies ist eine alte Frage, aber Google bringt mich hierher. Nach einer kleinen Suche fand ich ein gutes Paket: https://www.npmjs.com/package/react-grid-system

Ich denke, das ist das Beste, einfach zu bedienen und leicht.

0
kodmanyagha