Blazor List (リスト) の概要

    Ignite UI for Blazor List 要素は、項目のグループを番号の付いた形式または黒丸の付いた形式のいずれかで提示する時に非常に役に立ちます。さまざまなレイアウト要素の配列を含むテキスト アイテムの単純なリスト、またはより複雑なリストを作成できます。IgbList コンポーネントは項目の行を表示し、1 つ以上のヘッダーもサポートします。各リスト項目は完全にテンプレート化可能であり、有効な HTML またはその他のコンポーネントをサポートします。

    Blazor List の例

    次の例は、名前と電話番号のプロパティを持つ連絡先が入力されたリストを表しています。以下に示す IgbList コンポーネントは、IgbAvatar 要素と IgbButton 要素を使用して、ユーザー エクスペリエンスを強化し、テキストと呼び出しアクションのアバター画像とボタンを設定する機能を公開します。

    使用方法

    List Web コンポーネントは、項目の垂直リストを簡単に表示できます。

    IgbList を使用する前に、次のように登録する必要があります。

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbListModule));
    

    また、追加の CSS ファイルをリンクして、スタイルを IgbList コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:

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

    リスト項目の追加

    これで、次のコードを追加して、項目の簡単なリストを取得できます。

    <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>
    

    上記のコードを実装すると、リスト コンポーネントは次のようになります:

    アバターおよびボタンの追加

    他のコンポーネントのいくつかを 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 スロットは、switch、button、checkbox などで表される、ある種のアクションまたはメタデータを持つリスト項目に使用することを目的としています。IgbButton コンポーネントを使用します。

    また、ユーザーがその size プロパティを使用してリストのサイズを選択できるようにします。すべてのサイズ値を表示するために、いくつかのラジオ ボタンを追加します。このようにして、選択されるたびに、リストの size プロパティを変更します。

    <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;
                    }
            }
        }
    }
    

    上記のコードを実装した結果は、次のようになります:

    スタイル設定

    公開されている CSS パーツ (titlesubtitleend) を使用して、リストの外観を変更できます。

    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%;
    }
    

    その他のリソース

    API メンバー