ガレリア

Galleria はコンテンツギャラリーコンポーネントです。

インポート#


import { Galleria } from 'primereact/galleria';
         

基本#

Galleria は、画像のコレクションとして *value*、高解像度画像の *item* テンプレート、サムネイルとして表示する *thumbnail* テンプレートが必要です。


<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }} 
    item={itemTemplate} thumbnail={thumbnailTemplate} />
         

制御#

Galleria は、*activeIndex* へのバインディングと *onItemChange* イベントを使用してアクティブなインデックスを更新することで、プログラムで制御できます。


<div>
    <Button icon="pi pi-minus" onClick={prev} className="p-button-secondary" />
    <Button icon="pi pi-plus" onClick={next} className="p-button-secondary ml-2" />
</div>

<Galleria value={images} activeIndex={activeIndex} onItemChange={(e) => setActiveIndex(e.index)} responsiveOptions={responsiveOptions} numVisible={5}
    item={itemTemplate} thumbnail={thumbnailTemplate} style={{ maxWidth: '640px' }} />
         

インジケーター#

インジケーターを使用すると、アイテム間をすばやく移動できます。

クリックイベント#

インジケーターは、*showIndicators* プロパティを有効にすることで下部に表示され、デフォルトではクリックイベントで操作されます。


<Galleria value={images} style={{ maxWidth: '640px' }} showThumbnails={false} showIndicators item={itemTemplate} />
         

ホバーイベント#

*changeItemOnIndicatorHover* が追加されている場合、インジケーターはクリックではなくホバーでアクティブ化できます。


<Galleria value={images} style={{ maxWidth: '640px' }} showThumbnails={false} showIndicators item={itemTemplate} />
         

位置#

インジケーターは、*indicatorsPosition* プロパティを使用して 4 つの異なる側に配置できます。さらに、*showIndicatorsOnItem* を有効にすると、インジケーターが画像セクション内に移動します。


<Galleria value={images} style={{ maxWidth: '640px' }} showThumbnails={false} showIndicators 
    showIndicatorsOnItem={inside} indicatorsPosition={position} item={itemTemplate} />
         

テンプレート#

インジケーターのコンテンツは、インデックスをパラメーターとして受け取り、コンテンツを期待する *indicator* プロパティでカスタマイズできます。


<Galleria value={images} style={{ maxWidth: '640px' }} className="custom-indicator-galleria" showThumbnails={false} showIndicators changeItemOnIndicatorHover
    showIndicatorsOnItem indicatorsPosition="left" item={itemTemplate} indicator={indicatorTemplate} />
         

サムネイル#

サムネイルは、実際のコンテンツの小さなバージョンを表します。


<Galleria style={{ maxWidth: '640px' }} value={images} responsiveOptions={responsiveOptions} numVisible={5} 
    item={itemTemplate} thumbnailsPosition={position} thumbnail={thumbnailTemplate} />
         

レスポンシブ#

Galleria のレスポンシブ性は、*responsiveOptions* プロパティで定義されます。


<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={7} circular style={{ maxWidth: '800px' }}
    item={itemTemplate} thumbnail={thumbnailTemplate} />
         

フルスクリーン#

フルスクリーンモードでは、コンテンツはモーダルレイヤー全体を覆います。

サムネイル付き#

フルスクリーンモードは、*fullScreen* プロパティを追加することで有効になり、ボタンなどのターゲットから *show* メソッドを呼び出すことができるように、Galleria の *ref* を定義する必要があります。


<Galleria ref={galleria} value={images} responsiveOptions={responsiveOptions} numVisible={9} style={{ maxWidth: '50%' }} 
    circular fullScreen showItemNavigators item={itemTemplate} thumbnail={thumbnailTemplate} />

<Button label="Show" icon="pi pi-external-link" onClick={() => galleria.current.show()} />
         

サムネイルなし#

フルスクリーンモードではサムネイルを非表示にすることもできます。


<Galleria ref={galleria} value={images} numVisible={9} style={{ maxWidth: '50%' }} 
    circular fullScreen showItemNavigators showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />

<Button label="Show" icon="pi pi-external-link" onClick={() => galleria.current.show()} />
         

カスタムコンテンツ#

*activeIndex* を使用すると、Galleria は特定の初期画像で表示されます。


<Galleria ref={galleria} value={images} numVisible={7} style={{ maxWidth: '850px' }}
    activeIndex={activeIndex} onItemChange={(e) => setActiveIndex(e.index)}
    circular fullScreen showItemNavigators showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />

<div className="grid" style={{ maxWidth: '400px' }}>
    {
        images && images.map((image, index) => {
            let imgEl = <img src={image.thumbnailImageSrc} onClick={
                () => {setActiveIndex(index); galleria.current.show()}
            } />
            return (
                <div className="col-3" key={index}>
                    {imgEl}
                </div>
            )
        })
    }
</div>
         

ナビゲーター#

ナビゲーターは、画像間を前後に移動するために使用されます。

サムネイル付き#

ナビゲーター要素と左右の両側に *showItemNavigators* を追加します. 


<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} circular style={{ maxWidth: '640px' }} showItemNavigators 
    item={itemTemplate} thumbnail={thumbnailTemplate} />
         

サムネイルなし#

インジケーターのみの簡単な例です。


<Galleria value={images} numVisible={5} circular style={{ maxWidth: '640px' }} showItemNavigators 
    showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
         

ホバー時に表示#

*showItemNavigatorsOnHover* が有効になっている場合、ナビゲーターはホバー時にのみ表示されます。


<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} circular style={{ maxWidth: '640px' }} 
    showItemNavigators showItemNavigatorsOnHover item={itemTemplate} thumbnail={thumbnailTemplate} />
         

インジケーター付き#

ナビゲーターとインジケーターも組み合わせることができます。


<Galleria value={images} numVisible={5} circular style={{ maxWidth: '640px' }} 
    showItemNavigators showItemNavigatorsOnHover showIndicators
    showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
         

自動再生#

スライドショーの実装は、*circular* および *autoPlay* プロパティを追加することによって定義されます。


<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }} 
    item={itemTemplate} thumbnail={thumbnailTemplate} circular autoPlay transitionInterval={2000} />
         

キャプション#

画像の説明は、表示されたオブジェクトを受け取り、コンテンツを返す *caption* プロパティで指定されます。


<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} 
    item={itemTemplate} thumbnail={thumbnailTemplate} caption={caption} style={{ maxWidth: '640px' }} />
         

高度#

カスタム UI を使用した高度な Galleria の実装。


<Galleria ref={galleria} value={images} activeIndex={activeIndex} onItemChange={onItemChange}
    showThumbnails={showThumbnails} showItemNavigators showItemNavigatorsOnHover
    numVisible={5} circular autoPlay transitionInterval={3000} responsiveOptions={responsiveOptions}
    item={itemTemplate} thumbnail={thumbnailTemplate} footer={footer}
    style={{ maxWidth: '640px' }} className={galleriaClassName} />
         

アクセシビリティ#

スクリーンリーダー

Galleria は *region* ロールを使用し、任意の属性がメインコンテナ要素に渡されるため、*aria-label* や *aria-roledescription* などの属性も使用できます。スライドコンテナには *aria-live* があります属性は、ガレリアが自動再生モードでない場合は「丁寧」に設定され、それ以外の場合は自動再生で値が「オフ」になります。

スライドには、ロケール API の *aria.slideNumber* プロパティを参照する aria-label を持つ *group* ロールがあります。同様に、*aria.slide* はアイテムの *aria-roledescription* として使用されます。非アクティブなスライドは *aria-hidden* でリーダーから隠されています。

次へ/前へナビゲーターは、デフォルトでそれぞれ ロケール API の *aria.nextPageLabel* および *aria.firstPageLabel* プロパティを参照する *aria-label* 属性を持つボタン要素です。それでも、有効な属性は *nextButtonProps* および *prevButtonProps* を使用してボタン要素に暗に渡されるため、独自の aria ロールと属性を使用できます。

クイックナビゲーション要素とサムネイルはタブパターンに従います。それらは *tablist* ロールを持つ要素内に配置されますが、各アイテムには *aria-selected* および *aria-controls* 属性を持つ *tab* ロールがあります。 クイックナビゲーションアイテムの *aria-label* 属性は、ロケール API の *aria.pageLabel* を参照します。現在のページは *aria-current* でマークされています。

フルスクリーンモードでは、モーダル要素は *aria-modal* が有効になっている *dialog* ロールを使用します。閉じるボタンは、ロケール API の *aria.close* プロパティから *aria-label* を取得します。

次へ/前へのキーボードサポート

キー機能
タブカルーセルのインタラクティブな要素間でフォーカスを移動します。
入力ナビゲーションをアクティブにします。
スペースナビゲーションをアクティブにします。

クイックナビゲーションキーボードサポート

キー機能
タブアクティブなスライドリンク間でフォーカスを移動します。
入力フォーカスされているスライドリンクをアクティブにします。
スペースフォーカスされているスライドリンクをアクティブにします。
右矢印次のスライドリンクにフォーカスを移動します。
左矢印前のスライドリンクにフォーカスを移動します。
ホーム最初のスライドリンクにフォーカスを移動します。
終了最後のスライドリンクにフォーカスを移動します。
                                          PrimeReact 10.8.3 by PrimeTek