Material-ui: [Grid] 자동 높이 조절 (Responsive Layout)

나는 당신이 성취하려는 것이 사용자 영역에서 구현될 수 있고 틈새 시장을 목표로 할 수 있다고 생각합니다. 그런 이유로 나는 이 문제를 닫습니다. 코드 기반을 단순하게 유지합시다.

코드의 기초가 단순하게 유지되었다는 사실을 충분히 이해하지만 재료 사양은 "단일 열 형식의 요소가 다양한 조합으로 콘텐츠 영역을 채우기 위해 리플로우될 수 있습니다 . .

그러나 현재 Grid로 할 수 있는 최선은 다음과 같습니다.

그렇다면 코드는 기능을 가지면서도 단순하게 유지될 수 있다고 진지하게 생각합니다.

감사합니다,

추신: 사양과 동일한 결과를 만드는 작은 구성 요소를 알고 있다면 알려주십시오.
(하지만 머티리얼 UI에 통합하면 모두에게 도움이 될 것이라고 생각합니다.)

석조 라이브러리를 찾고 있을 수도 있습니다: https://masonry.desandro.com/layout.html.

네, 머티리얼 UI의 네이티브 통합을 기다리는 동안 좋은 생각 _{^{입니다. 언젠가 오면 :)}}

추신: 문제의 재개를 고려할 수 있습니까?

감사합니다,

이 기능을 통합하는 데 도움이 필요하면 여기 에서 Google의 머티리얼 프레임워크의 CSS 코드에 대한 지원을 받을 수 있다고 생각합니다

Material ui는 확실히 최고의 React 구성 요소 세트입니다!

나는 getmdl이 그것을 할 수 있다고 생각하지 않지만, 나는 당신이 제공한 링크가 정적 예라고 확신합니다. 동적 콘텐츠의 경우 angular material 2 grid list 또는 angular material 1 grid list 에서만 작동하는 것을 보았습니다. 그러나 그들은 복잡한 알고리즘을 사용합니다 ...

네, 맞습니다. 하지만 대시보드의 내용이 정적이어서는 안 된다고 지정하지 않았습니다 😄
분명히 머티리얼 앵글은 그리드가 하지 않는 일을 아주 잘 수행합니다... 하지만 너무 복잡한 논리로 !

사실, 내가 이해하는 바에 따르면 Grid xs , sm , md 등의 반응형 중단점으로 이미 구현할 수 있는 것입니다.
"100%" 자동으로 필요한 것이 있으면 벽돌 라이브러리가 더 적합하지만 프로젝트 범위를 벗어납니다.

안녕하세요 @oliviertassinari ,
그러나 그리드에 대한 재료 사양은 무엇입니까? 내 이전 댓글에서 설명했듯이?

중단점으로 구현하는 방법을 이해할 수 없습니다. 그리드는 크기를 수정할 수 없습니다! 문제는 여기에 있습니다!

두 번째 음악 카드가 "aperçu" 카드에 붙을 수 없는 이유는 무엇입니까? 이것은 재료 사양에 어긋납니다.

더 일반적으로, 그리드가 사용자가 원하는 대로 카드를 배치할 수 있는 선택권을 주지 않는 이유는 무엇입니까?

내 요청을 이해하고 문제를 다시 열 수 있기를 바랍니다.
그리고 진심으로, 나는 이것이 프로젝트 외부에 있다고 생각하지 않습니다. material.angular는 그것을 통합했습니다.

• withWidth() 상위 구성 요소를 사용하여 다른 중단점에 대한 그리드 구조를 변경할 수 있습니다. 그리드는 flexbox 모델에 대한 얇은 래퍼이며 이 레이아웃 모델이 허용하는 모든 작업은 Grid 구성 요소로 달성할 수 있습니다.
• 또한 행에서 열로 방향을 변경하여 원하는 동작을 할 수 있습니다.

흠, 대처할 수 있을 것 같은데, 같은 질문을 하는 초보자를 위한 설명서에 이 예제를 추가할 수 있다면?
내 대시보드를 구현하는 방법에 대해 생각해야 합니다... 도와주셔서 감사합니다.

저도 이 기능을 원했는데 제안한 대로 구현하는 방법을 이해하지 못했습니다. HelloEdit, 이 작업을 수행할 수 있었습니까? 예를 들어 줄 수 있습니까? 이 사용 사례는 문서에 있어야 한다고 생각합니다.

이봐, 나는 해결책을 찾지 못했습니다 (벽돌과 같은 외부 라이브러리를 사용하면 작동 할 수 있습니다). 그러나 기본적으로는 없습니다. 나는 여전히 이 기능을 기본적으로 구현하려는 생각을 유지합니다!

결국 2개의 열을 만들고 데이터를 균등하게 분할했습니다. 문제는 열 중 하나가 더 큰 카드로 끝나는 경우 한쪽이 다른 쪽보다 길 수 있다는 것입니다.

@HelloEdit 에 동의합니다. 이것은 그리드에 포함되지 않는 것이 큰 문제입니다. 처음에는 Material-UI 그리드를 사용하는 것이 조금 절름발이 느낌이 들었습니다. 왜 대부분의 시간에 보기 흉한 간격으로 보기 좋지 않고 Material-UI 사양을 따르지 않는 그리드를 사용하고 싶겠습니까?

내 앱에는 Material-UI 그리드처럼 작동하기를 원하는 단일 그리드가 없으며 그리드 문서 페이지 는 그리드가 작동하는 방식을 보여주기에는 너무 단순하므로 이것을 깨닫지 못했습니다. 내 앱에서 발견하기 전에 그리드의 "기능"이었습니다.

@marco-silva0000이 한 경우와 동일한 작업을 수행했지만 이는 명백한 해킹이며 항목의 크기가 거의 동일하지 않으면 바닥에서도 보기 흉할 수 있습니다.

@HelloEdit를 다시 열어주세요. 이것이 큰 문제라는 데 동의합니다. 제공된 "해결책"이 만족스럽지 않습니다.
또한 앞서 언급했듯이 물질적 지침을 따르지 않습니다.

작업이 많고 라이브러리가 훌륭하다는 것을 이해하지만 완전히 반응하는 레이아웃을 구현하려는 경우 이 특정 지점이 정말 문제가 됩니다.

@oliviertassinari 예시 레이아웃에 대한 잠재적 가능성...

이에 대한 진전이 있습니까?

Grid rowHeight 속성은 수동으로 설정하거나 기본적으로 1:1로 가정할 수 있습니다. 내부에 동적 데이터가 반복되는 카드를 표시하면 높이가 조정되지 않습니다.

1. 사례 1, 카드가 5개의 데이터를 보유할 수 있고 2개의 데이터만 존재하는 경우 카드 높이는 조정되지만 그리드 높이는 1:1로 유지됩니다.
2. 사례 2, 카드가 5개의 값을 보유할 수 있지만 7개가 존재하는 경우 나머지 데이터는 잘리고 화면에 표시되지 않습니다.

이 문제에 대한 해결책이 있다면 예를 들어 주시겠습니까? 네이티브 지원에 대한 내 투표. 이것이 Grid 컴포넌트의 기본적인 기능이라고 생각합니다.

다음과 같은 것이 당신이 원하는 것입니까: https://codesandbox.io/s/p5v42zrrzm
CSS 그리드로 구동되므로 어디에서나 사용할 수 없습니다. https://caniuse.com/#feat =css-grid

@joshwooding 내 iPad에서 볼 수 있는 것을 기반으로 하면 매우 좋아 보입니다! 내일 데스크탑에서 확인하겠습니다.

바탕 화면 에서

1. 이것은 현재 그리드와 마찬가지로 중단점을 기반으로 응답해야 합니다.
2. 나는 MacCard Component에 두 개의 Typography 요소를 추가하여(내 사용 사례인 가변 높이 카드를 시뮬레이션하기 위해) 키를 더 크게 만들었습니다. 그 후 결과에는 행 사이에 원치 않는 빈 공간이 있습니다. 따라서 이것은 결국 작동하지 않습니다. 아래 스크린샷:
   

Grid의 석조 레이아웃 지원은 굉장할 것입니다 👍, 이론적으로 JS를 사용하면 작동할 수 있지만 이상적이지는 않습니다.

CSS 그리드 레이아웃은 이를 위한 것이 아닙니다. https://github.com/w3c/csswg-drafts/issues/945를 참조

임시 솔루션은 원하는 대로 열을 만들고 퍼뜨리는 것입니다.
예를 들어
여기에 두 개의 열이 있고 키가 홀수이면 나눕니다.
모바일용 한 열에 모두 포함된 1개의 메인 그리드
나는 smDown에서 첫 번째 것을 숨 깁니다.
mdUp에서 메인 숨기기

이것에 대한 소식이 있습니까?

flexbox를 사용하는 것이 더 쉬울 때 분명히 문제가 있을 것입니다.

@CloudNineK Flexbox는 이 문제를 해결하지 못합니다(Grid는 flexbox 기반임). 다양한 수의 열 간에 콘텐츠를 고르게 배포하려면 석조 라이브러리를 사용해야 합니다.

MUI에서 일종의 석조 기능도 보고 싶다는 말을 하고 싶습니다. 기능을 지원하도록 MuiGrid를 변경하지 않고 대신 지원하는 새 구성 요소를 추가할 수 있습니다. 따라서 Masonry 효과를 위해 MuiGrid를 래핑하는 조잡한 구성 요소를 그렸습니다. 이것이 컴포넌트 생성의 시작이 될 수 있기를 바랍니다.

관심 있는 분들을 위해 여기 있습니다: https://codesandbox.io/s/masonryplusmui-xk8rr?fontsize=14

물론 문제가 있지만. 현재 작동하는 방식은 미리 정의된 중단점을 사용하고(저는 theme.breakpoints.values에서 가져옴) 이를 기반으로 만들 열 수를 계산합니다. MUI의 구성 요소가 작동하는 방식이 아니라는 것을 알고 있지만 이 시점에서는 이 방법으로 전체 열의 너비만 설정할 수 있었습니다.

@weiluntong 그것도 가능한 해결책이지만 나는 그것이 우아하다고 생각하지 않습니다.
누군가가 랩을 포크하고 이를 새로운 구성 요소로 홍보하거나 제안해야 할 수도 있습니다.

@nikandlv 전적으로 동의합니다. 현재 이것은 MUI가 아니며 Masonry 레이아웃도 아닌 일종의 림보에 있습니다. 구성 요소를 만들고 PR을 하는 것이 좋습니다. 사실 그것이 여기에서의 최종 목표가 되기를 바랐지만 어디서부터 시작해야 할지 확신이 서지 않았기 때문에 샌드박스를 만들었습니다. 다시, 나는 그것이 시작이 될 수 있기를 바랐다? 아니면 구성 요소의 기본 구조에 대해 완전히 왼쪽 필드입니까? 저를 이끌어줄 수 있는 정보를 원합니다.

@weiluntong 나는 당신이 구성 요소와 함께 올바른 길을 가고 있다고 생각합니다. 아마도 더 많은 작업이 필요할 것입니다. 그러나 유지 관리자에게 MUI의 일부로 원하는지 아니면 게시할 수 있는 라이브러리로 원하는지 물어봐야 합니다.
그리고 https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md가 말했듯이

새 구성 요소를 제출할 때 랩에 추가하십시오.

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

문제 해결을 고려하려면 해당 문제에 대해 더 많은 찬성표가 필요합니다.

@weiluntong 여전히 제안서를 준비할 시간이 있다고 생각한다면 별도의 전용 석조 구성 요소에 한 표를 던질 수 있습니다. 유지 보수 및 사용을 위한 가장 쉬운 옵션일 수 있습니다.

react-virtualized Masonry 구성 요소를 사용하고 있었습니다. 그러나 react-virtualized 는 최신 babel 및 core-js 작동하지 않습니다 . 후속 react-window 에도 Masonry 구성 요소가 포함되지 않을 것으로 보입니다 . 아마도 react-virtualized Masonry 구성 요소가 업데이트되어 material-ui 채택될 수 있습니까?

찬성표를 통합할 수 있는 제안서를 작성하는 데 신경쓰지 않겠습니다. 사용해야 하는 제안서 템플릿이 있습니까?

@weiluntong https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md 로 문제를 제출하고 거기에서 구성 요소 요청을 설명하고 찬성을 요청해야 합니다.

@weiluntong 새 이슈를 만들 때 템플릿이 있습니다.

내가 누락된 것이 있으면 수정해 주세요. 하지만 스택 오버플로에서 이 솔루션을 적용하여 이 정확한 문제로 보이는 것을 해결할 수 있었습니다.
Simply apply height: 100% to the children of Grid items.
https://stackoverflow.com/questions/50743402/material-ui-grid-item-height

그렇지 않습니다 @dylanmartin 우리는 그것이 늘어나기를 원하지 않습니다. 우리는 다음 행이 그 간격을 채우기를 원합니다!

#17000 마감