Web Components Hierarchical Grid의 Ignite UI for Web Components Column Resizing 기능을 사용하면 사용자가 열 IgcHierarchicalGridComponent의 너비를 쉽게 조정할 수 있습니다. 기본적으로 드래그 크기 조정 작업이 적용되는 동안 임시 크기 조정 표시기가 표시됩니다. Resizing Columns in Pixels/Percentages, Restrict Column Resizing, Auto-Size Columns on Double Click, Auto-Size Columns on Initialization과 같은 몇 가지 크기 조정 옵션을 사용할 수 있습니다.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"primary-key="ID"name="hierarchicalGrid1"id="hierarchicalGrid1"><igc-columnfield="Artist"header="Artist"data-type="string"resizable="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"min-width="115px"resizable="true"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"min-width="88px"max-width="230px"resizable="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="string"resizable="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"header="Album"data-type="string"resizable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"resizable="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"resizable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"resizable="true"></igc-column><igc-columnfield="Title"header="Title"data-type="string"resizable="true"></igc-column><igc-columnfield="Released"header="Released"data-type="date"resizable="true"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"resizable="true"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"><igc-columnfield="Tour"header="Tour"data-type="string"resizable="true"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"resizable="true"></igc-column><igc-columnfield="Location"header="Location"data-type="string"resizable="true"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"resizable="true"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
헤더의 오른쪽을 두 번 클릭하면 각 열의 크기가 자동으로 조정될 수 있습니다. 열의 크기는 헤더 자체를 포함하여 현재 표시되는 가장 긴 셀 값으로 조정됩니다. 이 동작은 기본적으로 활성화되어 있으며 추가 구성이 필요하지 않습니다. 그러나 해당 열에 maxWidth 설정되어 있고 새 너비가 해당 maxWidth 값을 초과하는 경우 열 크기가 자동으로 조정되지 않습니다. 이 경우 열은 미리 설정된 maxWidth 값에 따라 크기가 조정됩니다.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"name="hierarchicalGrid1"id="hierarchicalGrid1"><igc-columnfield="CustomerID"width="auto"resizable="true"></igc-column><igc-columnfield="CompanyName"width="auto"resizable="true"></igc-column><igc-columnfield="ContactName"width="auto"resizable="true"></igc-column><igc-columnfield="ContactTitle"width="auto"resizable="true"></igc-column><igc-columnfield="Address"width="auto"resizable="true"></igc-column><igc-columnfield="City"width="auto"resizable="true"></igc-column><igc-columnfield="PostalCode"width="auto"resizable="true"></igc-column><igc-columnfield="Country"width="auto"resizable="true"></igc-column><igc-columnfield="Phone"width="auto"resizable="true"></igc-column><igc-columnfield="Fax"width="auto"resizable="true"></igc-column><igc-row-islandchild-data-key="Orders"auto-generate="false"><igc-columnfield="OrderID"width="auto"resizable="true"></igc-column><igc-columnfield="EmployeeID"width="auto"resizable="true"></igc-column><igc-columnfield="OrderDate"width="auto"data-type="date"resizable="true"></igc-column><igc-columnfield="RequiredDate"width="auto"data-type="date"resizable="true"></igc-column><igc-columnfield="ShippedDate"width="auto"data-type="date"resizable="true"></igc-column><igc-columnfield="ShipVia"width="auto"resizable="true"></igc-column><igc-columnfield="Freight"width="auto"resizable="true"></igc-column><igc-columnfield="ShipName"width="auto"resizable="true"></igc-column><igc-columnfield="ShipAddress"width="auto"resizable="true"></igc-column><igc-columnfield="ShipCity"width="auto"resizable="true"></igc-column><igc-columnfield="ShipPostalCode"width="auto"resizable="true"></igc-column><igc-columnfield="ShipCountry"width="auto"resizable="true"></igc-column><igc-row-islandchild-data-key="OrderDetails"auto-generate="false"><igc-columnfield="ProductID"width="auto"resizable="true"></igc-column><igc-columnfield="UnitPrice"width="auto"resizable="true"></igc-column><igc-columnfield="Quantity"width="auto"resizable="true"></igc-column><igc-columnfield="Discount"width="auto"resizable="true"></igc-column></igc-row-island></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
스타일링
사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 크기 조정 핸들의 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"name="grid"id="grid"id="grid"primary-key="ID"><igc-columnfield="Artist"header="Artist"data-type="string"resizable="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"min-width="115px"resizable="true"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"min-width="88px"max-width="230px"resizable="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="string"resizable="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"header="Album"data-type="string"resizable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"resizable="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"resizable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"resizable="true"></igc-column><igc-columnfield="Title"header="Title"data-type="string"resizable="true"></igc-column><igc-columnfield="Released"header="Released"data-type="date"resizable="true"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"resizable="true"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"><igc-columnfield="Tour"header="Tour"data-type="string"resizable="true"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"resizable="true"></igc-column><igc-columnfield="Location"header="Location"data-type="string"resizable="true"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"resizable="true"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html