Матеріал користувальницького інтерфейсу та сітки


118

Я трохи граю з Material-UI . Чи є варіанти для створення макети сітки (як у Bootstrap )?

Якщо ні, то який спосіб додати цю функціональність?

Є компонент GridList, але, мабуть, він має інше призначення.


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

Відповіді:


126

Користувацький інтерфейс користувача реалізував власну розкладку Flexbox через компонент Grid .

Здається, вони спочатку хотіли зберегти себе як суто бібліотеку «компонентів». Але один з основних розробників вирішив, що це занадто важливо, щоб не було власних . Тепер він об'єднаний в основний код і був випущений з v1.0.0 .

Ви можете встановити його за допомогою:

npm install @material-ui/core

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


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

Щойно встановлено та використовується альфа-гілка Material UI зараз. Може підтвердити, що система макета працює добре.
користувач2875289

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
Також реакція-flexbox-сітка залежить від 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 із усім іншим із Material UI.


5

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


3
Я думаю, що це трохи вагома вага :) Чи є спосіб включити лише стилі, пов’язані з сіткою?
харандзюк

2
Тож за допомогою React-Bootstrap все одно потрібно включити відповідний файл css. На сайті getbootstrap.com/customize ви можете налаштувати просто включити систему Grid та використати її мінімізовану версію ~
yuchien

5

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

  1. Структура CSS: сітка, що реагує на матеріали
  2. Набір компонентів React, які реалізують цей фреймворк: сітка-реакція-матеріал-реагування .

Ці пакети відповідають стандартам чуйного інтерфейсу, описаним Google. Всі розміри вікон перегляду, визначені у їх стандартах, підтримуються з урахуванням належних жолобів, рекомендованої кількості стовпців і навіть поведінки макета, що перевищує 1600 dp. Він повинен поводитись так, як рекомендується для кожного пристрою в посібнику з метрики пристрою .


1

Нижче зроблено суто MUI Grid system ,

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.