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.
reactjs
material-design
material-ui
grid-system
kharandziuk
źródło
źródło
Odpowiedzi:
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:
Jest teraz w oficjalnej dokumentacji z przykładami kodu .
źródło
Select Field
. Utknąłem na tym, jak wykorzystać takie pola. Czy możesz mi w tym pomóc?Select
brakuje, 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.Z opisu specyfikacji projektu materiału :
Jeśli szukasz dużo lekkiej biblioteki komponentów Grid, używam React-Flexbox-Grid , implementacji
flexboxgrid.css
w React.Co więcej, React-Flexbox-Grid dobrze grał zarówno z interfejsem materiału , jak i React- toolbox (alternatywna implementacja Material Design).
źródło
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.
Teraz, wykonując więcej obliczeń, możesz łatwo podzielić komponenty na stronie.
Dalsze czytanie na flex
źródło
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-gridreact-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 projektuStosowanie
-
źródło
Po prostu idę na http://getbootstrap.com/customize/ i sprawdzam tylko „grid system”, aby pobrać. Są
bootstrap-theme.css
ibootstrap.css
w 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.
źródło
Po prostu używam https://react-bootstrap.github.io/ dla Responsive Layout i Material-ui dla wszystkich komponentów
źródło
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:
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ń .
źródło
Poniżej jest wykonany wyłącznie przez system MUI Grid ,
Za pomocą poniższego kodu
↓ KodSandbox ↓
źródło
To jest stare pytanie, ale Google zaprowadzi mnie tutaj. Po krótkich poszukiwaniach znalazłem dobry pakiet: https://www.npmjs.com/package/react-grid-system
Myślę, że to najlepszy, łatwy w użyciu i lekki.
źródło
Oto przykład systemu grid z material-ui, który jest podobny do bootstrap:
źródło