Sectioncomponent
component
A component used to group other components together in a card-like UI. Usually, sections will be used inside a ScrollView.
Note
Section no longer has a border as of POS 10.0.0.
Anchor to sectionSection
Anchor to action
action
The action in the top right of the section that can be triggered by a tap.
Anchor to title
title
string
The title of the section.
Was this section helpful?
Anchor to sectionheaderactionSectionHeaderAction
Anchor to onPress
onPress
() => void
required
The callback when the action is tapped by the user.
Anchor to title
title
string
required
The title describing the action.
Was this section helpful?
Section
import React from 'react'
import { Text, Navigator, Screen, ScrollView, Stack, reactExtension, Section, useApi, Selectable } from '@shopify/ui-extensions-react/point-of-sale'
const ModalComponent = () => {
const api = useApi<'pos.home.modal.render'>();
return (
<Navigator>
<Screen title="Section" name="Section">
<ScrollView>
<Stack direction="vertical" paddingHorizontal="HalfPoint">
<Section title='Items' action={{title: "Show toast", onPress: () => api.toast.show('Hello world!')}}>
<Selectable onPress={() => api.toast.show('Item 1!')}>
<Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
<Text>Item 1</Text>
</Stack>
</Selectable>
<Selectable onPress={() => api.toast.show('Item 2!')}>
<Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
<Text>Item 2</Text>
</Stack>
</Selectable>
<Selectable onPress={() => api.toast.show('Item 3!')}>
<Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
<Text>Item 3</Text>
</Stack>
</Selectable>
<Selectable onPress={() => api.toast.show('Item 4!')}>
<Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
<Text>Item 4</Text>
</Stack>
</Selectable>
</Section>
</Stack>
</ScrollView>
</Screen>
</Navigator>
)
}
export default reactExtension('pos.home.modal.render', () => {
return <ModalComponent />
})
Preview
