docs(*): update JA topics with the latest changes - v21.0.0 release

jp/components/accordion.md

@@ -8,19 +8,20 @@ _language: ja
 
 # Angular Accordion (アコーディオン) コンポーネントの概要
 
-## Angular Accordion とは? 
+## Angular Accordion とは?
 
 Angular Accordion は、単一のコンテナーに表示されるクリック可能なヘッダーと関連するコンテンツ セクションを含む垂直方向に展開可能なパネルを構築するための GUI コンポーネントです。Accordion は、単一のページのコンテンツの複数のセクションでスクロールする必要性を軽減するためによく使用されます。キーボード ナビゲーションと基になるパネルの展開状態を制御する API を提供します。
 
 ユーザーは、サムネイルやラベルなどの項目のリスト間で操作および移動できます。含まれる情報を表示するために、各項目を切り替えることができます (展開または縮小)。構成に応じて、一度に 1 つまたは複数の展開されている項目があります。
 
 ## Angular Accordion の例
+
 以下は FAQ セクションの基本的な Angular Accordion の例です。アコーディオンとして動作し、個別に動作します。複数のパネルを同時に展開しながら、各テキスト ブロックをシングルクリックで切り替えることができます。これにより、自動的に展開および縮小パネル間を前後に移動することなく、情報をより簡単に読み取ることができます。このパネルは、以前に開いたセクションを毎回非表示にします。
 
 ここでは、`igx-accrodion` とその[展開パネル]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html)を定義する方法を確認できます。このサンプルは、2 種類の展開動作も示します。切り替えボタンは [singleBranchExpand]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#singleBranchExpand) プロパティを設定し、一度に展開する単一ブランチと複数ブランチを切り替えます。
 
-<code-view style="height:460px" 
-           data-demos-base-url="{environment:demosBaseUrl}" 
+<code-view style="height:460px"
+           data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-1/" alt="Angular Accordion の例">
 </code-view>
 
@@ -33,15 +34,16 @@ Ignite UI for Angular Accordion コンポーネントを初期化するには、
 ```cmd
 ng add igniteui-angular
 ```
+
 Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
 
-次に、**app.module.ts** ファイルに `IgxAccordionModule` をインポートします。 
+次に、**app.module.ts** ファイルに `IgxAccordionModule` をインポートします。
 
 ```typescript
 // app.module.ts
 
 ...
-import { IgxAccordionModule } from 'igniteui-angular';
+import { IgxAccordionModule } from 'igniteui-angular/accordion';
 // import { IgxAccordionModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -58,7 +60,7 @@ export class AppModule {}
 // home.component.ts
 
 ...
-import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular';
+import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion';
 // import { IGX_ACCORDION_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -88,7 +90,7 @@ Ignite UI for Angular Accordion モジュールまたはディレクティブを
 ## Angular Accordion コンポーネントの使用
 
 [IgxAccordionComponent]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) の各セクションは、[展開パネル]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html)を使用して定義されます。
-パネルには [disabled]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html#disabled)、[collapsed]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html#collapsed)、および [animationSettings]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html#animationSettings) プロパティがあり、要件に応じてパネルの状態を構成できます。 
+パネルには [disabled]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html#disabled)、[collapsed]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html#collapsed)、および [animationSettings]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html#animationSettings) プロパティがあり、要件に応じてパネルの状態を構成できます。
 
 ### Accordion の宣言
 
@@ -133,9 +135,8 @@ Angular Accordion は、パネルの展開と縮小の両方のアニメーシ
 アニメーションに関して、2 つのオプションがあります。最初に、Accordion コンポーネントの `animationSettings` プロパティを設定します。
 
 ```typescript
-import { useAnimation } from '@angular/animations';
-import { slideInLeft, slideOutRight } from 'igniteui-angular';
-// import { slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package
+import { useAnimation, slideInLeft, slideOutRight } from '@angular/animations';
+// import { useAnimation, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular/animations'; for licensed package
 
 @Component({
     ...
@@ -194,23 +195,26 @@ export class AccordionComponent {
     </igx-expansion-panel>
 </igx-accordion>
 ```
+
 [collapseAll]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#collapseAll) および [expandAll]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#expandAll) メソッドを使用すると、[IgxAccordion]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) のすべての [IgxExpansionPanel]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) をプログラムでそれぞれ縮小および展開できます。
 
 >[!NOTE]
->[singleBranchExpand]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#singleBranchExpand) プロパティが *true* に設定されている場合、[expandAll]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#expandAll) メソッドを呼び出すと、最後の[パネル]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html)のみが展開されます。
+>[singleBranchExpand]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#singleBranchExpand) プロパティが _true_ に設定されている場合、[expandAll]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#expandAll) メソッドを呼び出すと、最後の[パネル]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html)のみが展開されます。
 
 ### Angular Accordion テンプレート化の例
+
 Angular [Accordion コンポーネント]({environment:angularApiUrl}/classes/igxaccordioncomponent.html)を使用すると、ヘッダーとコンテンツ パネルの外観をカスタマイズできます。
 以下のサンプルは、[IgxExpansionPanel]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) の組み込みテンプレート機能を使用して詳細なフィルタリング オプションを実装する方法を示しています。
 
-<code-view style="height:550px" 
-           data-demos-base-url="{environment:demosBaseUrl}" 
+<code-view style="height:550px"
+           data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-3/" alt="Angular Accoridon の例">
 </code-view>
 
 <div class="divider--half"></div>
 
 ### ネストされた Angular Accoridon のシナリオ
+
 以下の Angular Accordion 例では、この一般的なアプリケーション シナリオを説明するために、複雑な FAQ セクションを作成します。サンプルでネストされた [IgxAccordionComponent]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) は、[展開パネル]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html)の本体内に [Accordion]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) を追加することによって実現されます。
 
 ```html
@@ -239,28 +243,29 @@ Angular [Accordion コンポーネント]({environment:angularApiUrl}/classes/ig
 
 以下は結果です。
 
-<code-view style="height:550px" 
-           data-demos-base-url="{environment:demosBaseUrl}" 
+<code-view style="height:550px"
+           data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-2/" alt="Angular Accordion の例">
 </code-view>
 
 <div class="divider--half"></div>
 
 ## キーボード ナビゲーション
+
 Ignite UI for Angular Accordion のキーボード ナビゲーションは、さまざまなキーボード操作をエンドユーザーに提供します。この機能はデフォルトで有効になっており、エンドユーザーは簡単にパネル間を移動できます。[IgxAccordionComponent]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) ナビゲーションは W3C アクセシビリティ標準に準拠しており、便利に使用できます。
 
 **キーの組み合わせ**
 
- - <kbd>Tab</kbd> - フォーカスを最初 (フォーカスが Accordion の前にある場合) /次のパネルに移動します
- - <kbd>Shift + Tab</kbd> - フォーカスを最後 (フォーカスが Accordion の後にある場合) /前のパネルに移動します
- - <kbd>下矢印</kbd> - フォーカスを下のパネルに移動します
- - <kbd>上矢印</kbd> - フォーカスを上のパネルに移動します
- - <kbd>Alt + 下矢印</kbd> - Accordion でフォーカスされたパネルを展開します
- - <kbd>Alt + 上矢印</kbd> - Accordion のフォーカスされたパネルを縮小します
- - <kbd>Shift + Alt + 下矢印</kbd> - 有効なすべてのパネルを展開します (singleBranchExpand が true に設定されている場合、最後の有効なパネルを展開します)
- - <kbd>Shift + Alt + 上矢印</kbd> - 有効なすべてのパネルを縮小します
- - <kbd>Home</kbd> - Accordion の最初の有効なパネルに移動します
- - <kbd>END</kbd> - Accordion の最後の有効なパネルに移動します
+- <kbd>Tab</kbd> - フォーカスを最初 (フォーカスが Accordion の前にある場合) /次のパネルに移動します
+- <kbd>Shift + Tab</kbd> - フォーカスを最後 (フォーカスが Accordion の後にある場合) /前のパネルに移動します
+- <kbd>下矢印</kbd> - フォーカスを下のパネルに移動します
+- <kbd>上矢印</kbd> - フォーカスを上のパネルに移動します
+- <kbd>Alt + 下矢印</kbd> - Accordion でフォーカスされたパネルを展開します
+- <kbd>Alt + 上矢印</kbd> - Accordion のフォーカスされたパネルを縮小します
+- <kbd>Shift + Alt + 下矢印</kbd> - 有効なすべてのパネルを展開します (singleBranchExpand が true に設定されている場合、最後の有効なパネルを展開します)
+- <kbd>Shift + Alt + 上矢印</kbd> - 有効なすべてのパネルを縮小します
+- <kbd>Home</kbd> - Accordion の最初の有効なパネルに移動します
+- <kbd>END</kbd> - Accordion の最後の有効なパネルに移動します
 
 ## スタイル設定
 
@@ -294,21 +299,23 @@ $custom-panel-theme: expansion-panel-theme(
 
 ### デモ
 
-<code-view style="height:350px" 
-           data-demos-base-url="{environment:demosBaseUrl}" 
+<code-view style="height:350px"
+           data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/layouts/accordion-style/" alt="Angular Accordion スタイルの例">
 </code-view>
 
 ## API リファレンス
-* [IgxAccordion API]({environment:angularApiUrl}/classes/igxaccordioncomponent.html)
-* [IgxExpansionPanel API]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html)
-* [IgxExpansionPanelHeader API]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html)
-* [IgxExpansionPanelBody API]({environment:angularApiUrl}/classes/igxexpansionpanelbodycomponent.html)
-* [IgxExpansionPanel スタイル]({environment:sassApiUrl}/themes#mixin-igx-expansion-panel)
+
+- [IgxAccordion API]({environment:angularApiUrl}/classes/igxaccordioncomponent.html)
+- [IgxExpansionPanel API]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html)
+- [IgxExpansionPanelHeader API]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html)
+- [IgxExpansionPanelBody API]({environment:angularApiUrl}/classes/igxexpansionpanelbodycomponent.html)
+- [IgxExpansionPanel スタイル]({environment:sassApiUrl}/themes#mixin-igx-expansion-panel)
 
 
 ## その他のリソース
+
 コミュニティに参加して新しいアイデアをご提案ください。
 
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)

jp/components/action-strip.md

@@ -14,8 +14,8 @@ Ignite UI for Angular Action Strip コンポーネントは、ホバーなどの
 
 ## Angular Action Strip の例
 
-<code-view style="height: 400px;" 
-           data-demos-base-url="{environment:demosBaseUrl}" 
+<code-view style="height: 400px;"
+           data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/menus/action-strip-paragraph/" alt="Angular Action Strip の例">
 </code-view>
 
@@ -37,7 +37,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
 // app.module.ts
 
 ...
-import { IgxActionStripModule } from 'igniteui-angular';
+import { IgxActionStripModule } from 'igniteui-angular/action-strip';
 // import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -54,7 +54,9 @@ export class AppModule {}
 // home.component.ts
 
 ...
-import { IGX_ACTION_STRIP_DIRECTIVES, IgxButtonDirective, IgxIconComponent } from 'igniteui-angular';
+import { IGX_ACTION_STRIP_DIRECTIVES } from 'igniteui-angular/action-strip';
+import { IgxButtonDirective } from 'igniteui-angular/button';
+import { IgxIconComponent } from 'igniteui-angular/icon';
 // import { IGX_ACTION_STRIP_DIRECTIVES, IgxButtonDirective, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -114,8 +116,8 @@ Ignite UI for Angular Action Strip モジュールまたはディレクティブ
 </div>
 ```
 
-<code-view style="height: 400px;" 
-           data-demos-base-url="{environment:demosBaseUrl}" 
+<code-view style="height: 400px;"
+           data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/menus/action-strip-paragraph-menu/" >
 </code-view>
 
@@ -153,8 +155,8 @@ Ignite UI for Angular Action Strip モジュールまたはディレクティブ
 > [!NOTE]
 > `IgxActionStripComponent` がグリッドの子コンポーネントである場合、行をホバーするとUI が自動的に表示されます。
 
-<code-view style="height: 600px;" 
-           data-demos-base-url="{environment:demosBaseUrl}" 
+<code-view style="height: 600px;"
+           data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/grid/grid-action-strip/" >
 </code-view>
 
@@ -188,42 +190,42 @@ $custom-strip: action-strip-theme(
 @include css-vars($custom-strip);
 ```
 
-<code-view style="height: 400px;" 
+<code-view style="height: 400px;"
            no-theming
-           data-demos-base-url="{environment:demosBaseUrl}" 
+           data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/menus/action-strip-styling/" >
 </code-view>
 
 ## API と スタイル リファレンス
 
 アクション ストリップの API に関する詳細な情報は、以下のリンクのトピックを参照してください。
 
-* [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html)
+- [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html)
 
 以下の定義済み CSS スタイルを使用してアクション ストリップ レイアウトを構成しました。
 
-* [`IgxActionStripComponent スタイル`]({environment:sassApiUrl}/themes#function-action-strip-theme)
+- [`IgxActionStripComponent スタイル`]({environment:sassApiUrl}/themes#function-action-strip-theme)
 
 アクション ストリップで使用できるその他のコンポーネントとディレクティブ。
 
-* [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html)
-* [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html)
-* [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html)
-* [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html)
+- [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html)
+- [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html)
+- [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html)
+- [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html)
 
 <div class="divider"></div>
 
 ## テーマの依存関係
 
-* [IgxButton テーマ]({environment:sassApiUrl}/themes#function-button-theme)
-* [IgxRipple テーマ]({environment:sassApiUrl}/themes#function-ripple-theme)
-* [IgxDropDown テーマ]({environment:sassApiUrl}/themes#function-drop-down-theme)
-* [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
+- [IgxButton テーマ]({environment:sassApiUrl}/themes#function-button-theme)
+- [IgxRipple テーマ]({environment:sassApiUrl}/themes#function-ripple-theme)
+- [IgxDropDown テーマ]({environment:sassApiUrl}/themes#function-drop-down-theme)
+- [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
 
 ## その他のリソース
 
 <div class="divider--half"></div>
 コミュニティに参加して新しいアイデアをご提案ください。
 
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)