ebay-skeleton

EbaySkeleton

Demo

Storybook

Import JS

import {
    EbaySkeleton,
    EbaySkeletonAvatar,
    EbaySkeletonButton,
    EbaySkeletonImage,
    EbaySkeletonText,
    EbaySkeletonTextbox,
} from "@ebay/ui-core-react/ebay-skeleton";

Import following styles from SKIN

import "@ebay/skin/skeleton";

Import styles using SCSS/CSS

import "@ebay/skin/skeleton.css";

Usage

<EbaySkeleton aria-label="Loading...">
    <EbaySkeletonImage style={{ width: "220px", height: "220px" }} />
    <EbaySkeletonText multiline />
</EbaySkeleton>

Attributes

EbaySkeleton

Name	Type	Required	Description
color	string	No	Color of the Skeleton, purple, green or blue

EbaySkeletonAvatar

Name	Type	Required	Description
as	string	No	Attribute to define the element to use div or span

EbaySkeletonButton

Name	Type	Required	Description
as	string	No	Attribute to define the element to use div or span
size	string	No	size of the button can be small or large

EbaySkeletonImage

Name	Type	Required	Description
as	string	No	Attribute to define the element to use div or span

EbaySkeletonText

Name	Type	Required	Description
as	string	No	Attribute to define the element to use div or span
multiline	boolean	No	Attribute to define the text as multiline
size	string	No	size of the text can be small or large

EbaySkeletonTextbox

Name	Type	Required	Description
as	string	No	Attribute to define the element to use div or span

Examples

Composite

<EbaySkeleton color={color} style={{ width: "300px" }}>
    <div>
        <EbaySkeletonAvatar as="span" />
        <EbaySkeletonText
            multiline={multiline}
            as="span"
            size={size}
            style={{ width: "220px", verticalAlign: "top" }}
        />
    </div>
    <EbaySkeletonButton size={size} />
</EbaySkeleton>

Tile

<EbaySkeleton color={color} style={{ width: "220px" }}>
    <EbaySkeletonImage style={{ width: "220px", height: "220px" }} />
    <EbaySkeletonText multiline={multiline} size={size} />
</EbaySkeleton>