mithril-materialized
Version:
A materialize library for mithril.
71 lines (70 loc) • 2.45 kB
TypeScript
import { FactoryComponent, Attributes } from 'mithril';
export interface ImageListActionButton {
/** Material icon name for the action button */
icon: string;
/** Click handler for the action button */
onclick: (item: ImageListItemAttrs, event: Event) => void;
/** Accessibility label for the button */
ariaLabel?: string;
/** Button position */
position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
}
export interface ImageListItemAttrs {
/** Image source URL */
src: string;
/** Alternative text for accessibility */
alt?: string;
/** Title text (appears in tooltip and overlay) */
title?: string;
/** Subtitle text for overlay */
subtitle?: string;
/** Number of columns this item should span */
cols?: number;
/** Number of rows this item should span */
rows?: number;
/** Whether this is a featured/highlighted item */
featured?: boolean;
/** Click handler for the image item */
onclick?: (item: ImageListItemAttrs, event: Event) => void;
/** Action button configuration */
actionButton?: ImageListActionButton;
/** Custom CSS class for the item */
className?: string;
/** Loading state for the image */
loading?: 'lazy' | 'eager';
/** Custom aspect ratio (width/height) */
aspectRatio?: number;
}
export interface ImageListBreakpoints {
xs?: number;
sm?: number;
md?: number;
lg?: number;
xl?: number;
}
export interface ImageListAttrs extends Attributes {
/** Array of image items to display */
items: ImageListItemAttrs[];
/** Layout variant */
variant?: 'standard' | 'quilted' | 'masonry' | 'woven';
/** Number of columns or responsive configuration */
cols?: number | ImageListBreakpoints;
/** Gap between items */
gap?: number | string;
/** Row height (auto for dynamic height) */
rowHeight?: number | 'auto';
/** Custom CSS class for the container */
className?: string;
/** Loading behavior for images */
loading?: 'lazy' | 'eager';
/** Whether to show image titles as overlay */
showTitles?: boolean;
/** Whether to show action buttons */
showActions?: boolean;
}
/**
* ImageList Component
* Displays a collection of images in various grid layouts
* Supports standard grid, quilted (varied sizes), masonry, and woven patterns
*/
export declare const ImageList: FactoryComponent<ImageListAttrs>;