Web Components Highlight の概要

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

使用方法

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

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

npm install igniteui-webcomponents

次に Highlight コンポーネントと必要な CSS をインポートし、モジュールを登録します。

import { defineComponents, IgcHighlightComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcHighlightComponent);

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

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

<igc-highlight search-text='dolor'>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
</igc-highlight>

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

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

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

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

次の例を見てください。

<igc-highlight search-text='lorem' case-sensitive='true'>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
</igc-highlight>

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

検索入力と Highlight の連携

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

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

まず Highlight のプロパティを操作できるように参照を取得します。

const highlight = document.querySelector('igc-highlight') as IgcHighlightComponent;

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

const onInput = ({ detail }: CustomEvent<string>) => {
    highlight.searchText = detail;
};

document.querySelector('igc-input')?.addEventListener('igcInput', onInput);

<igc-input label="Search"></igc-input>
<igc-highlight>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae doloribus odit id excepturi ipsum provident eaque dignissimos beatae!
    </p>
</igc-highlight>

メソッド

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

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

const highlight = document.querySelector('igc-highlight') as IgcHighlightComponent;

const prev = () => {
    highlight.previous();
};

const next = () => {
    highlight.next();
};

document.querySelector('#prev-btn')?.addEventListener('click', prev);
document.querySelector('#next-btn')?.addEventListener('click', next);

<igc-input label="Search">
    <igc-icon-button
      id="prev-btn"
      variant="flat"
      name="navigate_before"
      collection="internal"
      slot="suffix"
    ></igc-icon-button>
    <igc-icon-button
      id="next-btn"
      variant="flat"
      slot="suffix"
      name="navigate_next"
      collection="internal"
    ></igc-icon-button>
</igc-input>
<igc-highlight>
    ...
</igc-highlight>

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

const prev = () => {
    highlight.previous({ preventScroll: true });
};

const next = () => {
    highlight.next({ preventScroll: true });
};

追加機能

このコンポーネントには一致状態を追跡するための読み取り専用プロパティもあります。size は一致件数の合計、current は現在アクティブな一致のインデックスを返します。

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

以下はこれらのプロパティで検索ステータスを作成する簡単な例です。

const highlight = document.querySelector('igc-highlight') as IgcHighlightComponent;
const status = document.querySelector('#helper-text') as HTMLParagraphElement;

const updateStatus = () => {
    status.textContent = highlight.size
      ? `${highlight.current + 1} of ${highlight.size} match${highlight.size === 1 ? '' : 'es'}`
      : '';
}

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

const onInput = ({ detail }: CustomEvent<string>) => {
    highlight.searchText = detail;
    updateStatus();
};

const prev = () => {
    highlight.previous();
    updateStatus();
};

const next = () => {
    highlight.next();
    updateStatus();
};

document.querySelector('igc-input')?.addEventListener('igcInput', onInput);
document.querySelector('#prev-btn')?.addEventListener('click', prev);
document.querySelector('#next-btn')?.addEventListener('click', next);

<igc-input label="Search">
    <igc-icon-button
      id="prev-btn"
      variant="flat"
      name="navigate_before"
      collection="internal"
      slot="suffix"
    ></igc-icon-button>
    <igc-icon-button
      id="next-btn"
      variant="flat"
      name="navigate_next"
      collection="internal"
      slot="suffix"
    ></igc-icon-button>
    <p id="helper-text" slot="helper-text"></p>
</igc-input>
<igc-highlight>
  ...
</igc-highlight>

スタイル設定

Highlight コンポーネントは全体の見た目を調整できる 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 Web Components Forums
• Ignite UI for Web Components GitHub