레이아웃: 필드 그리드 설정
필드 그리드는 단일 레이아웃에 여러 필드를 수집하지만 세트와 달리 다른 행을 참조할 수 있습니다.
필드 그리드는 매트릭스 레이아웃으로 수많은 필드를 표시합니다. 미리 정해진 횟수만큼 동일한 정보 세트를 요청해야 할 경우에 유용합니다. 필드 그리드를 사용하면 사용자가 반복되는 값의 테이블을 만들 수 있습니다. 필드 그리드에서 행은 다른 행을 참조할 수 있지만 세트에서 사용자는 인덱스 간에 규칙을 작성할 수 없습니다.
필드 그리드는 열 방향 또는 행 방향(즉, 가로 또는 세로)으로 확장될 수 있습니다.
필드 그리드에 표시하려는 모든 필드를 정의합니다. Matrix Loader는 이를 위한 좋은 도구입니다. 필드를 사용할 Blueprint와 연결합니다.
필드 그리드 레이아웃 설정
레이아웃에 필드 그리드를 추가하려면 필드 그리드가 행과 열을 생성하므로 열 세트가 필요하지 않습니다. 대신 다음 행 유형이 필요합니다.
- fieldgrid: 이 유형은 필드 그리드가 레이아웃에 사용될 것을 레이아웃에 알려줍니다.
- fieldgriddata: 이 유형은 필드 그리드의 각 열에 사용됩니다.
- field: 이 유형은 필드 그리드의 각 셀(각 행이 아님)에 필요합니다.
처음 세 이미지는 CSV 파일을 보여줍니다. 마지막 이미지는 해당 사용자 레이아웃을 보여줍니다. 위의 숫자는 아래 이미지의 숫자와 일치합니다. (숫자 3이 여러 번 표시되기 때문에 명확성을 위해 문자가 추가됩니다.) 필드 그리드의 개별 셀에는 레이블과 입력 필드를 모두 포함할 수 없습니다. 3C에서는 레이블과 입력 필드가 모두 레이아웃 CSV 파일에 추가됩니다. 그러나 입력 필드만 레이아웃에 포함됩니다.
필드 그리드 UI 컨트롤
레이아웃 CSV 파일의 값 필드를 업데이트하여 필드 그리드 UI의 다양한 측면을 제어할 수 있습니다.
- 눈금선 가시성
- 동적 열 헤더
- 필드 그리드 필드 너비
필드 그리드 요소
다음 값을 fieldgrid 요소의 값 열에 추가할 수 있습니다.
- indexPre: 인덱스 열에서 인덱스 번호 앞에 표시할 문자열 값입니다. 선택 사항
- indexPost: 인덱스 열에서 인덱스 번호 뒤에 표시할 문자열 값입니다. 선택 사항
- indexVisible: 예 | 필드 그리드 레이아웃에 인덱스 번호와 열을 표시할지 여부는 false입니다. 선택 사항, 기본값: true
- maximumHeight: CSS 픽셀에서 설정할 최대 높이입니다. 즉, "180px"입니다. 선택 사항
- gridlines: 모두 | 수평 | 수직 | none, 셀 사이에 그리드 라인이 표시되는 방법을 제어합니다. 선택 사항이며 기본값은 모두입니다.
FieldgridData 요소
fieldgriddata 요소의 값 열에 다음 값을 추가할 수 있습니다.
- fieldIndex: 헤더 값에 사용할 필드의 이름입니다. 옵션입니다. 포함된 경우 fieldgriddata 요소의 레이블은 비어 있어야 합니다.
- width: 필드의 너비입니다. 옵션입니다. 포함된 경우 유효한 값 auto의 예로는 , 300 (여기서는 px로 가정함), 300px, 20vw, 및 calc(100% - 100px).
필드 눈금의 기본 너비는 100%이지만 포함된 fieldgriddata 구성요소에 대해 하나의 너비 값이라도 지정되면 지정된 너비를 적용할 수 있도록 필드 눈금의 너비가 변경됩니다.auto