クラス IgxCarouselComponent

Ignite UI for Angular Carousel - ヘルプ

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

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

階層

  • IgxCarouselComponent

実装

  • OnDestroy
  • AfterContentInit

コンストラクタ

constructor

  • new IgxCarouselComponent(element: ElementRef, iterableDiffers: IterableDiffers, builder: AnimationBuilder, platformUtil: PlatformUtil): IgxCarouselComponent

プロパティ

animationType

animationType: CarouselAnimationType = CarouselAnimationType.slide

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

<igx-carousel animationType='none'>
<igx-carousel>
@次のメンバー:

IgxSlideComponent

ariaLabel

ariaLabel: string = "carousel"

カルーセルの aria-label を返します。

let carousel = this.carousel.ariaLabel;

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 = `igx-carousel-${NEXT_ID++}`

カルーセルの 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"  fontSet="material">brightness_7</igx-icon>
        <igx-icon *ngIf="!slide.active"  fontSet="material">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 igxButton="fab" igxRipple="white" [disabled]="disabled">
               <igx-icon fontSet="material">add</igx-icon>
          </button>
     </ng-template>
 </igx-carousel>

onCarouselPaused

onCarouselPaused: EventEmitter<IgxCarouselComponent> = new EventEmitter<IgxCarouselComponent>()

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

<igx-carousel (onCarouselPaused)="onCarouselPaused($event)"></igx-carousel>
@次のメンバー:

IgxCarouselComponent

onCarouselPlaying

onCarouselPlaying: EventEmitter<IgxCarouselComponent> = new EventEmitter<IgxCarouselComponent>()

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

<igx-carousel (onCarouselPlaying)="onCarouselPlaying($event)"></igx-carousel>
@次のメンバー:

IgxCarouselComponent

onSlideAdded

onSlideAdded: EventEmitter<ISlideEventArgs> = new EventEmitter<ISlideEventArgs>()

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

<igx-carousel (onSlideAdded)="onSlideAdded($event)"></igx-carousel>
@次のメンバー:

IgxCarouselComponent

onSlideChanged

onSlideChanged: EventEmitter<ISlideEventArgs> = new EventEmitter<ISlideEventArgs>()

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

<igx-carousel (onSlideChanged)="onSlideChanged($event)"></igx-carousel>
@次のメンバー:

IgxCarouselComponent

onSlideRemoved

onSlideRemoved: EventEmitter<ISlideEventArgs> = new EventEmitter<ISlideEventArgs>()

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

<igx-carousel (onSlideRemoved)="onSlideRemoved($event)"></igx-carousel>
@次のメンバー:

IgxCarouselComponent

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 igxButton="fab" igxRipple="white" [disabled]="disabled">
               <igx-icon fontSet="material">remove</igx-icon>
          </button>
     </ng-template>
 </igx-carousel>

role

role: string = "region"

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

let carouselRole =  this.carousel.role;
@次のメンバー:

IgxCarouselComponent

slides

slides: QueryList<IgxSlideComponent>

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

let slides: QueryList<IgxSlideComponent> = this.carousel.slides;
@次のメンバー:

IgxCarouselComponent

アクセサー

current

  • get current(): number

interval

  • get interval(): number
  • set interval(value: number): void

isDestroyed

  • get isDestroyed(): boolean

isPlaying

  • get isPlaying(): boolean

nativeElement

  • get nativeElement(): any

resourceStrings

tabIndex

  • get tabIndex(): number

total

  • get total(): number

touchAction

  • get touchAction(): "pan-y" | "auto"

メソッド

add

get

next

  • next(): void

play

  • play(): void

prev

  • prev(): void

remove

select

stop

  • stop(): void