Material-ui: [Kisi] Penyesuaian ketinggian otomatis (Tata Letak Responsif)

Saya merasa bahwa apa yang ingin Anda capai dapat diimplementasikan di userland dan menargetkan ceruk, untuk alasan itu, saya menutup masalah. Mari kita jaga agar basis kode tetap sederhana.

Saya sepenuhnya memahami fakta bahwa dasar kode tetap sederhana, tetapi spesifikasi material menyatakan: "Elemen dari format satu kolom dapat mengalir kembali untuk mengisi area konten dalam berbagai kombinasi."

Tetapi saat ini yang terbaik yang dapat saya lakukan dengan Grid adalah ini:

Kemudian saya benar-benar berpikir bahwa sebuah kode dapat tetap sederhana sambil memiliki fungsi

Terima kasih,

PS: Jika Anda mengetahui komponen KECIL untuk membuat hasil yang sama dengan spesifikasi, beri tahu saya.
(Tapi saya masih berpikir bahwa integrasi di Material UI akan bermanfaat bagi semua orang)

Mungkin Anda mencari perpustakaan batu: https://masonry.desandro.com/layout.html.

Ya, Ini adalah ide bagus sambil menunggu integrasi asli di Material UI _{^{Jika itu datang suatu hari nanti :)}}

PS: Bisakah Anda mempertimbangkan pembukaan kembali masalah ini?

Terima kasih,

Jika Anda memerlukan bantuan untuk mengintegrasikan fitur ini, saya pikir Anda dapat mengambil dukungan pada kode CSS kerangka material Google di sini

Material ui tentu saja merupakan kumpulan komponen React terbaik!

Saya tidak berpikir getmdl bisa melakukannya, saya belum memeriksanya tetapi saya cukup yakin bahwa tautan yang Anda berikan adalah contoh statis. Untuk konten dinamis, saya telah melihatnya bekerja hanya di bahan bersudut 2 daftar kisi atau bahan bersudut 1 daftar kisi . Tetapi mereka menggunakan algoritma yang kompleks ...

Yap, Anda benar, tetapi saya tidak pernah menetapkan bahwa isi dasbor tidak boleh statis
Rupanya, material angular melakukan dengan sangat baik apa yang tidak dilakukan grid ... Tetapi dengan logika yang terlalu rumit!

Sebenarnya, dari apa yang saya pahami, sesuatu yang sudah dapat Anda implementasikan dengan break point responsif dari Grid xs , sm , md , dll.
Jika Anda memerlukan sesuatu yang "100%" otomatis maka perpustakaan batu akan lebih cocok untuk Anda butuhkan tetapi itu di luar cakupan proyek.

Halo @olivietassinari ,
Tapi spesifikasi Material untuk grid? Seperti yang saya jelaskan di komentar saya sebelumnya?

Saya tidak mengerti bagaimana saya bisa mengimplementasikannya dengan breakpoints, grid tidak mengizinkan modifikasi ukurannya! Masalahnya ada di sini!

Mengapa kartu musik kedua tidak dapat menempel pada kartu "aperçu" ? Hal ini bertentangan dengan spesifikasi material.

Lebih umum, mengapa grid tidak menyerahkan pilihan kepada pengguna untuk menempatkan kartunya sesuai keinginannya?

Saya harap Anda akan memahami permintaan saya, dan Anda akan membuka kembali masalah ini
Dan sejujurnya, saya tidak berpikir ini di luar proyek, material.angular mengintegrasikannya.

• Anda dapat menggunakan komponen urutan lebih tinggi withWidth() untuk mengubah struktur grid untuk breakpoint yang berbeda. Grid adalah pembungkus tipis di atas model flexbox, apa pun yang dimungkinkan oleh model tata letak ini dapat dicapai dengan komponen Grid.
• Juga, Anda dapat mengubah arah dari baris ke kolom untuk memiliki perilaku yang diinginkan.

Hum, saya pikir saya akan bisa mengatasinya, tetapi apakah mungkin untuk menambahkan contoh ini dalam dokumentasi untuk pemula yang menanyakan pertanyaan yang sama ?
Saya perlu memikirkan bagaimana saya akan menerapkan dasbor saya ... terima kasih atas bantuan Anda

Hei, saya juga ingin fitur ini, dan saya tidak mengerti bagaimana itu bisa diterapkan seperti yang disarankan. HaloEdit, apakah Anda berhasil membuatnya berfungsi? dapatkah anda memberikan contoh? Saya pikir use case ini harus ada dalam dokumentasi.

Hei, saya tidak menemukan solusi (menggunakan perpustakaan eksternal seperti batu bisa bekerja) Tapi tidak ada yang asli. Saya masih mempertahankan ide saya untuk mengimplementasikan fitur ini secara native!

Kami akhirnya membuat 2 kolom dan membagi data secara merata. Masalahnya adalah jika salah satu kolom berakhir dengan semua kartu yang lebih besar, satu sisi bisa lebih panjang dari yang lain.

Saya setuju dengan @HelloEdit . Ini adalah masalah besar untuk tidak dimasukkan ke dalam grid. Saya merasa agak lumpuh untuk selamanya menggunakan kisi Material-UI, karena mengapa saya ingin menggunakan kisi yang terlihat buruk dengan celah jelek sebagian besar waktu dan tidak mengikuti spesifikasi Material-UI?

Saya tidak memiliki satu kisi pun di aplikasi saya di mana saya ingin itu berfungsi seperti kisi Material-UI dan halaman dokumentasi kisi Anda terlalu sederhana untuk menunjukkan bahwa inilah cara kerja kisi Anda, jadi saya tidak menyadari ini adalah "fitur" kisi Anda sebelum menemukannya di aplikasi saya.

Saya melakukan hal yang sama seperti yang dilakukan @ marco-silva0000 dalam satu contoh, tetapi ini adalah peretasan yang jelas dan kecuali semua item Anda berukuran sama, kemungkinan besar juga akan terlihat jelek di bagian bawah.

Silakan buka kembali @HelloEdit Saya setuju ini adalah masalah besar, "solusi" yang diberikan tidak memuaskan.
Selain itu, seperti yang dinyatakan sebelumnya, itu tidak mengikuti pedoman materi.

Saya mengerti Anda memiliki banyak pekerjaan dan perpustakaan Anda luar biasa, tetapi poin khusus ini sangat bermasalah jika Anda ingin menerapkan tata letak yang sepenuhnya responsif.

@oliviertasinari Potensi di sini untuk contoh tata letak...

Ada kemajuan dalam hal ini?

Properti grid rowHeight dapat diatur secara manual atau secara default diasumsikan 1:1. Jika kami menampilkan kartu di mana data dinamis dilingkarkan, maka ketinggiannya tidak disesuaikan.

1. Kasus 1, jika kartu dapat menampung 5 data dan hanya ada dua data, maka tinggi kartu disesuaikan tetapi tinggi kisi tetap 1:1.
2. Kasus 2, Jika kartu dapat menampung 5 nilai tetapi ada 7, maka data yang tersisa dipotong dan tidak pernah ditampilkan di layar.

Jika ada solusi untuk masalah ini tersedia, akan menghargai contoh? Suara saya terhadap dukungan asli. Saya pikir ini adalah semacam fungsi mendasar untuk komponen Grid.

Apakah sesuatu seperti ini yang Anda inginkan: https://codesandbox.io/s/p5v42zrrzm
Ini didukung oleh grid CSS sehingga tidak dapat digunakan di mana-mana: https://caniuse.com/#feat =css-grid

@joshwooding Berdasarkan apa yang saya lihat di iPad saya, terlihat sangat bagus! Akan memeriksa besok di desktop.

EDIT setelah memeriksa desktop , beberapa masalah dengan solusi ini:

1. Ini harus responsif berdasarkan breakpoint seperti Grid sekarang.
2. Saya menambahkan beberapa elemen Tipografi ke Komponen MacCard (untuk mensimulasikan kartu tinggi variabel, yang merupakan kasus penggunaan saya), membuatnya lebih tinggi. Setelah itu hasilnya memiliki ruang kosong yang tidak diinginkan di antara baris. Dengan demikian, ini tidak berfungsi sama sekali. Tangkapan layar di bawah ini:
   

Dukungan tata letak batu di Grid akan luar biasa 👍, secara teori menggunakan JS bisa bekerja tetapi tidak ideal

tata letak kisi css tidak dimaksudkan untuk ini, lihat: https://github.com/w3c/csswg-drafts/issues/945

Solusi sementara akan membuat kolom seperti yang Anda inginkan dan menyebarkannya
Misalnya
di sini saya memiliki dua kolom dan membaginya jika kuncinya ganjil
dan 1 jaringan utama dengan semua dalam satu kolom untuk seluler
saya sembunyikan yang pertama di smDown
dan sembunyikan yang utama di mdUp

Beberapa berita tentang ini?

Ketika lebih mudah menggunakan flexbox saja pasti ada masalah.

@CloudNineK Flexbox tidak menyelesaikan masalah ini (Grid berbasis flexbox). Anda perlu menggunakan perpustakaan masonary jika Anda ingin mendistribusikan konten secara merata di antara berbagai jumlah kolom.

Saya hanya ingin berpadu dengan mengatakan bahwa saya juga ingin melihat semacam fungsi batu dari MUI. Mungkin tidak mengubah MuiGrid untuk mendukung fungsionalitas, tetapi mungkin menambahkan komponen baru yang mendukungnya. Karena itu, saya membuat komponen kasar untuk membungkus MuiGrid untuk efek Masonry. Saya berharap ini mungkin bisa menjadi awal untuk membuat komponen?

Ini dia untuk mereka yang tertarik: https://codesandbox.io/s/masonryplusmui-xk8rr?fontsize=14

Tentu saja ada masalah sekalipun. Cara kerjanya saat ini adalah membutuhkan breakpoint yang telah ditentukan sebelumnya (saya menariknya dari theme.breakpoints.values) dan menghitung berapa banyak kolom yang harus dibuat berdasarkan itu. Saya tahu bahwa bukan itu perilaku komponen MUI, tetapi pada titik ini, saya benar-benar hanya dapat mengatur lebar seluruh kolom dengan metode ini.

@weiluntong Itu juga merupakan solusi yang mungkin, namun menurut saya itu tidak elegan
mungkin seseorang harus membayar lab dan membuat pr atau proposal untuk ini sebagai komponen baru

@nikandlv Saya sepenuhnya setuju dengan Anda. Saat ini masalahnya berada dalam semacam limbo di mana itu tidak cukup MUI juga bukan tata letak Masonry. Saya akan dengan senang hati membuat komponen dan membuat PR. Sebenarnya, itulah yang saya harapkan akan menjadi tujuan akhir saya di sini, tetapi saya membuat kotak pasir karena saya tidak yakin harus mulai dari mana. Sekali lagi, saya berharap ini bisa menjadi awal? Atau apakah saya benar-benar meninggalkan bidang untuk struktur dasar komponen? Saya ingin masukan untuk membuat saya maju.

@weiluntong Saya pikir Anda berada di jalur yang benar dengan komponen, mungkin perlu sedikit lebih banyak pekerjaan. namun, Anda harus bertanya kepada pengelola apakah mereka menginginkan ini sebagai bagian dari MUI atau hanya sebagai perpustakaan yang dapat Anda terbitkan
dan seperti yang dikatakan https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md

Saat mengirimkan komponen baru, harap tambahkan ke lab.

https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab

Kami akan membutuhkan lebih banyak suara positif pada masalah ini untuk mempertimbangkan pemecahan masalah.

Jika @weiluntong Anda masih merasa punya waktu untuk menyiapkan proposal, saya mungkin memberikan suara saya untuk komponen pasangan bata khusus yang terpisah. Mungkin pilihan termudah untuk pemeliharaan, dan penggunaan.

Saya menggunakan komponen react-virtualized Masonry . Namun, react-virtualized tidak berfungsi dengan babel dan core-js . Tampaknya penggantinya react-window juga tidak mungkin menyertakan komponen Masonry . Mungkin komponen react-virtualized Masonry dapat diperbarui dan diadopsi menjadi material-ui ?

Saya tidak keberatan menyusun proposal di mana kita dapat mengkonsolidasikan upvotes. Apakah ada template proposal yang harus saya gunakan?

@weiluntong saya kira sebagai https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md Anda harus mengirimkan masalah dan menjelaskan permintaan komponen di sana dan meminta upvotes

@weiluntong Ada template saat Anda membuat masalah baru.

Perbaiki saya jika saya kehilangan sesuatu, tetapi saya dapat menyelesaikan apa yang tampaknya menjadi masalah yang tepat ini dengan menerapkan solusi ini dari stack overflow:
Simply apply height: 100% to the children of Grid items.
https://stackoverflow.com/questions/50743402/material-ui-grid-item-height

Bukan itu masalahnya @dylanmartin kami tidak ingin memanjang, kami ingin baris berikutnya mengisi celah itu!

Penutupan untuk #17000