tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
67 lines (66 loc) • 3.2 kB
TypeScript
import React from "react";
/**
* `ListTile` is a flexible row component for lists, supporting leading/trailing icons, title, subtitle, theming, and custom styles.
*
* @param {object} props - The properties to customize the `ListTile` component.
* @param {React.ReactNode} [props.leading] - Leading icon or element.
* @param {string} props.title - Main text (required).
* @param {string} [props.subtitle] - Optional subtitle text.
* @param {React.ReactNode} [props.trailing] - Trailing icon or element.
* @param {() => void} [props.onClick] - Click handler for the tile.
* @param {React.CSSProperties} [props.styles] - Custom styles for the tile container.
* @param {string} [props.className] - Additional className for the tile.
* @param {number} [props.cornerRadius] - Border radius for the tile. Overrides theme.cornerRadius if provided.
* @param {string} [props.hoverColor] - Background color on hover. Defaults to theme.secondaryColor.
* @param {string} [props.backgroundColor] - Background color for the tile.
* @param {string} [props.borderColor] - Border color for the tile.
* @param {string} [props.borderWidth] - Border width for the tile.
* @param {string} [props.borderStyle] - Border style for the tile.
* @param {string} [props.fontFamily] - Font family for the tile.
* @param {number} [props.fontSize] - Font size for the tile.
* @param {string} [props.fontWeight] - Font weight for the tile.
* @param {string} [props.transitionDuration] - Transition duration for the tile.
* @param {number} [props.spacingfactor] - Spacing factor for the tile.
*
* @returns {JSX.Element} A styled list tile component.
*/
export interface ListTileProps {
/** Leading icon or element */
leading?: React.ReactNode;
/** Main text */
title: string;
/** Optional subtitle */
subtitle?: string;
/** Trailing icon or element */
trailing?: React.ReactNode;
/** Click handler */
onClick?: () => void;
/** Custom styles */
styles?: React.CSSProperties;
/** Additional className */
className?: string;
/** Border radius for the tile. Overrides theme.cornerRadius if provided. */
cornerRadius?: number;
/** Background color on hover. Defaults to theme.secondaryColor. */
hoverColor?: string;
/** Background color for the tile. */
backgroundColor?: string;
/** Border color for the tile. */
borderColor?: string;
/** Border width for the tile. */
borderWidth?: string;
/** Border style for the tile. */
borderStyle?: string;
/** Font family for the tile. */
fontFamily?: string;
/** Font size for the tile. */
fontSize?: number;
/** Font weight for the tile. */
fontWeight?: string;
/** Transition duration for the tile. */
transitionDuration?: string;
/** Spacing factor for the tile. */
spacingfactor?: number;
}
declare const ListTile: ({ leading, title, subtitle, trailing, onClick, styles, className, cornerRadius, hoverColor, backgroundColor, borderColor, borderWidth, borderStyle, fontFamily, fontSize, fontWeight, transitionDuration, spacingfactor, }: ListTileProps) => import("react/jsx-runtime").JSX.Element;
export default ListTile;