import { DaffMediaGalleryComponent } from '@daffodil/design/media-gallery'
The DaffMediaGalleryComonent is used to display a group of thumbnails in a gallery format.
<daff-media-gallery>
<ng-template daffThumbnail thumbnailSrc="/thumbnail-path.jpg" label="Your description">
<daff-image src="/image-path.jpg" alt="Your description" width="100" height="100"></daff-image>
</ng-template>
</daff-media-gallery>
@Component()
class DaffMediaGalleryComponent implements DaffMediaGalleryRegistration {
@HostBinding() @Input() id: string
@Output() elementChange: EventEmitter<number> = new EventEmitter<number>()
selectIndex(index: number): void
next(focus: boolean = true): void
previous(focus: boolean = true): void
selectFirst(focus: boolean = true): void
selectLast(focus: boolean = true): void
}
voidSelect a specific entry in the media gallery by its index.
| Parameter | index: number |
|---|---|
| Description | The index to set, starting at 0. |
voidNavigate to the next element in the list of thumbnails.
| Parameter | focus: boolean |
|---|---|
| Default | true |
| Description | Whether to move focus to the newly selected item. |
voidNavigate to the previous element in the list of thumbnails.
| Parameter | focus: boolean |
|---|---|
| Default | true |
| Description | Whether to move focus to the newly selected item. |
voidSelect the first element.
| Parameter | focus: boolean |
|---|---|
| Default | true |
| Description | Whether to move focus to the newly selected item. |
voidSelect the last element of the gallery.
| Parameter | focus: boolean |
|---|---|
| Default | true |
| Description |
string| Default | – |
|---|---|
| Description | Custom ID for the media gallery that overrides the auto-generated one. When using this input, it is your responsibility to ensure that the ID is unique. |
EventEmitter<number>| Default | – |
|---|---|
| Description | An event indicating that the selected media gallery element has changed. |