maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
86 lines (85 loc) • 2.69 kB
TypeScript
export type MazGalleryImage = {
thumbnail?: string;
src: string;
alt?: string;
} | string;
export interface MazGalleryProps {
/**
* Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`
*/
images?: MazGalleryImage[];
/**
* Images count shown (max: 5)
* @type number
* @default 5
*/
displayedCount?: number;
/**
* Remove transparent layer with the remain count (ex: +2)
* @type boolean
* @default true
*/
remaining?: boolean;
/**
* Height of gallery - set to `false` to remove default height
* @type number | string | false
* @default 150
*/
height?: number | string | false;
/**
* Width of gallery - set to `false` to remove default width
* @type number | string | false
* @default '100%'
*/
width?: number | string | false;
/**
* Disable the border radius of the gallery
* @type boolean
* @default false
*/
radius?: boolean;
/**
* Disable full size display when clicking on image
* @type boolean
* @default false
*/
zoom?: boolean;
/**
* Layer with photography icon when no images is provided
* @type boolean
* @default true
*/
hasEmptyLayer?: boolean;
/**
* Lazy load image - if false, images are directly loaded
* @type boolean
* @default true
*/
lazy?: boolean;
/**
* Disable blur effect on image hover
* @type boolean
* @default true
*/
blur?: boolean;
/**
* Disable scale animation effect on image hover
* @type boolean
* @default true
*/
scale?: boolean;
/**
* Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `hsl(var(--maz-background-300))`
* @type string
* @default 'transparent'
*/
separatorColor?: string;
/**
* Choose background color of the gallery - Should be a CSS color or CSS variable - Ex: `#000` or `hsl(var(--maz-background-300))`
* @type string
* @default 'hsl(var(--maz-background-300))'
*/
backgroundColor?: string;
}
declare const _default: import('vue').DefineComponent<MazGalleryProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MazGalleryProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
export default _default;