Blazor 목록 개요

    Ignite UI for Blazor 항목 그룹을 표시할 때 매우 유용합니다. 간단한 텍스트 항목 목록을 만들거나 다양한 레이아웃 요소의 배열을 포함하는 더 복잡한 목록을 만들 수 있습니다. IgbList 구성 요소는 항목 행을 표시하고 하나 이상의 헤더도 지원합니다. 각 목록 항목은 완전히 템플릿화 가능하며 유효한 HTML 또는 기타 구성 요소를 지원합니다.

    Blazor List Example

    다음 예는 이름과 전화번호 속성이 있는 연락처로 채워진 목록을 나타냅니다. 아래에 설명된 IgbList 구성 요소는 IgbAvatar 및 IgbButton 요소를 사용하여 사용자 경험을 풍부하게 하고 문자 및 통화 작업에 대한 아바타 사진 및 버튼 설정 기능을 노출합니다.

    Usage

    기본적으로 목록 웹 구성 요소를 사용하면 항목의 수직 목록을 쉽게 표시할 수 있습니다.

    ​IgbList 사용하기 전에 다음과 같이 등록해야 합니다.

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbListModule));

    또한 IgbList 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor 웹 어셈블리 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치되어야 합니다.

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    Ignite UI for Blazor UI에 대한 전체 소개는 시작 항목을 참조하세요.

    Add List Items

    이제 다음 코드를 추가하여 간단한 항목 목록을 얻을 수 있습니다.

    <IgbList>
    <IgbListHeader>Header</IgbListHeader>
    <IgbListItem>
        <h2 slot="title">Item 1</h2>
    </IgbListItem>
    <IgbListItem>
        <h2 slot="title">Item 2</h2>
    </IgbListItem>
    <IgbListItem>
        <h2 slot="title">Item 3</h2>
    </IgbListItem>
</IgbList>

    모든 것이 순조롭게 진행되면 브라우저에 다음이 표시됩니다.

    게임을 조금 강화하고 목록 항목을 향상시켜 보겠습니다. 이름 아래에 이름과 전화번호가 표시되는 연락처 목록을 만들고 싶다고 가정해 보겠습니다. 이를 달성하기 위해 다음 예에서 설명한 대로 목록 항목과 함께 제공되는 일부 슬롯을 사용할 수 있습니다.

    <IgbList>
    <IgbListHeader>
        <h1>Contacts</h1>
    </IgbListHeader>
    <IgbListItem>
        <h2 slot="title">Terrance Orta</h2>
        <span slot="subtitle">770-504-2217</span>
    </IgbListItem>
    <IgbListItem>
        <h2 slot="title">Richard Mahoney</h2>
        <span slot="subtitle">423-676-2869</span>
    </IgbListItem>
    <IgbListItem>
        <h2 slot="title">Donna Price</h2>
        <span slot="subtitle">859-496-2817</span>
    </IgbListItem>
</IgbList>

    위의 코드를 구현한 후 목록 구성 요소는 이제 다음과 같아야 합니다.

    Adding Avatar and Buttons

    ​IgbList 구성 요소와 함께 다른 구성 요소 중 일부를 사용하여 경험을 풍부하게 하고 일부 기능을 추가할 수 있습니다. 이름과 전화번호 왼쪽에 멋진 사진 아바타가 있을 수 있습니다. 또한 사용자가 연락처에 문자를 보내고 전화를 걸 수 있도록 오른쪽에 몇 가지 버튼을 추가할 수 있으므로 연락처 목록 구성 요소를 업데이트하여 아바타와 버튼을 표시해 보겠습니다. 목록 항목의 슬롯 중 일부를 사용하여 이를 수행할 수 있습니다.

    <IgbList>
    <IgbListHeader>
        <h1>Contacts</h1>
    </IgbListHeader>
    <IgbListItem>
        <IgbAvatar slot="start" src="https://static.infragistics.com/xplatform/images/avatars/8.jpg" Shape="@AvatarShape.Circle"/>
        <h2 slot="title">Terrance Orta</h2>
        <span slot="subtitle">770-504-2217</span>
        <IgbButton slot="end" Variant="@ButtonVariant.Outlined">Text</IgbButton>
        <IgbButton slot="end" Variant="@ButtonVariant.Outlined">Call</IgbButton>
    </IgbListItem>
    <IgbListItem>
        <IgbAvatar slot="start" src="https://static.infragistics.com/xplatform/images/avatars/17.jpg" Shape="@AvatarShape.Circle"/>
        <h2 slot="title">Richard Mahoney</h2>
        <span slot="subtitle">423-676-2869</span>
        <IgbButton slot="end" Variant="@ButtonVariant.Outlined">Text</IgbButton>
        <IgbButton slot="end" Variant="@ButtonVariant.Outlined">Call</IgbButton>
    </IgbListItem>
    <IgbListItem>
        <IgbAvatar slot="start" src="https://static.infragistics.com/xplatform/images/avatars/9.jpg" Shape="@AvatarShape.Circle"/>
        <h2 slot="title">Donna Price</h2>
        <span slot="subtitle">859-496-2817</span>
        <IgbButton slot="end" Variant="@ButtonVariant.Outlined">Text</IgbButton>
        <IgbButton slot="end" Variant="@ButtonVariant.Outlined">Call</IgbButton>
    </IgbListItem>
</IgbList>

    ​start 슬롯은 목록 항목의 다른 모든 콘텐츠 앞에 일종의 미디어를 추가하는 데 사용됩니다. 대상 요소(이 경우 IgbAvatar 구성 요소)에도 기본 위치와 간격이 제공됩니다.

    ​end 슬롯은 스위치, 버튼, 확인란 등으로 표시되는 일종의 작업이나 메타데이터가 있는 목록 항목에 사용됩니다. 우리는 IgbButton 구성 요소를 사용합니다.

    또한 사용자가--ig-size CSS 변수를 사용하여 목록의 크기를 변경할 수 있도록 허용하겠습니다. 모든 크기 값을 표시하기 위해 일부 라디오 버튼을 추가하겠습니다. 이렇게 하면 하나를 선택할 때마다 목록의 크기가 변경됩니다.

    <IgbRadioGroup Alignment="@RadioGroupAlignment.Horizontal">
    <IgbRadio Value="Small" label-position="after" Change="OnRadioOptionClick">Small</IgbRadio>
    <IgbRadio Value="Medium" label-position="after" Change="OnRadioOptionClick">Medium</IgbRadio>
    <IgbRadio Value="Large" label-position="after" Checked="true" Change="OnRadioOptionClick">Large</IgbRadio>
</IgbRadioGroup>

<IgbList style="margin-top: 10px;" Size="@ListSize" />

@code {
    public SizableComponentSize ListSize { get; set; }

    public void OnRadioOptionClick(IgbComponentBoolValueChangedEventArgs e)
    {
        IgbRadio radio = e.Parent as IgbRadio;
        switch (radio.Value)
        {
            case "Small":
                {
                    this.ListSize = SizableComponentSize.Small;
                    break;
                }
            case "Medium":
                {
                    this.ListSize = SizableComponentSize.Medium;
                    break;
                }
            case "Large":
                {
                    this.ListSize = SizableComponentSize.Large;
                    break;
                }
        }
    }
}

    위 코드를 구현한 결과는 다음과 같아야 합니다.

    Styling

    노출된 CSS 부분(title, subtitle 및 end 중 일부를 사용하여 목록의 모양을 변경할 수 있습니다.

    igc-list-header {
    font-size: 20px;
    font-weight: 700;
    color: #3f51b5;
}

igc-list-item::part(title) {
    font-size: 18px;
    color: #3f51b5;
}

igc-list-item::part(subtitle) {
    color: #0099ff;
}

igc-list-item::part(end) {
    --ig-secondary-500: 230,48%,47%;
}

    이 기사에서는 IgbList 구성 요소에 대해 많은 내용을 다루었습니다. 먼저 텍스트 항목이 포함된 간단한 목록을 만들었습니다. 그런 다음 연락처 항목 목록을 만들고 IgbAvatar 및 IgbButton과 같은 Ignite UI for Blazor 사용하여 여기에 기능을 추가했습니다. 마지막으로 노출된 CSS 부분을 통해 컴포넌트의 외형을 변경했습니다.

    API References

    Additional Resources