Skeleton: add skeleton component (#21038)

types/element-ui.d.ts

@@ -80,6 +80,8 @@ import { ElPageHeader } from './page-header'
 import { ElAvatar } from './avatar'
 import { ElDrawer } from './drawer'
 import { ElPopconfirm } from './popconfirm'
+import { ElSkeleton } from './skeleton'
+import { ElSkeletonItem } from './skeleton-item'
 
 export interface InstallationOptions {
   locale: any,
@@ -344,3 +346,9 @@ export class Drawer extends ElDrawer {}
 
 /** Popconfirm Component */
 export class Popconfirm extends ElPopconfirm {}
+
+/** Skeleton Component */
+export class Skeleton extends ElSkeleton {}
+
+/** Skeleton Item Component */
+export class SkeletonItem extends ElSkeletonItem {}

types/skeleton-item.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Skeleton Item Component */
+export declare class ElSkeletonItem extends ElementUIComponent {
+  /** The current rendering skeleton type; default: text */ 
+  variant: 'p' | 'text' |  'h1' | 'h3' |  'text' | 'caption' | 'button' | 'image' | 'circle' | 'rect'
+}

types/skeleton.d.ts

@@ -0,0 +1,33 @@
+import { ElementUIComponent } from './component'
+
+
+interface ElSkeletonSlots {
+  /* default slot:  Real rendering DOM */
+  default: VNode[];
+
+  /* template slot: Custom rendering skeleton template */
+  template: VNode[];
+
+  [key: string]: VNode[]
+}
+
+/** When loading data, and you need a rich experience for visual and interactions for your end users */
+export declare class ElSkeleton extends ElementUIComponent {
+  /** whether showing the animation; default: false */
+  animated: boolean
+
+  /** how many fake items to render to the DOM; default: 1 */
+  count: number
+
+  /** whether showing the skeleton; default true */
+  loading: boolean
+
+  /** numbers of the row, only useful when no template slot were given; default: 4 */
+  rows: boolean
+
+  /** Rendering delay in millseconds; default: 0 */
+  throttle: number
+
+  $slots: ElSkeletonSlots 
+
+}