reactjs - vertical - UI de material y sistema de cuadrícula

spacing grid material ui

Question

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

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

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

Answer 1

Busqué una respuesta a esto y la mejor manera que encontré fue usar Flex y 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

Answer 2

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

Las listas de cuadrícula son una alternativa a las vistas de lista estándar. Las listas de cuadrícula son distintas de las cuadrículas utilizadas 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.css en React.

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

Answer 3

Espero que no sea demasiado tarde para dar una respuesta.

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

Lo mejor que sé 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, al mismo tiempo que tiene 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>
);

Answer 4

Esta es una vieja pregunta, pero google me trae aquí. Después de una pequeña búsqueda, encontré un buen paquete: https://www.npmjs.com/package/react-grid-system

Creo que este es el mejor, fácil de usar y ligero.

Answer 5

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

De esta manera, puedo usar el sistema de cuadrícula de Bootstrap, con todo lo demás, desde la interfaz de usuario de material.

Answer 6

Material UI ha implementado su propio diseño Flexbox.

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 el suyo propio . Ahora se ha fusionado con el código central y se lanzó con 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 .

Answer 7

Solo uso https://react-bootstrap.github.io/ para Responsive Layout y Material-ui para todos los componentes

Answer 8

Tuve dificultades para encontrar un marco de UI que implementara los estándares de Material Design para un 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 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 especificados en sus estándares son compatibles con la consideración de las canaletas adecuadas, el número recomendado de columnas e incluso el comportamiento de un diseño que excede 1600 dp. Debe comportarse como se recomienda para cada dispositivo en la guía de métricas del dispositivo .