Divider
A divider separates content and represents a thematic break between elements.
Anchor to dividerpropsDividerProps
- Anchor to alignmentalignmentDefault: 'center'
Use to specify alignment of contents of divider.
- Anchor to directiondirectionDefault: 'inline'
Use to specify direction of divider.
- string
A unique identifier for the component.
- Anchor to sizesizeExtract<, 'small' | 'base' | 'large' | 'extraLarge'>Default: 'small'
Use to create dividers with varying widths.
DividerProps
- alignment
Use to specify alignment of contents of divider.
Alignment - direction
Use to specify direction of divider.
Direction - id
A unique identifier for the component.
string - size
Use to create dividers with varying widths.
Extract<Size, 'small' | 'base' | 'large' | 'extraLarge'>
export interface DividerProps extends IdProps {
/**
* Use to create dividers with varying widths.
*
* @defaultValue 'small'
*/
size?: Extract<Size, 'small' | 'base' | 'large' | 'extraLarge'>;
/**
* Use to specify direction of divider.
*
* @defaultValue 'inline'
*/
direction?: Direction;
/**
* Use to specify alignment of contents of divider.
*
* @defaultValue 'center'
*/
alignment?: Alignment;
}Alignment
'start' | 'center' | 'end'Direction
'inline' | 'block'Size
'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'Was this section helpful?
Basic Divider
import {
reactExtension,
Divider,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
return <Divider />;
}
examples
Basic Divider
React
import { reactExtension, Divider, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { return <Divider />; }JS
import {extension, Divider} from '@shopify/ui-extensions/checkout'; export default extension('purchase.checkout.block.render', (root) => { const divider = root.createComponent(Divider); root.appendChild(divider); });
Preview
