dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
66 lines (65 loc) • 2.97 kB
TypeScript
import { PropertyValueMap } from 'lit';
import { DdsElement } from '../../internal/dds-hu-element';
export type SkeletonVariant = 'text' | 'circular' | 'rectangular';
export type SkeletonAnimation = 'wave' | 'pulse' | 'custom';
/**
* `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)
*/
export default class DapDSSkeleton extends DdsElement {
static tagName: string;
/**
* The variant of the skeleton.
* @type {"text" | "circular" | "rectangular"}
*/
variant: SkeletonVariant;
/**
* The width of the skeleton. Can be any valid CSS width value.
*/
width?: string;
/**
* The height of the skeleton. Can be any valid CSS height value.
*/
height?: string;
/**
* Whether to animate the skeleton.
*/
noAnimation: boolean;
/**
* The animation type for the skeleton.
* @type {"wave" | "pulse" | "custom"}
*/
animation: SkeletonAnimation;
/**
* Custom keyframes for the animation when animation="custom".
* Should be a valid CSS keyframes string without the @keyframes wrapper.
* @example "0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }"
*/
customKeyframes?: string;
static readonly styles: import('lit').CSSResult;
private _userCustomStyles?;
private _generateKeyframesCSS;
private _updateMergedStyles;
protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
render(): import('lit-html').TemplateResult<1>;
}