Web Components Expansion Panel (展開パネル) の概要

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

Web Components 展開パネルの例

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

defineComponents(IgcExpansionPanelComponent, IgcIconComponent);
export class ExpansionPanelUsage {
	constructor() {
	}
}

new ExpansionPanelUsage();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Expansion Panel Usage</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample" style="align-items: center;">
        <igc-expansion-panel>
          <h1 slot="title">Golden Retriever</h1>
          <h3 slot="subtitle">Medium-large gun dog</h3>
          <span>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.</span>
        </igc-expansion-panel>
      </div>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-expansion-panel{
    width: 100%;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

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

npm install igniteui-webcomponents
cmd

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

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

defineComponents(IgcExpansionPanelComponent);
ts

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

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

イベントにバインド

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

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

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

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

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

defineComponents(IgcExpansionPanelComponent, IgcIconComponent);
export class ExpansionPanelPropertiesAndEvents {
    private panel: IgcExpansionPanelComponent;
    private firedEventSpan: HTMLSpanElement;
    private subtitle: HTMLElement | null;
    private timeout!: NodeJS.Timeout;

    constructor() {
        this.panel = document.getElementById("exp-panel") as IgcExpansionPanelComponent;
        this.firedEventSpan = document.getElementById("fired-event") as HTMLSpanElement;
        this.subtitle = document.querySelector("[slot='subtitle']");

        this.panel.addEventListener("igcOpened", this.handleExpansionPanelEvents.bind(this));
        this.panel.addEventListener("igcClosed", this.handleExpansionPanelEvents.bind(this));
    }

    public handleExpansionPanelEvents(ev: CustomEvent) {
        if(this.subtitle){
            if(ev.type === "igcOpened"){
                this.subtitle.style.display = 'none';
            }
            if(ev.type === "igcClosed"){
                this.subtitle.style.display = 'block';
            }
        }

        clearTimeout(this.timeout!);

        this.firedEventSpan.textContent = ev.type + " event fired!";
        this.firedEventSpan.style.display = 'block';
        this.timeout = setTimeout(() => {
            this.firedEventSpan.style.display = 'none';
        }, 2000);
    }
}

new ExpansionPanelPropertiesAndEvents();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Expansion Panel Properties and Events</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">
      <div class="container sample" style="align-items: center;">
        <igc-expansion-panel id="exp-panel">
          <h1 slot="title">Golden Retriever</h1>
          <h3 slot="subtitle">Medium-large gun dog</h3>
          <span>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.
          </span>
        </igc-expansion-panel>
        <span id="fired-event"></span>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-expansion-panel{
    width: 100%;
    height: 300px;
}

span#fired-event {
    background-color: rgba(0,0,0,0.5);
    border-radius: 26px;
    padding: 1rem 1.5rem;
    color:white;
    display: none;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

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

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

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

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

import { defineComponents, IgcExpansionPanelComponent, IgcButtonComponent, IgcIconComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./ExpansionPanelCustomization.css";

defineComponents(IgcExpansionPanelComponent, IgcButtonComponent, IgcIconComponent);
export class ExpansionPanelCustomization {
    private panel: IgcExpansionPanelComponent;
    private indicator: HTMLElement | null;

    constructor() {
        this.panel = document.getElementById("exp-panel") as IgcExpansionPanelComponent;
        this.indicator = document.querySelector("[slot='indicator']");

        this.panel.addEventListener("igcOpened", this.handleExpansionPanelEvents.bind(this));
        this.panel.addEventListener("igcClosed", this.handleExpansionPanelEvents.bind(this));
    }

    public handleExpansionPanelEvents(ev: CustomEvent) {
        if (this.indicator) {
            if (ev.type === "igcOpened") {
                this.indicator.textContent = "Show less";
            }
            if (ev.type === "igcClosed") {
                this.indicator.textContent = "Show more";
            }
        }
    }
}

new ExpansionPanelCustomization();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Expansion Panel Customization</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-expansion-panel id="exp-panel" indicator-position="end">
          <h1 slot="title">Golden Retriever</h1>
          <h3 slot="subtitle">Medium-large gun dog</h3>
          <div slot="indicator">Show more</div>
          <img height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png" alt="">
          <span>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.</span>
          <igc-button href="https://en.wikipedia.org/wiki/Golden_Retriever" variant="outlined" target="_blank">Read more</igc-button>
        </igc-expansion-panel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-expansion-panel {
    max-width: 500px;
    min-width: 300px;
    width: 100%;
    border: 1px solid rgba(171, 171, 171, 0.3);
    padding: 0;
}

igc-button {
    display: flex;
    margin-top: 16px;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    margin-bottom: 8px;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

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

キーの組み合わせ

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

スタイル設定

IgcExpansionPanelComponent コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。

名前	説明
`header`	展開インジケーター、タイトル、サブタイトルのコンテナー。
`title`	タイトルのコンテナー。
`subtitle`	サブタイトルのコンテナー。
`indicator`	インジケーターコンテナー。
`content`	展開パネルのコンテンツラッパー。

igc-expansion-panel {
  background-color: var(--ig-secondary-900);
  color: var(--ig-secondary-900-contrast);
}

igc-button::part(base) {
  color: var(--ig-secondary-900-contrast);
}

igc-button::part(base)::before {
  background-color: var(--ig-warn-500);
}

igc-expansion-panel::part(indicator) {
  color: var(--ig-warn-500);
}

igc-expansion-panel::part(header) {
  background-color: var(--ig-secondary-900);
}

igc-expansion-panel::part(title),
igc-expansion-panel::part(subtitle) {
  color: var(--ig-warn-500);
}
css

import { defineComponents, IgcExpansionPanelComponent, IgcButtonComponent, IgcIconComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './ExpansionPanelStyling.css';

defineComponents(IgcExpansionPanelComponent, IgcButtonComponent, IgcIconComponent);
export class ExpansionPanelStyling {
	constructor() {
	}
}

new ExpansionPanelStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Expansion Panel Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-expansion-panel indicator-position="end">
          <h1 slot="title">Golden Retriever</h1>
          <h3 slot="subtitle">Medium-large gun dog</h3>
          <img height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png" alt="">
          <span>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.</span>
          <igc-button href="https://en.wikipedia.org/wiki/Golden_Retriever" variant="contained" target="_blank">Read more</igc-button>
        </igc-expansion-panel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-expansion-panel {
    width: 500px;
    background-color: #18203b;
    color: white;
    border-radius: 8px;
}

igc-button::part(base){
    color: #18203b;
}

igc-button::part(base)::before {
    background-color: #ffd351;
}

igc-expansion-panel::part(indicator) {
    color: #ffd351;
}

igc-expansion-panel::part(header) {
    background-color: #18203b;
}

igc-expansion-panel::part(title),
igc-expansion-panel::part(subtitle) {
    color: #ffd351;
}

igc-button {
    display: flex;
    margin-top: 16px;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    margin-bottom: 8px;
    border-radius: 8px;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Web Components Expansion Panel (展開パネル) の概要

Web Components 展開パネルの例

使用方法

イベントにバインド

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

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

スタイル設定

API リファレンス

その他のリソース

Web Components Expansion Panel (展開パネル) の概要

Web Components 展開パネルの例

使用方法

イベントにバインド

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

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

スタイル設定

API リファレンス

その他のリソース

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