Class IgxCarouselComponent

Ignite UI for Angular Carousel - ヘルプ

Ignite UI Carousel はスライドコレクションのブラウズやナビゲーションに使用されます。スライドは画像またはカードなどのカスタムコンテンツを含みます。チュートリアルまたはページに分割されるインターフェイスなどに使用できます。別の全画面要素として使用、またはその他のコンポーネントに含むことができます。

例:

<igx-carousel>
  <igx-slide>
    <h3>First Slide Header</h3>
    <p>First slide Content</p>
  <igx-slide>
  <igx-slide>
    <h3>Second Slide Header</h3>
    <p>Second Slide Content</p>
</igx-carousel>

階層

Hierarchy

IgxCarouselComponentBase
- IgxCarouselComponent

実装

OnDestroy
AfterContentInit
AfterViewChecked

コンストラクター

constructor

new IgxCarouselComponent(cdr, element, iterableDiffers, animationService, platformUtil, themeService): IgxCarouselComponent
オーバーライド IgxCarouselComponentBase.constructor
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:555
パラメーター
- cdr: ChangeDetectorRef
- element: ElementRef<any>
- iterableDiffers: IterableDiffers
- animationService: AnimationService
- platformUtil: PlatformUtil
- themeService: ThemeService
返却 IgxCarouselComponent

アクセサー

animationType

animationType: HorizontalAnimationType = HorizontalAnimationType.slide

カルーセルのアニメーションタイプを取得または設定します。デフォルト値は slide です。

<igx-carousel animationType='none'>
<igx-carousel>

次のメンバー

IgxSlideComponent

carouselPaused

carouselPaused: EventEmitter<IgxCarouselComponent> = ...

カルーセルが一時停止された後に発生するイベントです。イベント引数として IgxCarouselComponent への参照を提供します。

<igx-carousel (carouselPaused)="carouselPaused($event)"></igx-carousel>

次のメンバー

IgxCarouselComponent

carouselPlaying

carouselPlaying: EventEmitter<IgxCarouselComponent> = ...

カルーセルが slides の間の移動を再開した後に発生するイベントです。イベント引数として IgxCarouselComponent への参照を提供します。

<igx-carousel (carouselPlaying)="carouselPlaying($event)"></igx-carousel>

次のメンバー

IgxCarouselComponent

cssClass

cssClass: string = 'igx-carousel'

カルーセルコンポーネントのクラスを返します。

let class =  this.carousel.cssClass;

次のメンバー

IgxCarouselComponent

gesturesSupport

gesturesSupport: boolean = true

カルーセルにジェスチャをサポートするかどうかを制御します。デフォルト値は true です。

<igx-carousel [gesturesSupport]="false"></igx-carousel>

次のメンバー

IgxCarouselComponent

id

id: string = ...

カルーセルの id を設定します。設定されていない場合、最初のカルーセルコンポーネントの id は "igx-carousel-0" になります。

<igx-carousel id="my-first-carousel"></igx-carousel>

次のメンバー

IgxCarouselComponent

indicatorTemplate

indicatorTemplate: TemplateRef<any> = null

カルーセルインジケーターを描画するときに使用するカスタムテンプレートです。

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.indicatorTemplate = myCustomTemplate;

<!-- Set in markup -->
 <igx-carousel #carousel>
     ...
     <ng-template igxCarouselIndicator let-slide>
        <igx-icon *ngIf="slide.active">brightness_7</igx-icon>
        <igx-icon *ngIf="!slide.active">brightness_5</igx-icon>
     </ng-template>
 </igx-carousel>

indicatorsOrientation

indicatorsOrientation: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.bottom

カルーセルインジケーターの表示モードを取得または設定します。top または bottom にすることができます。デフォルト値は bottom です。

<igx-carousel indicatorsOrientation='top'>
<igx-carousel>

次のメンバー

IgxSlideComponent

keyboardSupport

keyboardSupport: boolean = true

カルーセルにキーボードナビゲーショをサポートするかどうかを制御します。デフォルト値は true です。

<igx-carousel [keyboardSupport]="false"></igx-carousel>

次のメンバー

IgxCarouselComponent

loop

loop: boolean = true

カルーセルが最後のスライドの後に最初のスライドに戻る (loop) かどうかを設定します。デフォルト値は true です。

<igx-carousel [loop]="false"></igx-carousel>

次のメンバー

IgxCarouselComponent

maximumIndicatorsCount

maximumIndicatorsCount: number = 5

表示できる最大インデックスを制御します。デフォルト値は 5 です。

<igx-carousel [maximumIndicatorsCount]="10"></igx-carousel>

次のメンバー

IgxCarouselComponent

navigation

navigation: boolean = true

カルーセルに左/右のナビゲーション (navigation) ボタンを描画するかどうかを制御します。デフォルト値は true です。

<igx-carousel [navigation]="false"></igx-carousel>

次のメンバー

IgxCarouselComponent

nextButtonTemplate

nextButtonTemplate: TemplateRef<any> = null

カルーセル「次へ」ボタンを描画するときに使用する必要があるカスタムテンプレート (存在する場合)。

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.nextButtonTemplate = myCustomTemplate;

<!-- Set in markup -->
 <igx-carousel #carousel>
     ...
     <ng-template igxCarouselNextButton let-disabled>
         <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
             <igx-icon>add</igx-icon>
         </button>
     </ng-template>
 </igx-carousel>

pause

pause: boolean = true

カルーセルがユーザーインタラクションでスライドトランジションを一時停止する (pause) かどうかを設定します。デフォルト値は true です。

 <igx-carousel [pause]="false"></igx-carousel>

次のメンバー

IgxCarouselComponent

prevButtonTemplate

prevButtonTemplate: TemplateRef<any> = null

カルーセル「前へ」ボタンを描画するときに使用する必要があるカスタムテンプレート (存在する場合)。

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.nextButtonTemplate = myCustomTemplate;

<!-- Set in markup -->
 <igx-carousel #carousel>
     ...
     <ng-template igxCarouselPrevButton let-disabled>
         <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
             <igx-icon>remove</igx-icon>
         </button>
     </ng-template>
 </igx-carousel>

role

role: string = 'region'

カルーセルの role 属性を返します。

let carouselRole =  this.carousel.role;

次のメンバー

IgxCarouselComponent

slideAdded

slideAdded: EventEmitter<ISlideEventArgs> = ...

スライドがカルーセルに追加された後に発生するイベントです。イベント引数として IgxCarouselComponent および IgxSlideComponent への参照を提供します。

<igx-carousel (slideAdded)="slideAdded($event)"></igx-carousel>

次のメンバー

IgxCarouselComponent

slideChanged

slideChanged: EventEmitter<ISlideEventArgs> = ...

スライドトランジションが実行された後に発生するイベントです。イベント引数として IgxCarouselComponent および IgxSlideComponent への参照を提供します。

<igx-carousel (slideChanged)="slideChanged($event)"></igx-carousel>

次のメンバー

IgxCarouselComponent

slideRemoved

slideRemoved: EventEmitter<ISlideEventArgs> = ...

スライドがカルーセルから削除された後に発生するイベントです。イベント引数として IgxCarouselComponent および IgxSlideComponent への参照を提供します。

<igx-carousel (slideRemoved)="slideRemoved($event)"></igx-carousel>

次のメンバー

IgxCarouselComponent

slides

slides: QueryList<IgxSlideComponent>

カルーセルにある slides のコレクションです。

let slides: QueryList<IgxSlideComponent> = this.carousel.slides;

次のメンバー

IgxCarouselComponent

theme

theme: string

カルーセルコンポーネントのテーマを設定します。

アクセサー

current

get current(): number
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:489
表示しているスライドのインデックスです。
```
let currentSlideNumber =  this.carousel.current;
```
次のメンバー
IgxCarouselComponent

返却 number

interval

get interval(): number
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:537
スライドが変わる前の間隔 (interval) をミリ秒で返します。
```
let timeInterval = this.carousel.interval;
```
次のメンバー
IgxCarouselComponent

返却 number
set interval(value): void
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:550
スライドが変わる前の間隔 (interval) をミリ秒で設定します。設定されない場合、カルーセルは slides を自動的に変更しません。
```
<igx-carousel [interval]="1000"></igx-carousel>
```
次のメンバー
IgxCarouselComponent

パラメーター
- value: number
返却 void

isDestroyed

get isDestroyed(): boolean
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:513
カルーセルが破棄されたかどうかを示すブール値を返します。
```
let isDestroyed =  this.carousel.isDestroyed;
```
次のメンバー
IgxCarouselComponent

返却 boolean

isPlaying

get isPlaying(): boolean
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:501
カルーセルが再生しているかどうかを示すブール値を返します。
```
let isPlaying =  this.carousel.isPlaying;
```
次のメンバー
IgxCarouselComponent

返却 boolean

isTypeIndigo

get isTypeIndigo(): boolean
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:710
IgxCarouselComponent のテーマが Indigo の場合、true を返します。
```
@ViewChild("carousel")
public carousel: IgxCarouselComponent;

ngAfterViewInit(){
   let isTypeIndigo = this.carousel.isTypeIndigo;
}
```
返却 boolean

nativeElement

get nativeElement(): any
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:524
DOM でカルーセル要素への参照を返します。
```
let nativeElement =  this.carousel.nativeElement;
```
次のメンバー
IgxCarouselComponent

返却 any

resourceStrings

get resourceStrings(): ICarouselResourceStrings
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:419
リソース文字列を返すアクセサーです。

返却 ICarouselResourceStrings
set resourceStrings(value): void
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:412
リソース文字列を設定するアクセサーです。デフォルトで EN リソースを使用します。

パラメーター
- value: ICarouselResourceStrings
返却 void

total

get total(): number
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:477
カルーセルで slides の総数を返します。
```
let slideCount =  this.carousel.total;
```
次のメンバー
IgxCarouselComponent

返却 number

touchAction

get touchAction(): "auto" | "pan-y"
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:142
list item の touch-action スタイルを取得します。
```
let touchAction = this.listItem.touchAction;
```
返却 "auto" | "pan-y"

メソッド

add

add(slide): void
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:758
カルーセルに新しいスライドを追加します。
```
this.carousel.add(newSlide);
```
次のメンバー
IgxCarouselComponent

パラメーター
- slide: IgxSlideComponent
返却 void

get

get(index): IgxSlideComponent
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:746
既定の index に対応するスライドまたは null を返します。
```
let slide1 =  this.carousel.get(1);
```
次のメンバー
IgxCarouselComponent

パラメーター
- index: number
返却 IgxSlideComponent

next(): void
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:805
カルーセルで次のスライドに移動します。
```
this.carousel.next();
```
次のメンバー
IgxCarouselComponent

返却 void

play

play(): void
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:843
一時停止状態の場合、カルーセルの再生を再開します。それ以外の場合、動作しません。
```
this.carousel.play();
}
```
次のメンバー
IgxCarouselComponent

返却 void

prev(): void
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:823
カルーセルで前のスライドに移動します。
```
this.carousel.prev();
```
次のメンバー
IgxCarouselComponent

返却 void

remove

remove(slide): void
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:773
スライドをカルーセルから削除します。
```
this.carousel.remove(slide);
```
次のメンバー
IgxCarouselComponent

パラメーター
- slide: IgxSlideComponent
返却 void

select

select(slide, direction?): void
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:790
指定した direction に移動する指定したスライドのトランジションを実行します。
```
this.carousel.select(this.carousel.get(2), Direction.NEXT);
```
次のメンバー
IgxCarouselComponent

パラメーター
- slide: IgxSlideComponent
- direction: Direction = Direction.NONE
返却 void

stop

stop(): void
- 次で定義 projects/igniteui-angular/src/lib/carousel/carousel.component.ts:862
pause オプションが trueに設定される場合、スライドのトランジションを停止します。それ以外の場合、動作しません。
```
 this.carousel.stop();
}
```
次のメンバー
IgxCarouselComponent

返却 void

Class IgxCarouselComponent

階層

Hierarchy

実装

コンストラクター

アクセサー

アクセサー

メソッド

コンストラクター

constructor

パラメーター

cdr: ChangeDetectorRef

element: ElementRef<any>

iterableDiffers: IterableDiffers

animationService: AnimationService

platformUtil: PlatformUtil

themeService: ThemeService

返却 IgxCarouselComponent

アクセサー

animationType

次のメンバー

carouselPaused

次のメンバー

carouselPlaying

次のメンバー

cssClass

次のメンバー

gesturesSupport

次のメンバー

id

次のメンバー

indicatorTemplate

indicatorsOrientation

次のメンバー

keyboardSupport

次のメンバー

loop

次のメンバー

maximumIndicatorsCount

次のメンバー

navigation

次のメンバー

nextButtonTemplate

pause

次のメンバー

prevButtonTemplate

role

次のメンバー

slideAdded

次のメンバー

slideChanged

次のメンバー

slideRemoved

次のメンバー

slides

次のメンバー

theme

アクセサー

current

次のメンバー

返却 number

interval

次のメンバー

返却 number

次のメンバー

パラメーター

value: number

返却 void

isDestroyed

次のメンバー

返却 boolean

isPlaying

次のメンバー

返却 boolean

isTypeIndigo

返却 boolean

nativeElement

次のメンバー

返却 any

resourceStrings