Angular Accordion (アコーディオン) コンポーネントの概要

Angular Accordion とは?

Angular Accordion は、単一のコンテナーに表示されるクリック可能なヘッダーと関連するコンテンツ セクションを含む垂直方向に展開可能なパネルを構築するための GUI コンポーネントです。Accordion は、単一のページのコンテンツの複数のセクションでスクロールする必要性を軽減するためによく使用されます。キーボード ナビゲーションと基になるパネルの展開状態を制御する API を提供します。

ユーザーは、サムネイルやラベルなどの項目のリスト間で操作および移動できます。含まれる情報を表示するために、各項目を切り替えることができます (展開または縮小)。構成に応じて、一度に 1 つまたは複数の展開されている項目があります。

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Angular Accordion の例

以下は FAQ セクションの基本的な Angular Accordion の例です。アコーディオンとして動作し、個別に動作します。複数のパネルを同時に展開しながら、各テキスト ブロックをシングルクリックで切り替えることができます。これにより、自動的に展開および縮小パネル間を前後に移動することなく、情報をより簡単に読み取ることができます。このパネルは、以前に開いたセクションを毎回非表示にします。

ここでは、igx-accrodion とその展開パネルを定義する方法を確認できます。このサンプルは、2 種類の展開動作も示します。切り替えボタンは singleBranchExpand プロパティを設定し、一度に展開する単一ブランチと複数ブランチを切り替えます。

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { AccordionSample1Component } from "./accordion-sample-1/accordion-sample-1.component";
import { 
	IgxAccordionModule,
	IgxSwitchModule
 } from "igniteui-angular";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	AccordionSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxAccordionModule,
	IgxSwitchModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    selector: 'app-accordion-sample-1',
    styleUrls: ['./accordion-sample-1.component.scss'],
    templateUrl: './accordion-sample-1.component.html'
})
export class AccordionSample1Component {
    public singleBranchExpand = false;
}
tsコピー

<igx-switch [(ngModel)]="singleBranchExpand">Single Branch Expand</igx-switch>
<article class="sample-wrapper">
    <igx-accordion #accordion [singleBranchExpand]="singleBranchExpand">
        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>
                    What has changed about subscription and pricing model?
                </igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                We have moved to a subscription-based pricing model for all our developer tools. This makes it easier
                for you to manage your license subscriptions and allows us to provide a better level of service for you.

                We updated our pricing and packages to provide you with flexible options and the best value. This
                includes <a href="https://www.infragistics.com/products/ignite-ui">Ignite UI </a>(formerly Ignite UI for
                JavaScript) which includes all of our JavaScript framework
                components for web development, including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and
                Web Components), as well as Infragistics Professional, Infragistics Ultimate, our Ultimate UI products.

                We also offer multi-year subscriptions options with a built-in discount, so you can see the value up
                front. With these updates we are confident that we are providing the best platforms and the best price.
            </igx-expansion-panel-body>
        </igx-expansion-panel>
        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>Who will the updated changes impact?</igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                <div class="body-container">
                    The license updates will impact all new and current customers using Ignite UI, Infragistics Professional
                    and Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for
                    Ignite UI for JavaScript, Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components.
                    For more information, please refer to this blog:

                    <a
                        href="https://www.infragistics.com/community/blogs/b/jason_beres/posts/announcement-changes-to-ignite-ui-product-packaging">Announcement:
                        Changes to Ignite UI Product & Packaging</a>

                    The pricing has been updated for all products and packages. So, all new or additional licenses will be
                    sold based on our new pricing and packages. All existing license agreements will be honored and renewed
                    based upon the current agreement.
                </div>
            </igx-expansion-panel-body>
        </igx-expansion-panel>
        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>What is the difference between your old model and your current subscription
                    model
                    for Ignite UI?</igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages
                will be replaced with packages that include a “Trial Version” watermark. Licensed packages for Ignite UI
                will be available from our cloud hosted ProGet server.

                For more information, please refer to this article:

                <a
                    href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing">Moving
                    from Trial to Licensed Ignite UI NPM Packages
                </a>
            </igx-expansion-panel-body>
        </igx-expansion-panel>
        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>What happens if I don’t renew my subscription?</igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include
                this watermark.
            </igx-expansion-panel-body>
        </igx-expansion-panel>
        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>If I don’t renew my subscription will 
                    I still have access to previous versions of Infragistics products?
                </igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                Any version of Infragistics software which you have downloaded can continue to be used perpetually.
                Access to download any new or previous versions through our customer portal and package feeds will
                require maintaining an active subscription by continuing to renew it.
            </igx-expansion-panel-body>
        </igx-expansion-panel>
    </igx-accordion>
</article>
htmlコピー

$ep-sample-border: 1px solid rgba(174, 174, 174, 0.25);

.sample-wrapper {
    overflow-y: auto;
    max-height: 380px;
    margin: 8px;
}

igx-switch {
    padding: 16px;
}

igx-expansion-panel {
    border: $ep-sample-border;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

Ignite UI for Angular Accordion を使用した作業の開始

Ignite UI for Angular Accordion コンポーネントを初期化するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular
cmd

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxAccordionModule をインポートします。

// app.module.ts

...
import { IgxAccordionModule } from 'igniteui-angular';
// import { IgxAccordionModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxAccordionModule],
    ...
})
export class AppModule {}
typescript

あるいは、16.0.0 以降、IgxAccordionComponent をスタンドアロンの依存関係としてインポートすることも、IGX_ACCORDION_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

...
import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular';
// import { IGX_ACCORDION_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-accordion>
        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                Content Panel 1
            </igx-expansion-panel-body>
        </igx-expansion-panel>
    </igx-accordion>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_ACCORDION_DIRECTIVES]
    /* or imports: [IgxAccordionComponent] */
})
export class HomeComponent {}
typescript

Ignite UI for Angular Accordion モジュールまたはディレクティブをインポートしたので、igx-accordion とそのパネルの基本構成を開始できます。

Angular Accordion コンポーネントの使用

IgxAccordionComponent の各セクションは、展開パネルを使用して定義されます。 パネルには disabled、collapsed、および animationSettings プロパティがあり、要件に応じてパネルの状態を構成できます。

Accordion の宣言

Accordion は、その内部で宣言されたすべての igx-expansion-panel をラップします。

<igx-accordion #accordion [singleBranchExpand]="true">
    <igx-expansion-panel>
        <igx-expansion-panel-header>
            <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            Content Panel 1
        </igx-expansion-panel-body>
    </igx-expansion-panel>
    <igx-expansion-panel>
        <igx-expansion-panel-header>
            <igx-expansion-panel-title>Title Panel 2</igx-expansion-panel-title>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            Content Panel 2
        </igx-expansion-panel-body>
    </igx-expansion-panel>
</igx-accordion>
html

panels アクセサーを使用して、igx-accordion のすべての子の展開パネルを含むコレクションへの参照を取得できます。

@ViewChild('accordion', { static: true })
public accordion!: IgxAccordionComponent;

this.accordion.panels;
typescript

上記で示したように、singleBranchExpand プロパティを使用すると、一度に 1 つまたは複数のパネルを展開できるかどうかを設定できます。

Angular Accordion のアニメーション

Angular Accordion は、パネルの展開と縮小の両方のアニメーションをサポートします。アニメーションの動作をカスタマイズできます。通常、アニメーションは各展開パネルに個別に設定できます。ただし、IgxAccordionComponent レベルで一度にすべてのパネルに適用することもできます。これにより、ユーザーは IgxAccordionComponent の animations プロパティですべてのセクションのアニメーションを一度に無効にできます。

アニメーションに関して、2 つのオプションがあります。最初に、Accordion コンポーネントの animationSettings プロパティを設定します。

import { useAnimation } from '@angular/animations';
import { slideInLeft, slideOutRight } from 'igniteui-angular';
// import { slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    ...
})
export class AccordionComponent {
    public animationSettingsCustom = {
        closeAnimation: useAnimation(slideOutRight, {
            params: {
                duration: '100ms',
                toPosition: 'translateX(25px)'
            }
        }),
        openAnimation: useAnimation(slideInLeft, {
            params: {
                duration: '500ms',
                fromPosition: 'translateX(-15px)',
                startOpacity: 0.1
            }
        })
    };
}
typescript

ビルトイン アニメーション スイートの slideInLeft アニメーションと slideOutRight アニメーションを使用して、コンテンツを折りたたむとコンポーネントのコンテンツが左側から表示され、右側に消えるようにします。アニメーションのパラメーターをオーバーライドして、アニメーションをさらにカスタマイズします。

以下のスニペットは、アニメーション設定をコンポーネントに渡す方法を示しています。

<igx-accordion #accordion [animationSettings]="animationSettingsCustom">
    ...
</igx-accordion>
html

IgxAccordionComponent のアニメーションを無効にするには、animationSettings を null に設定します。

または、各展開パネルの animationSettings 入力を設定することもできます。

<igx-accordion #accordion [singleBranchExpand]="true">
     <igx-expansion-panel [animationSettings]="slideLeftRightSettings">
        <igx-expansion-panel-header>
            <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            Content Panel 1
        </igx-expansion-panel-body>
    </igx-expansion-panel>
    <igx-expansion-panel [animationSettings]="slideTopBottomSettings">
        <igx-expansion-panel-header>
            <igx-expansion-panel-title>Title Panel 2</igx-expansion-panel-title>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            Content Panel 2
        </igx-expansion-panel-body>
    </igx-expansion-panel>
</igx-accordion>
html

collapseAll および expandAll メソッドを使用すると、IgxAccordion のすべての IgxExpansionPanel をプログラムでそれぞれ縮小および展開できます。

singleBranchExpand プロパティが true に設定されている場合、expandAll メソッドを呼び出すと、最後のパネルのみが展開されます。

Angular Accordion テンプレート化の例

Angular Accordion コンポーネントを使用すると、ヘッダーとコンテンツ パネルの外観をカスタマイズできます。 以下のサンプルは、IgxExpansionPanel の組み込みテンプレート機能を使用して詳細なフィルタリング オプションを実装する方法を示しています。

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxCheckboxModule,
	IgxSliderModule,
	IgxRadioModule,
	IgxTimePickerModule,
	IgxAccordionModule
 } from "igniteui-angular";
import { AccordionSample3Component } from "./accordion-sample-3/accordion-sample-3.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	AccordionSample3Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxCheckboxModule,
	IgxSliderModule,
	IgxRadioModule,
	IgxTimePickerModule,
	IgxAccordionModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';
import { IgxSliderType } from 'igniteui-angular';

@Component({
    selector: 'app-accordion-sample-3',
    styleUrls: ['./accordion-sample-3.component.scss'],
    templateUrl: './accordion-sample-3.component.html'
})
export class AccordionSample3Component {
    public sliderType = IgxSliderType;
    public priceRange: PriceRange = new PriceRange(200, 800);
    public checkedItems = '';
    public arriveTime: Date;
    public rating: string;

    public categories = [
        { checked: false, type: 'Bike' },
        { checked: false, type: 'Motorcycle' },
        { checked: false, type: 'Car' },
        { checked: false, type: 'Taxi' },
        { checked: false, type: 'Public Transport' }
    ];

    public checkedChange() {
        this.checkedItems = '';
        this.categories.forEach(item => {
            if (item.checked) {
                this.checkedItems = this.checkedItems ? this.checkedItems + ', ' + item.type : ': ' + item.type;
            }
        });
    }

    public get time() {
        return this.arriveTime ?
            ': Arrive before ' + this.arriveTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
    }
}
class PriceRange {
    constructor(
        public lower: number,
        public upper: number
    ) {
    }
}
tsコピー

<article class="sample-wrapper">
    <igx-accordion #accordion>
        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>Categories{{ checkedItems }}</igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                <div class="categories-container">
                    <igx-checkbox *ngFor="let item of categories" [(ngModel)]="item.checked" (change)="checkedChange()">
                        {{ item.type }}
                    </igx-checkbox>
                </div>
            </igx-expansion-panel-body>
        </igx-expansion-panel>

        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>Cost: {{ '$' + slider.lowerValue + ' to ' + '$' + slider.upperValue }}</igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                <igx-slider #slider id="slider" [type]="sliderType.RANGE" [minValue]="0" [maxValue]="1000"
                [(ngModel)]="priceRange"></igx-slider>
            </igx-expansion-panel-body>
        </igx-expansion-panel>

        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>Rating<span *ngIf="rating">{{': ' + rating }}</span></igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                <div *ngFor="let item of [].constructor(4); let i = index">
                    <igx-radio [(ngModel)]="rating" *ngIf="i===0" [value]="i+1 + ' star or more'"> {{ i + 1 }} star or more</igx-radio>
                    <igx-radio [(ngModel)]="rating" *ngIf="i>0" [value]="i+1 + ' stars or more'"> {{ i + 1 }} stars or more</igx-radio>
                    <div style="display:inline-flex;">
                        <div *ngFor="let fillStar of [].constructor(i + 1)">
                            <igx-icon>star</igx-icon>
                        </div>
                        <igx-icon>star_half</igx-icon>
                        <div *ngFor="let borderStar of [].constructor(3 - i)">
                            <igx-icon>star_border</igx-icon>
                        </div>
                    </div>
                </div>
            </igx-expansion-panel-body>
        </igx-expansion-panel>

        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>Time{{ time }}</igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                <igx-time-picker [(ngModel)]="arriveTime" mode="dropdown" [spinLoop]='false'>
                    <label igxLabel>Arrive before</label>
                </igx-time-picker>
            </igx-expansion-panel-body>
        </igx-expansion-panel>
    </igx-accordion>
</article>
htmlコピー

$ep-sample-border: 1px solid rgba(174, 174, 174, 0.25);

.sample-wrapper {
    overflow-y: auto;
    max-height: 530px;
    margin: 8px;
}

igx-slider {
    margin: 24px;
}

.categories-container {
    display: flex;
    flex-flow: column nowrap;
}

igx-checkbox,
igx-radio {
    margin: 4px 0;
}

igx-expansion-panel {
    border: $ep-sample-border;
}
scssコピー

Edit in: CodesandboxStackBlitz

ネストされた Angular Accoridon のシナリオ

以下の Angular Accordion 例では、この一般的なアプリケーション シナリオを説明するために、複雑な FAQ セクションを作成します。サンプルでネストされた IgxAccordionComponent は、展開パネルの本体内に Accordion を追加することによって実現されます。

<igx-accordion #accordion>
     <igx-expansion-panel>
        <igx-expansion-panel-header>
            <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            <igx-accordion #childAccordion>
                <igx-expansion-panel>
                    <igx-expansion-panel-header>
                        <igx-expansion-panel-title>Title Nested Panel 1</igx-expansion-panel-title>
                    </igx-expansion-panel-header>
                    <igx-expansion-panel-body>
                        Content Nested Panel 1
                    </igx-expansion-panel-body>
                </igx-expansion-panel>
                ...
            </igx-accordion>
        </igx-expansion-panel-body>
    </igx-expansion-panel>
    ...
</igx-accordion>
html

以下は結果です。

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { AccordionSample2Component } from "./accordion-sample-2/accordion-sample-2.component";
import { 
	IgxAccordionModule,
	IgxSwitchModule
 } from "igniteui-angular";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	AccordionSample2Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxAccordionModule,
	IgxSwitchModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    selector: 'app-accordion-sample-2',
    styleUrls: ['./accordion-sample-2.component.scss'],
    templateUrl: './accordion-sample-2.component.html'
})
export class AccordionSample2Component {
    public singleBranchExpand = false;
}
tsコピー

<igx-switch [(ngModel)]="singleBranchExpand">Single Branch Expand</igx-switch>
<article class="sample-wrapper">

    <igx-accordion #accordion [singleBranchExpand]="singleBranchExpand">
        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>
                    What has changed about subscription and pricing model?
                </igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                We have moved to a subscription-based pricing model for all our developer tools. This makes it easier
                for you to manage your license subscriptions and allows us to provide a better level of service for you.

                We updated our pricing and packages to provide you with flexible options and the best value. This
                includes <a href="https://www.infragistics.com/products/ignite-ui">Ignite UI </a>(formerly Ignite UI for
                JavaScript) which includes all of our JavaScript framework
                components for web development, including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and
                Web Components), as well as Infragistics Professional, Infragistics Ultimate, our Ultimate UI products.

                We also offer multi-year subscriptions options with a built-in discount, so you can see the value up
                front. With these updates we are confident that we are providing the best platforms and the best price.
            </igx-expansion-panel-body>
        </igx-expansion-panel>
        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>
                    Who will the updated changes impact?
                </igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                The license updates will impact all new and current customers using Ignite UI, Infragistics Professional
                and Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for
                Ignite UI for JavaScript, Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components.
                For more information, please refer to this blog:

                <a
                    href="https://www.infragistics.com/community/blogs/b/jason_beres/posts/announcement-changes-to-ignite-ui-product-packaging">Announcement:
                    Changes to Ignite UI Product & Packaging</a>

                The pricing has been updated for all products and packages. So, all new or additional licenses will be
                sold based on our new pricing and packages. All existing license agreements will be honored and renewed
                based upon the current agreement.
            </igx-expansion-panel-body>
        </igx-expansion-panel>
        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>
                    What is the difference between your old model and your current subscription model for Ignite UI?
                </igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages
                will be replaced with packages that include a “Trial Version” watermark. Licensed packages for Ignite UI
                will be available from our cloud hosted ProGet server.

                For more information, please refer to this article:

                <a
                    href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing">Moving
                    from Trial to Licensed Ignite UI NPM Packages</a>
            </igx-expansion-panel-body>
        </igx-expansion-panel>
        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>
                    Common questions about renewal.
                </igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body class="nested-accordion">
                <igx-accordion #nestedAccordion>
                    <igx-expansion-panel>
                        <igx-expansion-panel-header>
                            <igx-expansion-panel-title>
                                What happens if I don’t renew my subscription?
                            </igx-expansion-panel-title>
                        </igx-expansion-panel-header>
                        <igx-expansion-panel-body>
                            Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now
                            include
                            this watermark.
                        </igx-expansion-panel-body>
                    </igx-expansion-panel>
                    <igx-expansion-panel>
                        <igx-expansion-panel-header>
                            <igx-expansion-panel-title>
                                If I don’t renew my subscription will I still have access to previous versions of
                                Infragistics products?
                            </igx-expansion-panel-title>
                        </igx-expansion-panel-header>
                        <igx-expansion-panel-body>
                            Any version of Infragistics software which you have downloaded can continue to be used
                            perpetually.
                            Access to download any new or previous versions through our customer portal and package
                            feeds will
                            require maintaining an active subscription by continuing to renew it.
                        </igx-expansion-panel-body>
                    </igx-expansion-panel>
                    <igx-expansion-panel>
                        <igx-expansion-panel-header>
                            <igx-expansion-panel-title>
                                Will I be automatically charged for my renewal/ Can I be automatically charged for
                                renewal?
                            </igx-expansion-panel-title>
                        </igx-expansion-panel-header>
                        <igx-expansion-panel-body>
                            Any new subscriptions purchased online, via our eCommerce system, will renew automatically.
                            Subscription
                            renewal can be canceled, at any time, before the next automatic renewal date. Subscriptions
                            purchased
                            directly from Infragistics or Infragistics’ partners are subject to the renewal terms that
                            were agreed
                            upon as part of that purchase.
                        </igx-expansion-panel-body>
                    </igx-expansion-panel>
                </igx-accordion>
            </igx-expansion-panel-body>
        </igx-expansion-panel>
        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>
                    I split my work across two computers. Can I install on both using my single-user license?
                </igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                The Infragistics Ultimate license is tied to the user, and not the computer. That means you’re welcome
                to install and use Ignite UI, Infragistics Professional, and Infragistics Ultimate on any computer you
                use. However, if we notice a large number of activations using the same license, we may contact you to
                verify this behavior.
            </igx-expansion-panel-body>
        </igx-expansion-panel>
        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>
                    I used up my trial for an earlier version of Infragistics Ultimate. Can I start a new trial when a
                    major
                    version is released?
                </igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                Yes! If you have tried a previous version in the past, and used up your 30-day trial, you can try the
                next major version for another 30 days! You can do this in the following two ways:

                <ul>
                    <li>If you have days remaining in your 30-day trial period for the current version (e.g., the
                        Version 15.1 Volume Release), use the Check for Update option inside the Platform Installer or
                        your account. You will be able to start a fresh trial for the next major version (e.g., 20.1
                        Volume Release)</li>
                    <li>If you have used up the 30-day trial for the previous major version (e.g., the 19.2 Volume
                        Release), simply download and install Infragistics Ultimate from our <a
                            href="https://www.infragistics.com/products/ultimate">website</a> (This will also allow you
                        to start a new trial.)</li>
                </ul>
            </igx-expansion-panel-body>
        </igx-expansion-panel>
    </igx-accordion>
</article>
htmlコピー

$ep-sample-border: 1px solid rgba(174, 174, 174, 0.25);

.sample-wrapper {
    overflow-y: auto;
    max-height: 470px;
    margin: 8px;
}

igx-switch {
    padding: 16px;
}

.nested-accordion {
    margin: 10px 16px;
}

igx-expansion-panel {
    border: $ep-sample-border;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

Ignite UI for Angular Accordion のキーボード ナビゲーションは、さまざまなキーボード操作をエンドユーザーに提供します。この機能はデフォルトで有効になっており、エンドユーザーは簡単にパネル間を移動できます。IgxAccordionComponent ナビゲーションは W3C アクセシビリティ標準に準拠しており、便利に使用できます。

キーの組み合わせ

• Tab - フォーカスを最初 (フォーカスが Accordion の前にある場合) /次のパネルに移動します
• Shift + Tab - フォーカスを最後 (フォーカスが Accordion の後にある場合) /前のパネルに移動します
• 下矢印 - フォーカスを下のパネルに移動します
• 上矢印 - フォーカスを上のパネルに移動します
• Alt + 下矢印 - Accordion でフォーカスされたパネルを展開します
• Alt + 上矢印 - Accordion のフォーカスされたパネルを縮小します
• Shift + Alt + 下矢印 - 有効なすべてのパネルを展開します (singleBranchExpand が true に設定されている場合、最後の有効なパネルを展開します)
• Shift + Alt + 上矢印 - 有効なすべてのパネルを縮小します
• Home - Accordion の最初の有効なパネルに移動します
• END - Accordion の最後の有効なパネルに移動します

スタイル設定

Accordion は、基になるパネルのコンテナーとしてのみ機能します。スタイルは、IgxExpansionPanel トピックのスタイル設定セクションで説明されているように、パネルのテーマから直接適用できます。

設計上、igx-accordion 内に配置される場合、展開されたパネルにマージンが設定されます。変更するために、igx-expansion-panel テーマ内で公開されるプロパティがあります。 テーマ エンジンによって公開される関数を利用するには、スタイル ファイルに index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

最も簡単な方法は、expansion-panel-theme を拡張し、$expanded-margin、$body-color、および $header-focus-background パラメーターを受け入れる新しいテーマを作成する方法です。

$custom-panel-theme: expansion-panel-theme(
  $expanded-margin: 10px,
  $body-color: #282885,
  $header-focus-background: #efefef
);
scss

最後にコンポーネントのテーマを含めます。

@include css-vars($custom-panel-theme);
scss

デモ

EXAMPLE

API リファレンス

• IgxAccordion API
• IgxExpansionPanel API
• IgxExpansionPanelHeader API
• IgxExpansionPanelBody API
• IgxExpansionPanel スタイル

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)