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 {render, SkeletonTextBlock} from '@shopify/checkout-ui-extensions-react';
render('Checkout::Dynamic::Render', () => <Extension />);
function Extension() {
return <SkeletonTextBlock />;
}
examples
Basic SkeletonTextBlock
React
import {render, SkeletonTextBlock} from '@shopify/checkout-ui-extensions-react'; render('Checkout::Dynamic::Render', () => <Extension />); function Extension() { return <SkeletonTextBlock />; }JS
import {extend, SkeletonTextBlock} from '@shopify/checkout-ui-extensions'; extend('Checkout::Dynamic::Render', (root) => { const skeletonTextBlock = root.createComponent(SkeletonTextBlock); root.appendChild(skeletonTextBlock); });
Preview
