Materialny interfejs użytkownika i system siatki

118

Bawię się trochę z Material-UI . Czy są jakieś opcje tworzenia układu siatki (jak w Bootstrap )?

Jeśli nie, w jaki sposób można dodać tę funkcjonalność?

Istnieje składnik GridList, ale wydaje mi się, że ma on inny cel.

kharandziuk
źródło
Nie myśl, że ma jakieś komponenty do tworzenia responsywnych siatek.
Lucky Chingi
odpowiedź jest tutaj github.com/callemall/material-ui/issues/190
kharandziuk

Odpowiedzi:

126

Material UI zaimplementował własny układ Flexbox za pośrednictwem komponentu Grid .

Wygląda na to, że początkowo chcieli pozostać czysto biblioteką „komponentów”. Ale jeden z głównych programistów zdecydował, że zbyt ważne jest, aby nie mieć własnego . Został teraz włączony do podstawowego kodu i został wydany w wersji 1.0.0 .

Możesz go zainstalować przez:

npm install @material-ui/core

Jest teraz w oficjalnej dokumentacji z przykładami kodu .

icc97
źródło
Widzę, że opublikowałeś odpowiedź, którą właśnie zamierzałem dodać! lol. właśnie odpowiedział na Twój komentarz dotyczący aktualnej wiodącej odpowiedzi.
Cleanshooter
Właśnie zainstalowałem i teraz używasz gałęzi alfa Material UI. Potwierdza, że ​​system Layout działa dobrze.
user2875289
3
System grid działa dobrze, ale jest kilka komponentów, które nie zostały jeszcze zaimplementowane, takie jak Select Field. Utknąłem na tym, jak wykorzystać takie pola. Czy możesz mi w tym pomóc?
Suresh Mainali
1
Zgadzam się z @SureshMainali, ponieważ mam te same problemy. Większość komponentów ma brakujące rekwizyty, a nawet jeśli chodzi o implementację niestandardowego motywu
Sai Ram
@SaiRam Nie powiedziałbym większości, ale faktycznie Selectbrakuje, właśnie zastąpiłem go przyciskami radiowymi na razie, ale jestem pewien, że nie potrwa to długo, zanim selekcja zostanie przeniesiona z trunk.
icc97
35

Z opisu specyfikacji projektu materiału :

Listy siatek są alternatywą dla standardowych widoków list. Listy siatek różnią się od siatek używanych do układów i innych prezentacji wizualnych.

Jeśli szukasz dużo lekkiej biblioteki komponentów Grid, używam React-Flexbox-Grid , implementacji flexboxgrid.cssw React.

Co więcej, React-Flexbox-Grid dobrze grał zarówno z interfejsem materiału , jak i React- toolbox (alternatywna implementacja Material Design).

Roy Lee
źródło
32
React-Flexbox-Grid jest słabo zaimplementowany w momencie pisania tego posta i wymaga wielu zewnętrznych zależności, aby działać poprawnie. Poza tym @Roylee jest jego twórcą ... więc jego opinia i tak jest nieco stronnicza;) ...
Cleanshooter
1
Ponadto, react-flexbox-grid zależy od flexboxgrid, który nie używa tych samych responsywnych punktów przerwania zalecanych w Material Design. Zobacz: material.io/guidelines/layout/…
Ken Gregory,
@Cleanshooter czy to byłaby Twoja konkurencyjna wersja ? Być może też jesteś trochę stronniczy :)
icc97
@ icc97 tak i nie. Tak naprawdę nie zamierzałem „konkurować”, to była raczej przerwa w tworzeniu aplikacji. Zrobiłem to po rozczarowaniu oboma ... to już naprawdę nie ma znaczenia, ponieważ chłopaki z CallEmAll włączyli system grid w najnowszym wydaniu Material-UI. Jednak nie próbowałem tego jeszcze osobiście. github.com/callemall/material-ui/pull/5808
Cleanshooter
1
@Cleanshooter Twój wyglądał całkiem nieźle. Testowałem nową siatkę Material-UI i jak na razie działa dobrze.
icc97
20

Rozejrzałem się za odpowiedzią na to pytanie i najlepszym sposobem, jaki znalazłem, było użycie Flex i stylizacji inline na różnych komponentach.

Na przykład, aby podzielić mój pełny ekran na 2 pionowe komponenty (w stosunku 1: 4), następujący kod działa dobrze.

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

Teraz, wykonując więcej obliczeń, możesz łatwo podzielić komponenty na stronie.

Dalsze czytanie na flex

shobhit1
źródło
2
Zgadzam się, użycie właściwości flex css zapewniło proste formatowanie, którego potrzebowałem.
James Gentes,
11

Mam nadzieję, że nie jest za późno na udzielenie odpowiedzi.

Szukałem również prostego, solidnego, elastycznego i wysoce konfigurowalnego systemu bootstrap, takiego jak React Grid, do wykorzystania w moich projektach.

Najlepsze, co wiem, to react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid daje możliwość dostosowania każdego aspektu systemu sieci, a jednocześnie ma wbudowane ustawienia domyślne, które prawdopodobnie pasują do każdego projektu

Stosowanie

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>
);
Musyoka Morris
źródło
8

Po prostu idę na http://getbootstrap.com/customize/ i sprawdzam tylko „grid system”, aby pobrać. Są bootstrap-theme.cssi bootstrap.cssw pobranych plikach, a ja potrzebuję tylko tego drugiego.

W ten sposób mogę korzystać z systemu grid w Bootstrap, ze wszystkim innym z Material UI.

6324
źródło
5

Po prostu używam https://react-bootstrap.github.io/ dla Responsive Layout i Material-ui dla wszystkich komponentów

yuchien
źródło
3
Myślę, że to trochę ciężka :) Czy jest sposób na uwzględnienie tylko stylów związanych z siatką?
kharandziuk
2
Tak więc używanie React-Bootstrap nadal wymaga dołączenia odpowiedniego pliku css. Na stronie getbootstrap.com/customize możesz dostosować tylko system Grid i użyć jego zminimalizowanej wersji ~
yuchien,
5

Miałem trudności ze znalezieniem frameworka interfejsu użytkownika, który implementowałby standardy Material Design dotyczące responsywnego zachowania, więc stworzyłem dwa pakiety, które implementują system siatki dla Material Design:

  1. Struktura CSS: siatka reagująca na materiały
  2. Zestaw komponentów React, które implementują ten szkielet: reagująca-materiał-reagująca-siatka .

Te pakiety są zgodne ze standardami responsywnego interfejsu użytkownika określonymi przez Google. Wszystkie rozmiary rzutni określone w ich standardach są obsługiwane z uwzględnieniem odpowiednich rynien, zalecanej liczby kolumn, a nawet zachowania układu przekraczającego 1600 dp. Powinien zachowywać się zgodnie z zaleceniami dla każdego urządzenia w przewodniku Metryki urządzeń .

Ken Gregory
źródło
1

Poniżej jest wykonany wyłącznie przez system MUI Grid ,

MUI - układ siatki

Za pomocą poniższego kodu

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

↓ KodSandbox ↓

Edytuj system MUI-Grid

Hasan Sefa Ozalp
źródło
0

Oto przykład systemu grid z material-ui, który jest podobny do bootstrap:

<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>
Timmy
źródło