UI материала и Grid-система

Из описания спецификаций дизайна материалов:

Списки сетки являются альтернативой стандартным представлениям списка. Списки сетки отличные от сеток, используемых для макетов и других визуальных презентаций.

Если вы ищете очень легкую библиотеку компонентов Grid, я использую React-Flexbox-Grid, реализацию flexboxgrid.css в React.

Кроме того, React-Flexbox-Grid отлично играли как с material-ui, так и react-toolbox (альтернативная реализация материала).

Я оглянулся, чтобы ответить на это, и лучшим способом, который я нашел, было использование Flex и встроенного стиля для разных компонентов.

Например, чтобы два бумажных компонента разделили мой полный экран на два вертикальных компонента (в ранге 1: 4), следующий код работает нормально.

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

Теперь, с некоторыми дополнительными вычислениями, вы можете легко разделить свои компоненты на странице.

Дальнейшее чтение в flex

Я надеюсь, что еще не поздно дать ответ.

Я также искал простую, надежную, гибкую и настраиваемую загрузочную систему, например, систему реагирования на сетку для использования в моих проектах.

Лучшее, что я знаю, это react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid дает вам возможность настраивать каждый аспект вашей сетки, и в то же время он имеет встроенные значения по умолчанию, которые, вероятно, подходят для любого проекта

Использование

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

Я просто использую https://react-bootstrap.github.io/ для адаптивной компоновки и материала-ui для всего компонента

Мне было трудно найти структуру пользовательского интерфейса, что бы реализовать стандарты Material Design для реагирования на поведение, поэтому я создал два пакета, которые реализуют сетку для Material Design:

• Структура CSS: material-responsive-grid
• Набор компонентов React, реализующих эту инфраструктуру: react-material-responsive-grid.

Эти пакеты соответствуют стандартам отзывчивого пользовательского интерфейса, описанного Google. Все размеры видовых экранов, указанные в их стандартах, поддерживаются с учетом правильных желобов, рекомендуемого количества столбцов и даже поведения макета, который превышает 1600 дп. Он должен вести себя как рекомендуется для каждого устройства в Руководство пользователя.

То, что я делаю, это перейти к http://getbootstrap.com/customize/ и только проверить "сетку" для загрузки. В загруженных файлах есть bootstrap-theme.css и bootstrap.css, и мне нужен только последний.

Таким образом, я могу использовать сетчатую систему Bootstrap, со всем остальным от Material UI.

Это старый вопрос, но google привел меня сюда. После небольшого поиска я нашел хороший пакет: https://www.npmjs.com/package/react-grid-system

Я думаю, что это лучший, простой в использовании и легкий.