Материальный интерфейс и система сеток


118

Я немного поиграю с Material-UI . Есть ли какие-нибудь варианты создания макета сетки (как в Bootstrap )?

Если нет, как можно добавить эту функцию?

Есть компонент GridList, но я предполагаю, что он имеет другое назначение.


Не думайте, что у него есть какие-либо компоненты для создания адаптивных сеток.
Lucky Chingi

Ответы:


126

Пользовательский интерфейс Material реализовал собственный макет Flexbox через компонент Grid .

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

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

npm install @material-ui/core

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


Я вижу, вы отправили ответ, который я собирался добавить! ржунимагу. только что ответил на ваш комментарий к текущему ведущему ответу.
Cleanshooter

Только что установил и сейчас использует альфа-ветвь Material UI. Могу подтвердить, что система макета работает хорошо.
user2875289 07

3
Сетка работает хорошо, но есть некоторые компоненты, которые еще не реализованы, например Select Field. Я застрял в том, как использовать такие поля. Вы можете мне помочь?
Суреш Майнали

1
Я согласен с @SureshMainali, так как сталкиваюсь с теми же проблемами. У большинства компонентов отсутствуют реквизиты, и даже в части реализации настраиваемой темы тоже
Сай Рам,

@SaiRam Я бы не сказал больше всего, но на самом деле Selectон отсутствует, я только что заменил его переключателями, но я уверен, что скоро выбор будет перенесен из магистрали.
icc97

35

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

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

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

Вдобавок ко всему , React-Flexbox-Grid прекрасно работает как с material-ui , так и с react-toolbox (альтернативная реализация дизайна материалов).


32
React-Flexbox-Grid плохо реализован на момент написания этой статьи и требует очень многих внешних зависимостей для правильной работы. Кроме того, @Roylee является его разработчиком ... так что его мнение в любом случае немного предвзято;) ...
Cleanshooter

1
Кроме того, response-flexbox-grid зависит от flexboxgrid, который не использует те же самые отзывчивые точки останова, которые рекомендованы в Material Design. См .: material.io/guidelines/layout/…
Кен Грегори

@Cleanshooter. Будет ли это ваша конкурирующая версия ? Возможно, вы тоже немного предвзяты :)
icc97

@ icc97 да и нет. На самом деле не собирался «соревноваться», это был скорее временный промежуток для приложения, которое я создавал. Я сделал это после того, как разочаровался в обоих ... это действительно больше не имеет значения, потому что ребята из CallEmAll включили систему сеток в последний выпуск Material-UI. Хотя лично я еще не пробовал. github.com/callemall/material-ui/pull/5808
Cleanshooter

1
@Cleanshooter твоя выглядела неплохо. Я тестировал новую сетку Material-UI, и пока она работает хорошо.
icc97

20

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

Например, чтобы заставить два бумажных компонента разделить мой полный экран на 2 вертикальных компонента (в соотношении 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>
    )
  }
}

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

Дополнительная информация о гибкости


2
Я согласен, использование свойств flex css обеспечило мне необходимое простое форматирование.
Джеймс Гентес,

11

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

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

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

8

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

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


5

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


3
Думаю, это немного тяжеловато :) Есть ли способ включить только стили, связанные с сеткой?
харандзюк

2
Поэтому при использовании React-Bootstrap по-прежнему необходимо включать соответствующий файл css. На сайте getbootstrap.com/customize вы можете настроить, чтобы просто включить систему Grid и использовать ее уменьшенную версию ~
Ючиэн

5

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

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

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


1

Ниже приведено чисто MUI Grid система ,

MUI - макет сетки

С кодом ниже

// 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 ↓

Редактировать систему MUI-Grid



0

Вот пример системы сеток с material-ui, которая похожа на бутстрап:

<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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.