Skip to content

Commit 894a0f8

Browse files
randriovarandriova
committed
Add Carousel topic #1350 
1 parent bae3cf8 commit 894a0f8

File tree

2 files changed

+359
-0
lines changed

2 files changed

+359
-0
lines changed

‎doc/jp/components/layouts/carousel.md‎

Lines changed: 353 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,353 @@
1+
---
2+
title: {Platform} Carousel | インフラジスティックス
3+
_description: {ProductName} Carousel コンポーネントを使用すると、スライド、カード、またはページに基づいたインターフェイスのコレクション間を移動できます。今すぐお試しください。
4+
_keywords: {ProductName}, UI controls, {Platform} widgets, web widgets, UI widgets, {Platform}, Native {Platform} Components Suite, Native {Platform} Controls, Native {Platform} Components Library, {Platform} Carousel component, {Platform} Carousel control, {ProductName}, UI コントロール, {Platform} ウィジェット, Web ウィジェット, UI ウィジェット, ネイティブ {Platform} コンポーネント スイート, ネイティブ {Platform} コントロール, ネイティブ {Platform} コンポーネント ライブラリ, {Platform} Carousel コンポーネント, {Platform} Carousel コントロール
5+
mentionedTypes: ["Carousel"]
6+
_language: ja
7+
---
8+
9+
# {Platform} Carousel (カルーセル) の概要
10+
{ProductName} カルーセルは、レスポンシブで軽量なコンポーネントであり、テキスト スライド、リンク、およびその他の html 要素を含む画像のコレクションを前後に移動するユーザーに、スライドショーのような Web エクスペリエンスを作成する最も柔軟な方法を提供します。
11+
12+
{Platform} カルーセル コンポーネントを使用すると、アニメーション、スライド トランジション、およびカスタマイズを使用できるため、インターフェイスを簡単に微調整して {Platform} カスタム カルーセルを構築できます。
13+
14+
## {Platform} Carousel の例
15+
以下に示す {Platform} カルーセルのデモは、画像のみを含むスライドを示しています。
16+
17+
`sample="/layouts/carousel/overview", height="500", alt="{Platform} Carousel 概要の例"`
18+
19+
## 使用方法
20+
21+
<!-- WebComponents -->
22+
まず、次のコマンドを実行して {ProductName} をインストールする必要があります:
23+
24+
```cmd
25+
npm install {PackageWebComponents}
26+
```
27+
28+
次に、以下のように、`Carousel` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
29+
30+
```ts
31+
import { defineComponents, IgcCarouselComponent } from "igniteui-webcomponents";
32+
import 'igniteui-webcomponents/themes/light/bootstrap.css';
33+
34+
defineComponents(IgcCarouselComponent);
35+
```
36+
<!-- end: WebComponents -->
37+
38+
{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
39+
40+
{ProductName} カルーセルがインポートされたので、`Carousel` とそのボタンの基本構成を開始できます。
41+
42+
`Carousel` セレクターを使用してスライドをラップします。スライドに有効な HTML コンテンツ、その他のコンポーネントなども含めることができます。
43+
44+
```html
45+
<igc-carousel>
46+
<igc-carousel-slide>
47+
<img src="assets/images/carousel/ignite-ui-indigo-design.png"/>
48+
</igc-carousel-slide>
49+
<igc-carousel-slide>
50+
<img src="assets/images/carousel/slider-image-chart.png"/>
51+
</igc-carousel-slide>
52+
<igc-carousel-slide>
53+
<img src="assets/images/carousel/ignite-ui-charts.png"/>
54+
</igc-carousel-slide>
55+
</igc-carousel>
56+
```
57+
58+
スライドをデフォルトでアクティブにしたい場合は、`Active` 属性を使用します。
59+
60+
```html
61+
<igc-carousel>
62+
...
63+
<igc-carousel-slide>
64+
...
65+
</igc-carousel-slide>
66+
<igc-carousel-slide active>
67+
...
68+
</igc-carousel-slide>
69+
</igc-carousel>
70+
```
71+
72+
>[!NOTE]
73+
>アクティブなスライドが設定されていない場合は、最初のスライドがデフォルトで設定されます。最初のレンダリングまたは後続の更新時にアクティブなスライドが複数ある場合は、最後のスライドだけが考慮されます。
74+
75+
## 例
76+
77+
### カルーセルの構成
78+
79+
デフォルトでは、`Carousel` の `DisableLoop` プロパティは **false** に設定されています (ループは、Next 動作でナビゲートするときに最初のスライドが最後のスライドの後に来るか、Previous 動作を使用して最後のスライドが最初のスライドの後に来るときに起こります)。ループ動作を無効にするには、`DisableLoop` プロパティの値を **true** に設定します。
80+
81+
```html
82+
<igc-carousel disable-loop="true">
83+
...
84+
</igc-carousel>
85+
```
86+
87+
各スライド インデックスを追跡するために、カルーセルには、デフォルトでカルーセルの `end` に配置されるインジケーターがあります。この動作を変更するには、`IndicatorsOrientation` プロパティを使用して、`start` に割り当てる必要があります。
88+
89+
```html
90+
<igc-carousel indicators-orientation="start">
91+
...
92+
</igc-carousel>
93+
```
94+
95+
デフォルトでは、`Carousel` にはナビゲーション ボタンとインジケーターが表示されます。インジケーターを非表示にするには `HideIndicators` プロパティを使用し、ナビゲーション ボタンを非表示にするには `HideNavigation` プロパティを使用します。
96+
97+
```html
98+
<igc-carousel hide-navigation="true" hide-indicators="true">
99+
...
100+
</igc-carousel>
101+
```
102+
103+
`Carousel` は垂直モードをサポートしています。これを有効にするには、`Vertical` プロパティを使用します。
104+
105+
```html
106+
<igc-carousel vertical="true">
107+
...
108+
</igc-carousel>
109+
```
110+
111+
### カスタム インジケーター
112+
113+
{Platform} カスタム カルーセル インジケーターを追加するには、`Indicator` を使用します:
114+
115+
```html
116+
<igc-carousel>
117+
<igc-carousel-indicator>
118+
<span>🤍</span>
119+
<span slot="active">❤️</span>
120+
</igc-carousel-indicator>
121+
<igc-carousel-indicator>
122+
<span>🤍</span>
123+
<span slot="active">❤️</span>
124+
</igc-carousel-indicator>
125+
126+
<igc-carousel-slide>
127+
<img src="assets/images/card/media/the_red_ice_forest.jpg"/>
128+
</igc-carousel-slide>
129+
<igc-carousel-slide>
130+
<img src="assets/images/card/media/yosemite.jpg"/>
131+
</igc-carousel-slide>
132+
</igc-carousel>
133+
```
134+
135+
{ProductName} カルーセル コンポーネントを使用すると、ユーザーは単一のインジケーターのアクティブ状態と非アクティブ状態に異なる要素を使用できます。インジケーターを宣言するときは、たとえ同じであっても、スロットごとに 2 つの要素 (空とアクティブ) を提供することが必須です。
136+
137+
138+
### カスタム ナビゲーション ボタン
139+
140+
これを実現するには、`previous-button` スロットと `next-button` スロットを使用します。
141+
142+
```html
143+
<igc-carousel>
144+
<igc-icon slot="previous-button" name="previous" collection="material"></igc-icon>
145+
<igc-icon slot="next-button" name="next" collection="material"></igc-icon>
146+
...
147+
</igc-carousel>
148+
```
149+
150+
### 他のコンポーネントを含むスライド
151+
152+
このカルーセルには、フォームと画像を含むスライドが含まれます。
153+
154+
```html
155+
<igc-carousel>
156+
<igc-carousel-slide>
157+
<div>
158+
<img src="assets/images/svg/carousel/SignUp.svg"/>
159+
<form>
160+
<igc-input type="text" placeholder="Username">
161+
<igc-icon slot="prefix" name="person"></igc-icon>
162+
</igc-input>
163+
<igc-input type="password" placeholder="Password">
164+
<igc-icon slot="prefix" name="password"></igc-icon>
165+
</igc-input>
166+
<igc-button type="reset">Sign In</igc-button>
167+
</form>
168+
</div>
169+
</igc-carousel-slide>
170+
<igc-carousel-slide>
171+
<div>
172+
<img src="assets/images/svg/carousel/Route.svg"/>
173+
<form>
174+
<igc-input type="text" placeholder="Search">
175+
<igc-icon slot="prefix" name="search"></igc-icon>
176+
</igc-input>
177+
<igc-button type="reset">Search</igc-button>
178+
</form>
179+
</div>
180+
</igc-carousel-slide>
181+
</igc-carousel>
182+
```
183+
184+
#### サンプル
185+
186+
`sample="/layouts/carousel/components", height="600", alt="コンポーネント付き {Platform} Carousel の例"`
187+
188+
189+
## アニメーション
190+
191+
アニメーション化されたスライド遷移により、エンドユーザーはカルーセルを操作しているときに高いエクスペリエンスを得ることができます。
192+
193+
デフォルトでカルーセルは `slide` アニメーションを使用するように設定されていますが、代替アニメーションとして `fade` もサポートしています。
194+
195+
アニメーションを変更するには、`AnimationType` プロパティを使用します。
196+
197+
```html
198+
<igc-carousel animation-type="fade">
199+
...
200+
</igc-carousel>
201+
```
202+
203+
`AnimationType` プロパティに `none` を設定すると、アニメーションが無効になります。
204+
205+
### サンプル
206+
207+
以下のデモは、カルーセルがサポートするさまざまなタイプのアニメーションを示しています。
208+
209+
`sample="/layouts/carousel/animations", height="650", alt="{Platform} Carousel アニメーションの例"`
210+
211+
212+
## ナビゲーション
213+
214+
トランジションとナビゲーションは、最も重要なカルーセル機能です。
215+
216+
カルーセル内のナビゲーションは、モバイル デバイスでのナビゲーション ボタン、キーボード ナビゲーション、パン操作を通じてユーザーが処理できます。
217+
218+
### Touch gestures
219+
220+
デフォルトでカルーセルはあらゆるタッチ対応デバイスに使用できます。
221+
222+
カルーセル [アニメーション](carousel.md#アニメーション)はタッチ デバイスで完全にサポートされているため、プラットホームに合わせてプログレッシブ Web アプリケーション ([PWA](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps)) を構築するための完璧なツールです。
223+
224+
### キーボード ナビゲーション
225+
226+
* ナビゲーション ボタン
227+
* `Space`/`Enter` キー - 次のスライド/前のスライドに移動します。
228+
* インジケーター
229+
* `左矢印`キー - 前のスライド (右から左モードでは次) に移動します。
230+
* `右矢印`キー - 次のスライド (右から左モードでは前へ) に移動します。
231+
* `Home` キー - 最初のスライド (右から左モードでは最後) に移動します。
232+
* `End` キー - 最後のスライド (右から左モードでは最初) に移動します。
233+
234+
### 自動的なトランジション
235+
236+
`Carousel` は、ユーザーの操作なしでスライドを自動的に変更するように簡単に構成できます。この方法では、トランジション間隔 を `Interval` プロパティに設定するだけで、スライドショーを作成できます。このプロパティは、スライド トランジション間の間隔 (ミリ秒)を決定します。
237+
238+
>[!NOTE]
239+
>カルーセル コンテンツの上にマウスを移動するか、キーボード フォーカスをいずれかのカルーセル コンテンツに移動すると、自動トランジションが一時停止されます。マウスがカルーセルから離れるか、キーボード フォーカスがカルーセル コンテンツから移動すると、自動トランジションが再開されます。
240+
この動作は、`DisablePauseOnInteraction` プロパティを **true** に設定することでこれを防ぐことができます。
241+
242+
```html
243+
<igc-carousel interval="2000" disable-pause-on-interaction="true">
244+
...
245+
</igc-carousel>
246+
```
247+
248+
## 高度な例
249+
250+
ループを有効にして完全に自動化されたカルーセルを作成しましょう。各スライドのサムネイル表示になるようにインジケーターを設定します。
251+
252+
253+
これを実現するには、カルーセルを以下のように構成する必要があります。
254+
- `DisablePauseOnInteraction` プロパティを有効にします。
255+
- `HideNavigation` プロパティを有効にします。
256+
- `Vertical` プロパティを有効にします。
257+
- トランジション `Interval` を追加します。
258+
- 各スライドにカスタム `Indicator` を追加します。
259+
260+
カルーセル テンプレートは以下のようになります。
261+
262+
```html
263+
<igc-carousel
264+
disable-pause-on-interaction="true"
265+
hide-navigation="true"
266+
vertical="true"
267+
interval="2000"
268+
animation-type="fade"
269+
>
270+
<igc-carousel-indicator>
271+
<img class="blurred" src="assets/images/carousel/WonderfulCoastThumb.png" width="50" height="60"/>
272+
<img slot="active" src="assets/images/carousel/WonderfulCoastThumb.png" width="50" height="60"/>
273+
</igc-carousel-indicator>
274+
<igc-carousel-indicator>
275+
<img class="blurred" src="assets/images/carousel/CulturalDipThumb.png" width="50" height="60"/>
276+
<img slot="active" src="assets/images/carousel/CulturalDipThumb.png" width="50" height="60"/>
277+
</igc-carousel-indicator>
278+
<igc-carousel-indicator>
279+
<img class="blurred" src="assets/images/carousel/GoldenBeachesThumb.png" width="50" height="60"/>
280+
<img slot="active" src="assets/images/carousel/GoldenBeachesThumb.png" width="50" height="60"/>
281+
</igc-carousel-indicator>
282+
<igc-carousel-indicator>
283+
<img class="blurred" src="assets/images/carousel/IslandOfHistoryThumb.png" width="50" height="60"/>
284+
<img slot="active" src="assets/images/carousel/IslandOfHistoryThumb.png" width="50" height="60"/>
285+
</igc-carousel-indicator>
286+
<igc-carousel-indicator>
287+
<img class="blurred" src="assets/images/carousel/AmazingBridgeThumb.png" width="50" height="60"/>
288+
<img slot="active" src="assets/images/carousel/AmazingBridgeThumb.png" width="50" height="60"/>
289+
</igc-carousel-indicator>
290+
291+
<igc-carousel-slide>
292+
<img src="assets/images/carousel/WonderfulCoast.png"/>
293+
</igc-carousel-slide>
294+
<igc-carousel-slide>
295+
<img src="assets/images/carousel/CulturalDip.png"/>
296+
</igc-carousel-slide>
297+
<igc-carousel-slide>
298+
<img src="assets/images/carousel/GoldenBeaches.png"/>
299+
</igc-carousel-slide>
300+
<igc-carousel-slide>
301+
<img src="assets/images/carousel/IslandOfHistory.png"/>
302+
</igc-carousel-slide>
303+
<igc-carousel-slide>
304+
<img src="assets/images/carousel/AmazingBridge.png"/>
305+
</igc-carousel-slide>
306+
</igc-carousel>
307+
```
308+
309+
これらの構成の結果は以下のようになります。
310+
311+
`sample="/layouts/carousel/thumbnail", height="600", alt="{Platform} Carousel サムネイルの例"`
312+
313+
314+
## ユーザー補助
315+
316+
### WAI-ARIA の役割、状態、およびプロパティ
317+
* カルーセルの基本要素の役割は [`region`](https://www.w3.org/TR/wai-aria-1.1/#region) です。これは、ユーザーが簡単にナビゲートできるようにしたい特定の目的に関連するコンテンツを含むセクションです。
318+
* カルーセル インジケーターの役割は [`tab`](https://www.w3.org/TR/wai-aria-1.1/#tab) です。これは、ユーザーに描画されるタブ コンテンツを選択するためのメカニズムを提供するグループ化ラベルです。
319+
* タブのセット (カルーセル インジケーター) 役割のコンテナーとして機能する要素は、[`tablist`](https://www.w3.org/TR/wai-aria-1.1/#tablist) に設定されます。
320+
* 各スライド要素には、[`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel) の役割が設定されています。
321+
322+
### ARIA のサポート
323+
#### Carousel コンポーネント
324+
* **属性**
325+
* [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) を 「carousel」 に設定します。
326+
* [aria-live](https://www.w3.org/TR/wai-aria-1.1/#aria-live) - スクリーン リーダーがライブ リージョンの更新を処理する優先度を設定するために使用されます。可能な設定は **off** おとび **polite** です。デフォルト設定は **polite** であり、スライド セットのコンテナーとして機能する要素に設定されています。`Interval` オプションが設定され、カルーセルが再生状態の場合、**aria-live** 属性は **off** に設定されます。
327+
* [aria-label](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label) (ナビゲーション ボタン) - 「前のスライド」/「次のスライド」。
328+
329+
#### Slide コンポーネント
330+
* **属性**
331+
* id - 「igc-carousel-slide-${incremented_number}」 のパターンに従います。
332+
* [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) を 「slide」 に設定します。
333+
* [aria-label](https://www.w3.org/TR/wai-aria/#aria-label) は 「${index + 1} of ${total}」 のパターンに従います。
334+
335+
#### Indicator コンポーネント
336+
* **属性**
337+
* [aria-label](https://www.w3.org/TR/wai-aria/#aria-label) は 「Slide ${index + 1}」 のパターンに従います。
338+
* [aria-selected](https://www.w3.org/TR/wai-aria-1.1/#aria-selected) - アクティブなスライドに基づいて **true** または **false** に設定します。
339+
340+
341+
## API リファレンス
342+
343+
- `Carousel`
344+
- `Slide`
345+
- `Indicator`
346+
- `Icon`
347+
- `Input`
348+
- `Button`
349+
350+
## その他のリソース
351+
352+
* [{ProductName} **フォーラム (英語)**]({ForumsLink})
353+
* [{ProductName} **GitHub (英語)**]({GithubLink})

‎docfx/jp/components/toc.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1463,6 +1463,12 @@
14631463
"name": "カード",
14641464
"href": "layouts/card.md"
14651465
},
1466+
{
1467+
"exclude": ["Angular", "Blazor", "React"],
1468+
"name": "カルーセル",
1469+
"href": "layouts/carousel.md",
1470+
"status": "NEW"
1471+
},
14661472
{
14671473
"exclude": ["Angular"],
14681474
"name": "ドック マネージャー",

0 commit comments

Comments
 (0)