Skeleton
SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page.
Optionally you can use any text content inside to be used as a base for the rendered skeleton
Anchor to skeletontextblockpropsSkeletonTextBlockProps
- Anchor to lineslinesnumberDefault: 1
Number of lines to display when no children are passed.
- Anchor to sizesize
Size of the text the skeleton replaces.
- string
A unique identifier for the component.
SkeletonTextBlockProps
- emphasis
"bold" - lines
Number of lines to display when no children are passed.
number - size
Size of the text the skeleton replaces.
TextSize - id
A unique identifier for the component.
string
export interface SkeletonTextBlockProps extends IdProps {
/**
* @private
* Use to emphasize a word or a group of words.
*/
emphasis?: 'bold';
/**
* Number of lines to display when no children are passed.
*
* @defaultValue 1
*/
lines?: number;
/**
* Size of the text the skeleton replaces.
*/
size?: TextSize;
}TextSize
Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium'Size
'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'Was this section helpful?
Basic SkeletonTextBlock
import {
reactExtension,
SkeletonTextBlock,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
return <SkeletonTextBlock />;
}
examples
Basic SkeletonTextBlock
React
import { reactExtension, SkeletonTextBlock, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { return <SkeletonTextBlock />; }JS
import {extension, SkeletonTextBlock} from '@shopify/ui-extensions/checkout'; export default extension('purchase.checkout.block.render', (root) => { const skeletonTextBlock = root.createComponent(SkeletonTextBlock); root.appendChild(skeletonTextBlock); });
Preview
