Web Components 展開パネルの概要

    Ignite UI for Web Components 展開パネルは、縮小または展開の 2 つの状態で描画できる軽量のアコーディオン コンポーネントです。展開パネルは、マウス クリックまたはキーボード操作によって切り替えることができます。

    Web Components 展開パネルの例

    使用方法

    まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

    npm install igniteui-webcomponents
    

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

    import {defineComponents, IgcExpansionPanelComponent} from 'igniteui-webcomponents';
    
    defineComponents(IgcExpansionPanelComponent);
    

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

    <igc-expansion-panel>
        <div slot="title">Golden Retriever</div>
        <div slot="subTitle">Medium-large gun dog</div>
        <div>
            <p>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
            and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
            to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
            are easy to train to basic or advanced obedience standards.</p>
        </div>
    </igc-expansion-panel>
    

    イベントにバインド

    展開パネル コンポーネントは、次のイベントを発生させます:

    • igcClosed - 展開パネルが縮小されたときに発生します。
    • igcOpened - 展開パネルが展開されたときに発生します。
    • igcClosing - 展開パネルが縮小を開始たときに発生します。
    • igcOpening - 展開パネルが展開を開始したときに発生します。

    次のサンプルは、コンポーネントにロジックを追加して、パネルの現在の状態に応じて subtitle を表示 / 非表示にする方法を示しています。

    これを行うには、igcOpened および igcClosed イベント エミッターにバインドします。

    コンポーネントのカスタマイズ

    IgcExpansionPanelComponent コントロールを使用すると、あらゆる種類のコンテンツを本体内に追加できます。Input、チャート、さらには他の展開パネルを描画できます!

    IgcExpansionPanelComponent を使用すると、公開された titlesubTitle、および indicator スロット全体でヘッダーを簡単にカスタマイズできます。

    展開インジケーターの位置の構成は、展開パネルの indicatorAlignment プロパティを使用して行うことができます。可能なオプションは、startend、または none です。

    次のコードサンプルは、コンポーネントのボタンが右側に移動するように構成する方法を示しています。

    キーボード ナビゲーション

    Ignite UI for Web Components 展開パネルのキーボード ナビゲーションは、W3C アクセシビリティ標準に準拠しており、使いやすくなっています。

    キーの組み合わせ

    • Alt + 下矢印 - フォーカスされたパネルを展開します。
    • Alt + 上矢印 - フォーカスされたパネルを縮小します。
    • Space / Enter - フォーカスされたパネルの展開状態を切り替えます。

    スタイル設定

    Ignite UI for Web Components 展開パネル コンポーネントは、いくつかの CSS パーツ (headerindicatortitlesubtitle および content) を公開して、スタイルを完全に制御できるようにします。

    API リファレンス

    展開パネルの API の詳細については、次のリンクを参照してください:

    その他のリソース

    API メンバー