dap-design-system/dist/react/dap-ds-skeleton/index.d.ts

Official design system for the DÁP (dap.gov.hu)

import { default as Component } from '../../components/skeleton/skeleton.js';
/**
 * `dap-ds-skeleton`
 * @summary A skeleton loader component for displaying placeholder content while loading.
 * @element dap-ds-skeleton
 * @title - Skeleton
 *
 * @example Basic Usage
 * ```html
 * <dap-ds-skeleton></dap-ds-skeleton>
 * <dap-ds-skeleton variant="circular"></dap-ds-skeleton>
 * <dap-ds-skeleton variant="rectangular" width="200px" height="100px"></dap-ds-skeleton>
 * <dap-ds-skeleton animation="custom" custom-keyframes="0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }"></dap-ds-skeleton>
 * ```
 *
 * @csspart base - The main skeleton container.
 *
 * @cssprop --dds-skeleton-base-color - Solid background color always visible (default: rgb(0 0 0 / 11%)); shown as a static block when prefers-reduced-motion is active
 * @cssprop --dds-skeleton-color - The shimmer overlay gradient (default: linear-gradient(90deg, transparent, rgb(0 0 0 / 10%), transparent))
 * @cssprop --dds-skeleton-animation-duration - Duration of the loading animation (default: 1.5s)
 * @cssprop --dds-skeleton-border-radius - Border radius for rectangular skeletons (default: var(--dds-radius-small))
 * @cssprop --dds-skeleton-text-spacing - Spacing between text lines in text variant (default: var(--dds-spacing-100))
 * @cssprop --dds-skeleton-animation-timing-function - Timing function for the loading animation (default: ease-in-out)
 */
declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {}>;
export default reactWrapper;