画廊

Galleria 是一个内容画廊组件。

导入#


import { Galleria } from 'primereact/galleria';
         

基本#

Galleria 需要一个 value 作为图像集合，item 模板用于显示高分辨率图像，以及 thumbnail 模板用于显示缩略图。


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

受控#

可以使用绑定到 activeIndex 以及 onItemChange 事件来更新活动索引，从而以编程方式控制 Galleria。


<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 属性将指示器放置在四个不同的侧面。此外，启用 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 属性启用全屏模式，并且需要定义 Galleria 的 ref，以便可以从按钮之类的目标调用 show 方法。


<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' }} />
         

高级#

具有自定义用户界面的高级 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 之类的属性。如果 galleria 不在自动播放模式下，则幻灯片容器的 aria-live属性设置为“polite”，否则在自动播放中该值将为“off”。

幻灯片具有 group 角色，其 aria-label 指的是 locale API 的 aria.slideNumber 属性。同样，aria.slide 用作项目的 aria-roledescription。非活动幻灯片通过 aria-hidden 从阅读器中隐藏。

默认情况下，下一个和上一个导航器是按钮元素，其 aria-label 属性分别引用 locale API 的 aria.nextPageLabel 和 aria.firstPageLabel 属性，您仍然可以使用自己的 aria 角色和属性，因为任何有效属性都会通过使用 nextButtonProps 和 prevButtonProps 隐式传递给按钮元素。

快速导航元素和缩略图遵循选项卡模式。它们放置在具有 tablist 角色的元素内，而每个项目都具有 tab 角色，其中包含 aria-selected 和 aria-controls 属性。 快速导航项的 aria-label 属性引用 locale API 的 aria.pageLabel。当前页面标记为 aria-current。

在全屏模式下，模态元素使用启用了 aria-modal 的 dialog 角色。关闭按钮从 locale API 的 aria.close 属性中检索 aria-label。

下一个/上一个键盘支持

按键功能
tab在轮播中移动焦点通过交互式元素。
enter激活导航。
space激活导航。

快速导航键盘支持

按键功能
tab将焦点移动到活动幻灯片链接。
enter激活焦点幻灯片链接。
space激活焦点幻灯片链接。
右箭头将焦点移动到下一个幻灯片链接。
左箭头将焦点移动到上一个幻灯片链接。
首页将焦点移动到第一个幻灯片链接。
末尾将焦点移动到最后一个幻灯片链接。
                                          PrimeReact 10.9.1，由PrimeTek提供