Material UI y sistema de cuadrícula


118

Estoy jugando un poco con Material-UI . ¿Hay opciones para crear un diseño de cuadrícula (como en Bootstrap )?

Si no es así, ¿cuál es la forma de agregar esta funcionalidad?

Hay un componente GridList pero supongo que tiene un propósito diferente.


No crea que tiene componentes para crear cuadrículas receptivas.
Lucky Chingi

Respuestas:


126

Material UI ha implementado su propio diseño de Flexbox a través del componente Grid .

Parece que inicialmente querían mantenerse como una biblioteca puramente de 'componentes'. Pero uno de los desarrolladores principales decidió que era demasiado importante no tener uno propio . Ahora se ha fusionado con el código principal y se lanzó con la v1.0.0 .

Puede instalarlo a través de:

npm install @material-ui/core

Ahora está en la documentación oficial con ejemplos de código .


¡Veo que publicaste la respuesta que solo iba a agregar! lol. acaba de responder a su comentario sobre la respuesta principal actual.
Cleanshooter

Recién instalado y usando la rama alfa de Material UI ahora. Puede confirmar que el sistema Layout funciona bien.
user2875289

3
El sistema de cuadrícula funciona bien, pero hay algunos componentes que aún no se han implementado, como Select Field. Estoy atascado en cómo usar esos campos. ¿Puedes ayudarme con esto?
Suresh Mainali

1
Estoy de acuerdo con @SureshMainali ya que también me enfrento a los mismos problemas. A la mayoría de los componentes les faltan accesorios e incluso con respecto a la implementación del tema personalizado también
Sai Ram

@SaiRam No diría la mayoría, pero de hecho Selectfalta el, lo acabo de reemplazar con botones de opción por ahora, pero estoy seguro de que no pasará mucho tiempo antes de que la selección se transfiera desde el tronco.
icc97

35

De la descripción de las especificaciones de diseño de materiales :

Las listas de cuadrícula son una alternativa a las vistas de lista estándar. Las listas de cuadrículas son distintas de las cuadrículas que se usan para diseños y otras presentaciones visuales.

Si está buscando una biblioteca de componentes Grid mucho más liviana, estoy usando React-Flexbox-Grid , la implementación de flexboxgrid.cssReact.

Además de eso, React-Flexbox-Grid funcionó muy bien con material-ui y react-toolbox (la implementación alternativa de diseño de material).


32
React-Flexbox-Grid está mal implementado en el momento de esta publicación y requiere muchas dependencias externas para funcionar correctamente. Además, @Roylee es el desarrollador ... por lo que su opinión es un poco parcial de todos modos;) ...
Cleanshooter

1
Además, react-flexbox-grid depende de flexboxgrid, que no utiliza los mismos puntos de interrupción de respuesta recomendados en Material Design. Ver: material.io/guidelines/layout/…
Ken Gregory

@Cleanshooter, ¿sería esta su versión competitiva ? Quizás usted también sea un poco parcial :)
icc97

@ icc97 sí y no. Realmente no tenía la intención de "competir", era más bien una brecha para la aplicación que estaba creando. Hice eso después de estar decepcionado con ambos ... aunque realmente ya no importa porque los chicos de CallEmAll incluyeron un sistema de cuadrícula en la última versión de Material-UI. Aunque todavía no lo he probado personalmente. github.com/callemall/material-ui/pull/5808
Cleanshooter

1
@Cleanshooter el tuyo se veía bastante bien. He estado probando la nueva cuadrícula Material-UI y hasta ahora está funcionando bien.
icc97

20

Busqué una respuesta a esto y la mejor manera que encontré fue usar Flex y el estilo en línea en diferentes componentes.

Por ejemplo, para hacer que dos componentes de papel dividan mi pantalla completa en 2 componentes verticales (en una proporción de 1: 4), el siguiente código funciona 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>
    )
  }
}

Ahora, con algunos cálculos más, puede dividir fácilmente sus componentes en una página.

Lectura adicional sobre flex


2
Estoy de acuerdo, el uso de propiedades de flex css proporcionó el formato simple que necesitaba.
James Gentes

11

Espero que no sea demasiado tarde para dar una respuesta.

También estaba buscando un sistema de bootstrap simple, robusto, flexible y altamente personalizable como react grid para usar en mis proyectos.

Lo mejor que conozco es react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid le da el poder de personalizar cada aspecto de su sistema de red, mientras que al mismo tiempo tiene incorporados valores predeterminados que probablemente se adapten a cualquier proyecto

Uso

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

8

La forma en que lo hago es ir a http://getbootstrap.com/customize/ y solo marcar "sistema de cuadrícula" para descargar. Hay bootstrap-theme.cssy bootstrap.cssen archivos descargados, y solo necesito este último.

De esta manera, puedo usar el sistema de cuadrícula de Bootstrap, con todo lo demás de Material UI.


5

Solo uso https://react-bootstrap.github.io/ para el diseño receptivo y Material-ui para todos los componentes


3
Supongo que es un poco pesado :) ¿Hay alguna manera de incluir solo estilos relacionados con la cuadrícula?
kharandziuk

2
Por lo tanto, el uso de React-Bootstrap aún debe incluir el archivo css relevante. Desde getbootstrap.com/customize , puede personalizar para incluir solo el sistema Grid y usar una versión reducida del mismo ~
yuchien

5

Tuve dificultades para encontrar un marco de interfaz de usuario que implementara los estándares de Material Design para el comportamiento receptivo, por lo que he creado dos paquetes que implementan un sistema de cuadrícula para Material Design:

  1. Un marco CSS: material-responsive-grid
  2. Un conjunto de componentes de React que implementan ese marco: react-material-responsive-grid .

Estos paquetes siguen los estándares para la interfaz de usuario receptiva descritos por Google. Todos los tamaños de ventana gráfica especificados en sus estándares se admiten teniendo en cuenta las canaletas adecuadas, el número recomendado de columnas e incluso el comportamiento de un diseño que supere los 1600 dp. Debe comportarse como se recomienda para cada dispositivo en la guía de Métricas del dispositivo .


1

A continuación se realiza mediante un sistema de cuadrícula puramente MUI ,

MUI - Diseño de cuadrícula

Con el código a continuación,

// MuiGrid.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary,
    backgroundColor: "#b5b5b5",
    margin: "10px"
  }
}));

export default function FullWidthGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={0}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

↓ CodeSandbox ↓

Editar sistema MUI-Grid



0

Aquí hay un ejemplo de sistema de cuadrícula con material-ui que es similar a bootstrap:

<Grid container>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
 </Grid>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.