UNPKG

@syncfusion/react-popups

Version:

A package of Pure React popup components such as Tooltip that is used to display information or messages in separate pop-ups.

103 lines (102 loc) 2.79 kB
import * as React from 'react'; /** * Defines the available design systems for spinner appearance. * Each option represents a different visual style based on popular UI frameworks. */ export declare enum SpinnerType { /** * Material Design 3 spinner style with circular animation following * Google's Material Design guidelines. */ Material3 = "Material3", /** * Bootstrap 5 spinner style following the Bootstrap framework's * visual design patterns. */ Bootstrap5 = "Bootstrap5", /** * Fluent Design 2 spinner style following Microsoft's Fluent design * system guidelines. */ Fluent2 = "Fluent2", /** * Tailwind CSS 3 spinner style following the Tailwind design * aesthetic and principles. */ Tailwind3 = "Tailwind3" } /** * Interface for the Spinner component props * * @public */ export interface SpinnerProps { /** * Defines the type/style of the Spinner * * @default SpinnerType.Material3 */ type?: SpinnerType; /** * Text to be displayed below the Spinner * * @default - */ label?: string; /** * Width of the Spinner in pixels or as string with units * * @default Based on the type selected (DEFT_WIDTHS mapping) */ width?: string | number; /** * Controls the visibility state of the component. * * When true, the component will be rendered and displayed. * When false, the component will be hidden but may remain in the DOM based on implementation. * If not specified, the component will follow its default visibility behavior. * * @default false */ visible?: boolean; /** * Custom HTML template for the Spinner * * @default - */ template?: string; /** * Target element where the Spinner should be rendered * * @default - */ target?: HTMLElement | string; } /** * Interface for Spinner component with additional method. */ export interface ISpinner extends SpinnerProps { /** * This is spinner component element. * * @private * @default null */ element?: HTMLElement | null; } type ISpinnerProps = SpinnerProps & Omit<React.InputHTMLAttributes<HTMLDivElement>, keyof SpinnerProps>; /** * A versatile Spinner component that provides visual feedback for loading states. * * The Spinner supports multiple design systems through the SpinnerType enum * and can be customized with various properties for size, color, and behavior. * * ```typescript * <Spinner * type={SpinnerType.Material3} * visible={true} * /> * ``` */ export declare const Spinner: React.ForwardRefExoticComponent<ISpinnerProps & React.RefAttributes<ISpinner>>; export default Spinner;