Blazor Highlight の概要

Ignite UI for Blazor Highlight は、ページ内コンテンツの一部を強調表示して、ユーザーの目につきやすくするためのコンポーネントです。軽量で扱いやすく、他のコンポーネントと組み合わせることで、よりインタラクティブで魅力的な UI を構築できます。

使用方法

IgbHighlight コンポーネントを使用するには検索対象のコンテンツをこのタグで囲むだけです。コンポーネントは <IgbHighlight> タグ内のすべての子要素のテキストを検索し、指定した文字列に一致する箇所をハイライト表示します。

まず次のコマンドで Ignite UI for Blazor をインストールします。

dotnet add package IgniteUI.Blazor --version 26.1.98

Program.cs で IgbHighlight モジュールを次のように登録します。

// in Program.cs file

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

また、プロジェクト構成に応じて対応するスタイルを参照する必要があります。

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

Ignite UI for Blazor の全体的な導入については、はじめに を参照してください。

IgbHighlight コンポーネントを使い始める最もシンプルな例は次のとおりです。

<IgbHighlight SearchText="dolor">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
</IgbHighlight>

<IgbHighlight> タグでハイライトしたい文字列を含むコンテンツを囲みます。

ハイライト対象のテキストは search-text 属性で指定します。上の例では “dolor” がハイライト表示されます。

大文字・小文字を区別した一致

IgbHighlight コンポーネントは case-sensitive 属性も提供します。既定値は false で、大文字・小文字を区別しない検索になります。true を設定すると、大文字・小文字を区別した検索になります。

次の例を見てください。

<IgbHighlight SearchText="lorem" CaseSensitive="true">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
</IgbHighlight>

この場合、検索文字列は小文字の “lorem” ですが、コンテンツ側は先頭が大文字の Lorem のため、一致件数は 0 になります。

検索入力と Highlight の連携

最も一般的な使い方は IgbHighlight を検索用の IgbInput コンポーネントに連携しユーザーの入力に応じて一致箇所をリアルタイムでハイライトする方法です。

連携するには IgbInput コンポーネントの igcInput イベントを監視しイベント発生ごとに IgbHighlight コンポーネントの search-text 属性へ入力値を設定します（標準の input イベントでも対応可能です）。

まず searchText プロパティを追加します。

private string searchText = "";

次に igcInput イベントのたびに検索文字列を更新する関数を作成します。

private void OnValueChanging(string newValue)
{
    searchText = newValue;
}

<IgbInput Label="Search" ValueChanging="OnValueChanging"></IgbInput>
<IgbHighlight SearchText="@searchText">
    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae doloribus
        odit id excepturi ipsum provident eaque dignissimos beatae! Rerum vero
        distinctio libero, quasi magni quod natus nesciunt doloremque temporibus
        voluptate?
    </p>
</IgbHighlight>

メソッド

このコンポーネントは一致結果を移動するための 2 つのメソッドも提供します。next() は次の一致へ、previous() は前の一致へ移動します。

これらを使うことで前後移動ボタンを追加して検索体験をよりインタラクティブにできます。

private IgbHighlight HighlightRef { get; set; }

private async Task Prev()
{
    if (HighlightRef != null)
        await HighlightRef.PreviousAsync(new IgbHighlightNavigation());
}

private async Task Next()
{
    if (HighlightRef != null)
        await HighlightRef.NextAsync(new IgbHighlightNavigation());
}

<IgbInput Label="Search" ValueChanging="OnValueChanging">
    <IgbIconButton slot="suffix" Variant="IconButtonVariant.Flat" IconName="navigate_before" Collection="internal" @onclick="Prev"></IgbIconButton>
    <IgbIconButton slot="suffix" Variant="IconButtonVariant.Flat" IconName="navigate_next" Collection="internal" @onclick="Next"></IgbIconButton>
</IgbInput>

previous() と next() はどちらも IgbHighlight.preventScroll オプションを受け取れます。これを使うと移動時にアクティブな一致箇所へページが自動スクロールする動作を抑止できます。既定値は false です。

private async Task Prev()
{
    if (HighlightRef != null)
        await HighlightRef.PreviousAsync(new IgbHighlightNavigation { PreventScroll = true });
}

private async Task Next()
{
    if (HighlightRef != null)
        await HighlightRef.NextAsync(new IgbHighlightNavigation { PreventScroll = true });
}

追加機能

Blazor では一致状態を追跡するために 2 つの非同期メソッドを利用できます。GetSizeAsync() は一致件数の合計、GetCurrentAsync() は現在アクティブな一致のインデックスを返します。

これらのメソッドを使うと、現在位置と総件数を表示する検索ステータス表示を実装できます。

以下はこれらのメソッドで検索ステータスを作成する簡単な例です。

private async Task UpdateStatus()
{
    var size = (int)await HighlightRef.GetSizeAsync();
    var current = (int)await HighlightRef.GetCurrentAsync();
    helperText = $"{current + 1} of {size} match{(size == 1 ? "" : "es")}";
}

入力値が変わるたび、または次へ/前へボタンがクリックされるたびに UpdateStatus() を呼び出します。

private async Task Prev()
{
    await HighlightRef.PreviousAsync(new IgbHighlightNavigation());
    await UpdateStatus();
    StateHasChanged();
}

private async Task Next()
{
    await HighlightRef.NextAsync(new IgbHighlightNavigation());
    await UpdateStatus();
    StateHasChanged();
}

<IgbInput Label="Search" ValueChanging="OnValueChanging">
            <IgbIconButton slot="suffix" Variant="IconButtonVariant.Flat" IconName="navigate_before" Collection="internal" @onclick="Prev"></IgbIconButton>
            <IgbIconButton slot="suffix" Variant="IconButtonVariant.Flat" IconName="navigate_next" Collection="internal" @onclick="Next"></IgbIconButton>
            <p slot="helper-text">@helperText</p>
</IgbInput>

<IgbHighlight @ref="HighlightRef">

スタイル設定

IgbHighlight コンポーネントは全体の見た目を調整できる 4 つの CSS 変数を提供します。

• --foreground ハイライト対象テキストの文字色
• --background ハイライト対象テキストの背景色
• --foreground-active アクティブなハイライト対象テキストの文字色
• --background-active アクティブなハイライト対象テキストの背景色

igc-highlight {
    --background: var(--ig-gray-700);
    --foreground: var(--ig-gray-700-contrast);
    --background-active: var(--ig-warn-500);
    --foreground-active: var(--ig-warn-500-contrast);
}

API リファレンス

追加リソース

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub