Segmented
component
The segmented control lets the merchant easily switch between different lists or views on the same page.
Anchor to segmentedcontrolSegmentedControl
- Anchor to onSelectonSelect(id: string) => voidrequired
A callback when a segment is selected.
- Anchor to segmentssegments[]required
The segments to display.
- Anchor to selectedselectedstringrequired
The id of the selected segment.
SegmentedControlProps
- onSelect
A callback when a segment is selected.
(id: string) => void - segments
The segments to display.
Segment[] - selected
The id of the selected segment.
string
export interface SegmentedControlProps {
/**
* The segments to display.
*/
segments: Segment[];
/**
* The id of the selected segment.
*/
selected: string;
/**
* A callback when a segment is selected.
*/
onSelect: (id: string) => void;
}Segment
- disabled
Whether the segment is disabled.
boolean - id
The id of the segment.
string - label
The label of the segment.
string
export interface Segment {
/**
* The id of the segment.
*/
id: string;
/**
* The label of the segment.
*/
label: string;
/**
* Whether the segment is disabled.
*/
disabled: boolean;
}Was this section helpful?
SegmentedControl
import React from 'react';
import {
reactExtension,
Screen,
SegmentedControl,
Stack,
} from '@shopify/ui-extensions-react/point-of-sale';
export const SmartGridModal = () => {
const [selected, setSelected] =
React.useState('1');
return (
<Screen
name="SegmentedControl"
title="SegmentedControl"
>
<Stack
direction="vertical"
paddingHorizontal="ExtraExtraLarge"
>
<SegmentedControl
segments={[
{
id: '1',
label: '1',
disabled: false,
},
{
id: '2',
label: '2',
disabled: false,
},
{
id: '3',
label: '3 (disabled)',
disabled: true,
},
]}
selected={selected}
onSelect={setSelected}
/>
</Stack>
</Screen>
);
};
export default reactExtension(
'pos.home.modal.render',
() => {
return <SmartGridModal />;
},
);
examples
SegmentedControl
React
import React from 'react'; import { reactExtension, Screen, SegmentedControl, Stack, } from '@shopify/ui-extensions-react/point-of-sale'; export const SmartGridModal = () => { const [selected, setSelected] = React.useState('1'); return ( <Screen name="SegmentedControl" title="SegmentedControl" > <Stack direction="vertical" paddingHorizontal="ExtraExtraLarge" > <SegmentedControl segments={[ { id: '1', label: '1', disabled: false, }, { id: '2', label: '2', disabled: false, }, { id: '3', label: '3 (disabled)', disabled: true, }, ]} selected={selected} onSelect={setSelected} /> </Stack> </Screen> ); }; export default reactExtension( 'pos.home.modal.render', () => { return <SmartGridModal />; }, );TS
import { extension, Screen, ScrollView, SegmentedControl, } from '@shopify/ui-extensions/point-of-sale'; export default extension( 'pos.home.modal.render', (root) => { const mainScreen = root.createComponent( Screen, { name: 'SegmentedControl', title: 'SegmentedControl', }, ); const scrollView = root.createComponent(ScrollView); const onSelect = (id: string) => { segmentedControl.updateProps({ selected: id, }); }; const segmentedControl = root.createComponent( SegmentedControl, { onSelect, selected: '1', segments: [ {id: '1', label: '1', disabled: false}, {id: '2', label: '2', disabled: false}, { id: '3', label: '3 (disabled)', disabled: true, }, ], }, ); scrollView.append(segmentedControl); mainScreen.append(scrollView); root.append(mainScreen); }, );
Preview
