Я трохи граю з Material-UI . Чи є варіанти для створення макети сітки (як у Bootstrap )?
Якщо ні, то який спосіб додати цю функціональність?
Є компонент GridList, але, мабуть, він має інше призначення.
Я трохи граю з Material-UI . Чи є варіанти для створення макети сітки (як у Bootstrap )?
Якщо ні, то який спосіб додати цю функціональність?
Є компонент GridList, але, мабуть, він має інше призначення.
Відповіді:
Користувацький інтерфейс користувача реалізував власну розкладку Flexbox через компонент Grid .
Здається, вони спочатку хотіли зберегти себе як суто бібліотеку «компонентів». Але один з основних розробників вирішив, що це занадто важливо, щоб не було власних . Тепер він об'єднаний в основний код і був випущений з v1.0.0 .
Ви можете встановити його за допомогою:
npm install @material-ui/core
Він зараз знаходиться в офіційній документації з прикладами коду .
Select Field
. Я застряг у використанні таких полів. Чи можете ви мені допомогти через це?
Select
немає, я просто замінив його перемикачами на даний момент, але я впевнений, що не буде багато часу, перш ніж вибір буде перенесений зі стовбура.
З опису специфікацій дизайну матеріалу :
Списки сітки - це альтернатива стандартним переглядам списків. Списки сіток відрізняються від сіток, які використовуються для макетів та інших візуальних презентацій.
Якщо ви шукаєте значно полегшену бібліотеку компонентів Grid, я використовую React-Flexbox-Grid , реалізацію flexboxgrid.css
в React.
На додаток до цього, React-Flexbox-Grid чудово грає як з material-ui , так і react-toolbox (альтернативна реалізація дизайну матеріалів).
Я озирнувся, щоб відповісти на це, і найкращий спосіб, який я знайшов, - це використовувати 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>
)
}
}
Тепер, за допомогою декількох додаткових обчислень, ви можете легко розділити свої компоненти на сторінці.
Я сподіваюся, що це не пізно, щоб дати відповідь.
Я також шукав просту, надійну, гнучку і дуже настроювану завантажувальну систему, як-от реагувати на сітчасту систему для використання у своїх проектах.
Найкраще, що я знаю, це 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>
);
Я так переходжу до http://getbootstrap.com/customize/ і лише завантажуйте "сітку" для завантаження. Є bootstrap-theme.css
іbootstrap.css
в завантажених файлах, і мені потрібен лише останній.
Таким чином я можу використовувати сітчасту систему Bootstrap із усім іншим із Material UI.
Я просто використовую https://react-bootstrap.github.io/ для чуйного макета та Material-ui для всіх компонентів
У мене були складнощі знайти рамку інтерфейсу користувача, яка б реалізувала стандарти Material Design для чуйного поведінки, тому я створив два пакети, які реалізують систему сітки для Material Design:
Ці пакети відповідають стандартам чуйного інтерфейсу, описаним Google. Всі розміри вікон перегляду, визначені у їх стандартах, підтримуються з урахуванням належних жолобів, рекомендованої кількості стовпців і навіть поведінки макета, що перевищує 1600 dp. Він повинен поводитись так, як рекомендується для кожного пристрою в посібнику з метрики пристрою .
Нижче зроблено суто MUI Grid system ,
З наведеним нижче кодом,
// 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 ↓
Це старе питання, але google привезе мене сюди. Після невеликого пошуку я знайшов хороший пакет: https://www.npmjs.com/package/react-grid-system
Я думаю, що це найкраще, просте у використанні та легке.