A media gallery displays a group of thumbnails in a gallery format, allowing users to preview and select different media.
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 {
@Input() @HostBinding() skeleton: boolean = false
@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
}
boolean| Default | false |
|---|---|
| Description | Controls whether the component displays a skeleton loading state. |
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| Default | – |
|---|---|
| Description | An event indicating that the selected media gallery element has changed. |
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 |
import { DaffThumbnailDirective } from '@daffodil/design/media-gallery'
DaffThumbnailDirective is a structural directive used to mark elements as thumbnails within the DaffMediaGalleryComponent.
<ng-template daffThumbnail></ng-template>
@Directive()
class DaffThumbnailDirective implements OnInit {
@Input() thumbnailSrc: undefined = undefined
@Input() label: string = undefined
@Input() isVideo: boolean = false
}
undefined| Default | undefined |
|---|---|
| Description | The file path to a thumbnail, presumably an image. |
string| Default | undefined |
|---|---|
| Description | Provides an accessible label for a thumbnail. |
boolean| Default | false |
|---|---|
| Description | Indicates whether the thumbnail represents a video. |
import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery'
@NgModule()
class DaffMediaGalleryModule {}