2021-05-12 09:35:29 +00:00
|
|
|
const GalleriaProps = [
|
|
|
|
{
|
|
|
|
name: "id",
|
|
|
|
type: "string",
|
|
|
|
default: "null",
|
|
|
|
description: "Unique identifier of the element."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "value",
|
|
|
|
type: "array",
|
|
|
|
default: "null",
|
|
|
|
description: "An array of objects to display."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "activeIndex",
|
|
|
|
type: "number",
|
|
|
|
default: "0",
|
|
|
|
description: "Index of the first item."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "fullscreen",
|
|
|
|
type: "boolean",
|
|
|
|
default: "false",
|
|
|
|
description: "Whether to display the component on fullscreen."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "visible",
|
|
|
|
type: "boolean",
|
|
|
|
default: "false",
|
|
|
|
description: "Specifies the visibility of the mask on fullscreen mode."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "numVisible",
|
|
|
|
type: "number",
|
|
|
|
default: "3",
|
|
|
|
description: "Number of items per page."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "responsiveOptions",
|
|
|
|
type: "any",
|
|
|
|
default: "null",
|
|
|
|
description: "An array of options for responsive design."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "showItemNavigators",
|
|
|
|
type: "boolean",
|
|
|
|
default: "false",
|
|
|
|
description: "Whether to display navigation buttons in item section."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "showThumbnailNavigators",
|
|
|
|
type: "boolean",
|
|
|
|
default: "true",
|
|
|
|
description: "Whether to display navigation buttons in thumbnail container."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "showItemNavigatorsOnHover",
|
|
|
|
type: "boolean",
|
|
|
|
default: "false",
|
|
|
|
description: "Whether to display navigation buttons on item hover."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "changeItemOnIndicatorHover",
|
|
|
|
type: "boolean",
|
|
|
|
default: "false",
|
|
|
|
description: "When enabled, item is changed on indicator hover."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "circular",
|
|
|
|
type: "boolean",
|
|
|
|
default: "false",
|
|
|
|
description: "Defines if scrolling would be infinite."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "autoPlay",
|
|
|
|
type: "boolean",
|
|
|
|
default: "false",
|
|
|
|
description: "Items are displayed with a slideshow in autoPlay mode."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "transitionInterval",
|
|
|
|
type: "number",
|
|
|
|
default: "4000",
|
|
|
|
description: "Time in milliseconds to scroll items."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "showThumbnails",
|
|
|
|
type: "boolean",
|
|
|
|
default: "true",
|
|
|
|
description: "Whether to display thumbnail container."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "thumbnailsPosition",
|
|
|
|
type: "string",
|
|
|
|
default: "bottom",
|
|
|
|
description: 'Position of thumbnails. Valid values are "bottom", "top", "left" and "right".'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "verticalThumbnailViewPortHeight",
|
|
|
|
type: "string",
|
|
|
|
default: "300px",
|
|
|
|
description: "Height of the viewport in vertical thumbnail."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "showIndicators",
|
|
|
|
type: "boolean",
|
|
|
|
default: "false",
|
|
|
|
description: "Whether to display indicator container."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "showIndicatorsOnItem",
|
|
|
|
type: "boolean",
|
|
|
|
default: "false",
|
|
|
|
description: "When enabled, indicator container is displayed on item container."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "indicatorsPosition",
|
|
|
|
type: "string",
|
|
|
|
default: "bottom",
|
|
|
|
description: 'Position of indicators. Valid values are "bottom", "top", "left" and "right".'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "baseZIndex",
|
|
|
|
type: "number",
|
|
|
|
default: "0",
|
|
|
|
description: "ase zIndex value to use in layering."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "maskClass",
|
|
|
|
type: "string",
|
|
|
|
default: "null",
|
|
|
|
description: "Style class of the mask on fullscreen mode."
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "containerStyle",
|
2022-03-02 11:28:46 +00:00
|
|
|
type: "any",
|
2021-05-12 09:35:29 +00:00
|
|
|
default: "null",
|
|
|
|
description: "Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used."
|
|
|
|
},
|
|
|
|
{
|
2022-03-02 11:28:46 +00:00
|
|
|
name: "containerClass",
|
|
|
|
type: "any",
|
2021-05-12 09:35:29 +00:00
|
|
|
default: "null",
|
|
|
|
description: "Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used."
|
|
|
|
}
|
|
|
|
];
|
|
|
|
|
|
|
|
const GalleriaSlots = [
|
|
|
|
{
|
|
|
|
name: "header",
|
|
|
|
description: "Custom content for the component's header"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "footer",
|
|
|
|
description: "Custom content for the component's header"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "item",
|
|
|
|
description: "Custom content for the item"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "caption",
|
|
|
|
description: "Custom caption content"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "thumbnail",
|
|
|
|
description: "Custom thumbnail content"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "indicator",
|
|
|
|
description: "Custom indicator content"
|
|
|
|
}
|
|
|
|
];
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
galleria: {
|
|
|
|
name: "Galleria",
|
|
|
|
description: "Galleria is an advanced content gallery component.",
|
|
|
|
props: GalleriaProps,
|
|
|
|
slots: GalleriaSlots
|
|
|
|
}
|
|
|
|
};
|