구성 요소가 둘 이상의 분할을 포함 할 수 있도록 Angular에서 그리드 시스템을 만들기위한 아이디어
세바스찬 아라 네다
향후 프로젝트의 템플릿 역할을 할 Angular의 구성 요소를 개발하려고합니다. 아이디어는이 구성 요소가 다른 구성 요소를위한 공백이있는 행과 열의 N x M 행렬 (HTML로 쉽게 수행 가능)으로 구성된다는 것입니다.
문제는 일부 구성 요소가 N x M 그리드에서 하나 이상의 공간을 사용할 수 있기를 원한다는 것입니다. 예를 들어 차트는 N x M 그리드에서 2 x 2 일 수 있지만 숫자 카드는 1 x 1 일 수 있습니다.
문제는 예를 들어 그리드를 따라 2x2 구성 요소를 이동할 때마다 전체 HTML을 다시 작성하고 싶지 않다는 것입니다.
이 예에서 검은 색 격자는 하나 이상의 공간을 사용할 수있는 일부 구성 요소 (색상)로 채워져 있습니다.
지금까지 제가 연구해온 솔루션은 다음과 같습니다.
- 표준 부트 스트랩 그리드 시스템 사용 (두 개 이상의 공간을 사용하는 구성 요소에 대해 HTML을 다시 작성해야 함)
- 캔버스 사용 (캔버스에서 구성 요소를 "그리는"방법이 없음)
- 그리드의 크기와 코드에서 구성 요소의 분포를 설명하고, HTML을 생성하고 ngx-dynamic-hooks 라이브러리를 사용하여 이를 표시합니다 (생성 된 HTML에서 ngIf 및 ngFor를 허용하지 않음).
이 작업을 수행하는 더 쉬운 방법이 있습니까? 내가 뭔가를 놓치고 있습니까? 나는 모든 아이디어를 환영합니다 : D
마르 칸트 0
https://material.angular.io/components/grid-list/examples 사용
.ts예제 의 변수를 귀하의 기대에 맞는 변수 로 대체했습니다 . 예제의 첫 번째 행에 빈 자리 표시자를 삽입하기 위해 [style.opacity]에 "opacity"변수를 추가합니다.
tiles: Tile[] = [
{text: 'ZERO', cols: 2, rows: 2, color: "none", opacity: 0},
{text: 'One', cols: 2, rows: 2, color: 'green' },
{text: 'Two', cols: 2, rows: 2, color: 'red' },
{text: 'Three',cols: 1, rows: 3, color: 'orange' },
{text: 'Four', cols: 3, rows: 3, color: 'red' },
];
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
몇 마디 만하겠습니다