Система пользовательского интерфейса и сетки

Ответ 1

Пользовательский интерфейс материалов реализовал собственную макет Flexbox с помощью Grid-компонента.

Похоже, что они изначально хотели сохранить себя как "библиотеку компонентов". Но один из разработчиков ядра решил, что слишком важно не иметь своего собственного. Теперь он объединен с основным кодом и выпущен с версией 1.0.0.

Вы можете установить его через:

npm install @material-ui/core

Теперь он находится в официальной документации с примерами кода.

Ответ 2

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

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

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

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

Ответ 3

Я оглянулся, чтобы ответить на это, и лучшим способом, который я нашел, было использование 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

Ответ 4

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

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

Лучшее, что я знаю, это 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>
);

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

1. Фреймворк CSS: материально-адаптивная сетка
2. Набор компонентов React, реализующих эту платформу: response-material-responseive-grid.

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

Ответ 8

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

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