Skeleton

Cú pháp

<zmp-skeleton-block> <zmp-skeleton-text> <zmp-skeleton-image> <zmp-skeleton-avatar>

Properties

SkeletonBlock Properties

SkeletonBlock sử dụng để tạo placeholder cho phần block. Có các thuộc tính sau:

Prop	Type	Default	Description
tag	string	'div'	HTML element tag
width	string		Chiều rộng của block
height	string		Chiều cao của block
border-radius	string		Giá trị thuộc tính border-radius css
effect	string		Hiệu ứng loading: 'fade', 'pulse' hoặc 'wave'

SkeletonText Properties

SkeletonText sử dụng để tạo placeholder cho phần văn bản. Có các thuộc tính sau:

Prop	Type	Default	Description
tag	string	'span'	HTML element tag
effect	string		Hiệu ứng loading: 'fade', 'pulse' hoặc 'wave'

SkeletonImage properties

SkeletonImage component được sử dụng làm placeholder cho hình ảnh. Có các thuộc tính sau:

Prop	Type	Default	Description
tag	string	'span'	HTML element tag
width	number		Chiều rộng của skeleton image (SVG) theo px
height	number		Chiều cao của skeleton image (SVG) theo px
color	string		Màu sắc skeleton image
show-icon	boolean	true	Hiện/ Ẩn icon hình ảnh
icon-color	string		Màu sắc icon
border-radius	string		Giá trị thuộc tính border-radius
effect	string		Hiệu ứng loading: 'fade', 'pulse' hoặc 'wave'

SkeletonAvatar properties

SkeletonAvatar component được sử dụng làm placeholder cho avatar. Có các thuộc tính sau:

Prop	Type	Default	Description
tag	string	'span'	HTML element tag
size	number		Kích thước skeleton avatar (SVG) theo px
color	string		Màu sắc skeleton avatar
show-icon	boolean	true	Hiện/ Ẩn icon
icon-color	string		Màu sắc icon
border-radius	string		Giá trị thuộc tính border-radius
effect	string		Hiệu ứng loading: 'fade', 'pulse' hoặc 'wave'

Ví dụ

Code demo fallback when rendering server side!