Blazor Chip (チップ) の概要

    Ignite UI for Blazor Chip は、ユーザーが情報を入力したり、選択したり、コンテンツをフィルタリングしたり、アクションをトリガーしたりするのに役立ちます。

    Blazor Chip の例

    使用方法

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

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

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

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

    IgbChip の使用を開始する最も簡単な方法は次のとおりです:

    <div class="container sample vertical">
        <IgbChip>Chip</IgbChip>
    </div>
    
    @code {
    
        private IgbIcon RegisterIconRef { get; set; }
    
        protected override void OnInitialized()
        {
        }
    }
    

    選択可能な Chip を表示するには、Chip の Selectable プロパティを使用できます。

    <IgbChip Selectable="true"></IgbChip>
    

    削除可能可能な Chip を表示するには、Chip の Removable プロパティを使用できます。

    <IgbChip Removable="true"></IgbChip>
    

    コード例

    バリアント

    Ignite UI for Blazor Chip は、いくつかの事前定義されたスタイルのバリエーションをサポートします。サポートされている値の 1 つ (PrimaryInfoSuccessWarning、または Danger) を Variant プロパティに割り当てることにより、バリアントを変更できます。

    <IgbChip Variant="ChipVariant.Success"></IgbChip>
    

    無効

    Ignite UI for Blazor Chip は、Disabled プロパティを使用して無効にできます。

    Prefix / Suffix (プレフィックス / サフィックス)

    IgbChip コンポーネントの PrefixSuffix の部分とそれらのスロットを使用して、Chip のメイン コンテンツの前後に異なるコンテンツを追加できます。デフォルトの選択アイコンと削除アイコンが用意されていますが、Select スロットと Remove スロットを使用してカスタマイズできます。Start スロットと End スロットを使用して、メイン コンテンツの前後にコンテンツを追加できます。

    Size (サイズ)

    Size プロパティを使用して、ユーザーが IgbChip のサイズを選択できるようにします。

    スタイル設定

    Chip コンポーネントは、BasePrefixSufix 部分、およびすべてのスタイル プロパティを変更するために使用できるいくつかのスロットを公開します。

    igc-chip::part(base) {
        background: #011627;
        color: #ECAA53;
    }
    
    igc-chip::part(suffix) {
        color: #B7B6C2;
    }
    

    API リファレンス

    その他のリソース

    API メンバー