@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
36 lines (35 loc) • 1.31 kB
TypeScript
import { KendoComponent } from '../_types/component';
export declare const SKELETON_CLASSNAME = "k-skeleton";
declare const SKELETON_VARIANTS: readonly ["circle", "text", "rect"];
export type KendoSkeletonOptions = {
variant?: (typeof SKELETON_VARIANTS)[number] | null;
};
export type KendoSkeletonProps = KendoSkeletonOptions & {
/**
* @deprecated Use `variant` instead
*/
shape?: 'circle' | 'text' | 'rect';
animation?: false | 'wave' | 'pulse';
style?: React.CSSProperties;
};
/**
* Skeleton component - displays placeholder loading indicators.
*
* @accessibility
* - The Skeleton itself does not have ARIA attributes as it is a purely visual indicator
* - Accessibility must be handled by the parent/container element:
* - Use `aria-busy="true"` on the focusable element that is loading
* - Use `role="alert"` with live region to announce loading state changes
*
* @example
* ```tsx
* // Parent container handles accessibility
* <div aria-busy="true" aria-label="Loading content">
* <Skeleton variant="text" />
* </div>
* ```
*
* @wcag 4.1.3 Status Messages - loading states should be announced to assistive technology
*/
export declare const Skeleton: KendoComponent<KendoSkeletonProps & React.HTMLAttributes<HTMLSpanElement>>;
export default Skeleton;