Blazor Grid Size

Blazor Grid의 Ignite UI for Blazor 크기 기능을 사용하면 사용자가 데이터 내의 간격과 레이아웃을 제어할 수 있습니다 IgbGrid. 변경--ig-size 하면 많은 양의 콘텐츠와 상호 작용할 때 사용자 환경을 크게 개선할 수 있습니다. 세 가지 크기 옵션 중에서 선택할 수 있습니다.

--ig-size-large
--ig-size-medium
--ig-size-small

Blazor Grid Size Example

Usage

위의 데모에서 볼 수 있듯이 IgbGrid 세 가지 크기 옵션을 제공합니다. 작다, 보통 그리고 큰. 아래 코드 스니펫은 설정 방법을 보여줍니다.--ig-size 인라인 또는 CSS 클래스의 일부 :

.gridSize {
    --ig-size: var(--ig-size-medium);
}

<IgbGrid Class="gridSize" Data=northwindEmployees @ref=grid>
</IgbGrid>

이제 각 옵션이 구성 요소에 어떻게 반영되는지 IgbGrid 자세히 살펴보겠습니다. 다른 크기 옵션 간에 전환하면 각 IgbGrid 요소의 높이와 해당 패딩이 변경됩니다. 또한 사용자 정의 열을 Width 적용하려면 왼쪽과 오른쪽 패딩의 합보다 커야 한다는 사실을 고려하십시오.

큰- 이것이 기본값입니다. IgbGrid 가장 낮은 강도와 행 높이가 같은 크기 50px. 왼쪽 및 오른쪽 패딩은 다음과 같습니다. 24px; 최소 열 Width 다음과 같음 80px;
중간- 이것은 행 높이가 있는 40px 중간 강렬한 크기입니다. 왼쪽 및 오른쪽 패딩은 다음과 같습니다 16px. 최소 열 Width은 다음과 같습니다 64px.
small- 강렬하고 32px 행 높이가 가장 높은 크기입니다. 왼쪽 및 오른쪽 패딩은 다음과 같습니다 12px. 최소 열 Width은 다음과 같습니다 56px.

[!Note] Please keep in mind that currently you can not override any of the sizes.

이제 샘플을 계속 진행하면서 가--ig-size 어떻게 적용되는지 실제로 살펴보겠습니다. 먼저 각 크기 사이를 전환하는 데 도움이 되는 버튼을 추가해 보겠습니다.

<div class="options vertical">
    <IgbPropertyEditorPanel
    DescriptionType="WebGrid"
    IsHorizontal="true"
    IsWrappingEnabled="true"
    Name="PropertyEditor"
    @ref="propertyEditor">
        <IgbPropertyEditorPropertyDescription
        Name="SizeEditor"
        @ref="sizeEditor"
        Label="Grid Size:"
        ValueType="PropertyEditorValueType.EnumValue"
        DropDownNames="@(new string[] { "Small", "Medium", "Large" })"
        DropDownValues="@(new string[] { "Small", "Medium", "Large" })"
        ChangedScript="WebGridSetGridSize">
        </IgbPropertyEditorPropertyDescription>
    </IgbPropertyEditorPanel>
</div>

이제 마크업을 추가할 수 있습니다.

<div class="container vertical">
    <div class="container vertical fill">
        <IgbGrid
        AutoGenerate="false"
        Data="InvoicesData"
        AllowFiltering="true"
        Id="grid"
        Name="grid"
        @ref="grid">
            <IgbColumn Field="CustomerName" Header="Customer Name" Sortable="true" HasSummary="true" DataType="GridColumnDataType.String"></IgbColumn>
            <IgbColumn Field="Country" Header="Country" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
            <IgbColumn Field="City" Header="City" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
            <IgbColumn Field="Address" Header="Address" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
            <IgbColumn Field="PostalCode" Header="Postal Code" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
            <IgbColumn Field="Salesperson" Header="Sales Person" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
            <IgbColumn Field="ShipperName" Header="Shipper Name" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
            <IgbColumn Field="OrderDate" Header="Order Date" DataType="GridColumnDataType.Date" Sortable="true" HasSummary="true"></IgbColumn>
            <IgbColumn Field="ProductID" Header="ID" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
            <IgbColumn Field="ProductName" Header="Name" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
            <IgbColumn Field="UnitPrice" Header="Unit Price" DataType="GridColumnDataType.Number" Sortable="true" HasSummary="true" Filterable="false"></IgbColumn>
            <IgbColumn Field="Quantity" Header="Quantity" DataType="GridColumnDataType.Number" Sortable="true" HasSummary="true" Filterable="false"></IgbColumn>
            <IgbColumn Field="Discontinued" Header="Discontinued" DataType="GridColumnDataType.Boolean" Sortable="true" HasSummary="true"></IgbColumn>
            <IgbColumn Field="Discontinued" Header="Discontinued" DataType="GridColumnDataType.Boolean" Sortable="true" HasSummary="true"></IgbColumn>
            <IgbColumn Field="ShipName" Header="Name" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
            <IgbColumn Field="ShipCountry" Header="Country" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"> </IgbColumn>
            <IgbColumn Field="ShipCity" Header="City" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
            <IgbColumn Field="ShipPostalCode" Header="Postal Code" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
        </IgbGrid>
    </div>
</div>

마지막으로 실제로 크기를 적용하는 데 필요한 논리를 제공하겠습니다.

@code {
    *** In JavaScript ***
    igRegisterScript("WebGridSetGridSize", (sender, evtArgs) => {
        var newVal = evtArgs.newValue.toLowerCase();
        var grid = document.getElementById("grid");
        grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
    }, false);
}

행 IgbGrid의 높이를 변경할 수 있도록 제공하는 또 다른 옵션은 IgbGrid 속성 RowHeight 입니다. 이 속성이 레이아웃에 IgbGrid--ig-size 어떤 영향을 미치는지 실제로 살펴 보겠습니다.

다음 사항에 유의하시기 바랍니다.

--ig-size CSS 변수가 지정된 경우 RowHeight 행 높이에 영향을 미치지 않습니다.
--ig-size 위에서 설명한 것처럼 Grid의 모든 나머지 요소에 영향을 미칩니다.

이제 샘플을 확장하고 IgbGrid에 RowHeight 속성을 추가할 수 있습니다.

<IgbGrid
   @ref="grid"
   Id="grid"
   Class="gridSize"
   Width="100%"
   Height="100%"
   AutoGenerate="true"
   Data="northwindEmployees"
   RowHeight="rowHeight">
</IgbGrid>

@code {
   private string rowHeight = "80px";
}

API References

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.