Overview

Carousel

Componente archetype orientato a gallerie e card scorrevoli.

Quando usarlo

Showcase contenuti visuali
Cataloghi con card
Evidenza elementi con preview

Note operative

Configurazione tramite archetypes.carousel nel metadata
Supporta template item e responsive options

md_props_bag: archetypes.carousel

Snippet 1JSON

{
  "archetypes": {
    "carousel": {
      "advancedFilter": false,
      "imageFieldName": "image",
      "descriptionFieldName": "description",
      "imageWidth": 300,

advancedFilter: quando true mostra la wuic-filter-bar per l'archetype carousel (a livello data-repeater).
imageFieldName: campo metadata immagine.
descriptionFieldName: campo metadata descrizione.
imageWidth: larghezza immagine.
pageSize: dimensione batch pagina dati.
numVisible: numero card visibili.
numScroll: numero card per avanzamento.
usePreview: abilita preview/zoom immagine.
itemTemplateString: template custom card.
responsiveOptions[]: regole responsive.
responsiveOptions[].breakpoint: breakpoint CSS (es. 1024px).
responsiveOptions[].numVisible: visibili a quel breakpoint.
responsiveOptions[].numScroll: scroll a quel breakpoint.

Contesto Template (`itemTemplateString`)

Nel template custom sono disponibili questi input:

record: alias del record corrente (item).
rowData: alias del record corrente (item).
metaInfo: metadati tabella/colonne della datasource.
datasource: riferimento al componente datasource associato.

Contesto runtime usato dal framework:

Snippet 2ts

inputs: { record: item, rowData: item, metaInfo: metaInfo, datasource: datasource }

Eventi e subscriptions (host)

Eventi disponibili su wuic-carousel-list:

onCarouselPage: relay del paging p-carousel (onPage).
onCarouselItemClick: click su item carousel (item + originalEvent).
onCarouselDataBound: emesso quando il wrapper completa il binding dati dal datasource.

Esempio template:

Snippet 3HTML

<wuic-carousel-list
  [hardcodedDatasource]="citiesDs"
  (onCarouselPage)="handleCarouselPage($event)"
  (onCarouselItemClick)="handleCarouselItemClick($event)"
  (onCarouselDataBound)="handleCarouselDataBound($event)">
</wuic-carousel-list>

Esempio subscribe (ViewChild):

Snippet 4ts

@ViewChild(CarouselListComponent) carousel?: CarouselListComponent;
private readonly subs = new Subscription();

ngAfterViewInit(): void {
  if (!this.carousel) return;
  this.subs.add(this.carousel.onCarouselPage.subscribe((e) => console.log(e)));
  this.subs.add(this.carousel.onCarouselItemClick.subscribe((e) => console.log(e)));