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 {
customId: InputSignal<string> = undefined, { alias: 'id' }
elementChange: OutputEmitterRef<number> = output<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
}
InputSignal<string>| Default | undefined, { alias: 'id' } |
|---|---|
| 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. |
OutputEmitterRef<number>| 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 {
thumbnailSrc: InputSignal<string> = undefined
label: InputSignal<string> = undefined
isVideo: InputSignal<boolean> = false
}
InputSignal<string>| Default | undefined |
|---|---|
| Description | The file path to a thumbnail, presumably an image. |
InputSignal<string>| Default | undefined |
|---|---|
| Description | Provides an accessible label for a thumbnail. |
InputSignal<boolean>| Default | false |
|---|---|
| Description | Indicates whether the thumbnail represents a video. |
import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery'
@NgModule()
class DaffMediaGalleryModule {}