Skip to main content

Box
component

A box component is a container that can be used to group and display content in a consistent manner.

Default: 'auto'

Adjust the block size.

Auto takes the block size of the box's children.

Default: 'auto'

Adjust the inline size.

Auto takes the inline size of the box's children.

Default: 'none'

Adjust the maximum block size.

Default: 'none'

Adjust the maximum inline size.

Default: '0'

Adjust the minimum block size.

Default: '0'

Adjust the minimum inline size.

Default: '0'

Adjust the padding of all edges in pixels.

Default: '0'

Adjust the block-padding.

This overrides the block value of padding.

Default: '0'

Adjust the block-end padding.

This overrides the block-end value of paddingBlock.

Default: '0'

Adjust the block-start padding.

This overrides the block-start value of paddingBlock.

Default: '0'

Adjust the inline padding.

This overrides the inline value of padding.

Default: '0'

Adjust the inline-end padding.

This overrides the inline-end value of paddingInline.

Default: '0'

Adjust the inline-start padding.

This overrides the inline-start value of paddingInline.

Was this section helpful?

Box

import React from 'react';

import {
Box,
Image,
Navigator,
Screen,
ScrollView,
reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const ImageModal = () => {
return (
<Navigator>
<Screen name="ImageBox" title="ImageBox">
<ScrollView>
<Box
blockSize="100px"
inlineSize="100px"
paddingInlineStart="100"
paddingInlineEnd="100"
paddingBlockEnd="100"
paddingBlockStart="100"
>
<Image
src="example.png"
size="contain"
/>
</Box>
</ScrollView>
</Screen>
</Navigator>
);
};

export default reactExtension(
'pos.home.modal.render',
() => <ImageModal />,
);

Preview