wix-style-react
Version:
61 lines (60 loc) • 2.22 kB
JavaScript
export default {
description:
'A segmented toggle allows a user to toggle between multiple options. Only a single option can be selected at a time.',
do: [
'Use it to switch between alternative views of data.',
'Use it to switch the status of some content or an item.',
'Use it to toggle between the options of a property.',
],
dont: [
'Don’t use it to distribute content within a page. Use <Tabs/> instead.',
'Don’t use it to select multiple options at once. Use <ToggleButton/> instead.',
],
featureExamples: [
{
title: 'Structure',
description:
'The component is a wrapper for compound elements that represent selection items. It should be used with 2 to 5 selection options.',
example: '_structure',
},
{
title: 'Children',
description: `Control the option label type by passing relevant compound components as child items. It accepts 2 types:<br/>
 - \`<SegmentedToggle.Button/> \` - use it in all common cases.<br/>
 - \`<SegmentedToggle.Icon/>\` - use it in narrow layouts or when there’s enough context to make an option distinguishable only using icons.<br/>`,
example: '_children',
},
{
title: 'Prefix Icon',
description:
'Accompany `<SegmentedToggle.Button/>` option label with a prefix icon. Use it to make information easier to find and scan.',
example: '_prefixIcon',
},
{
title: 'Disabled',
description:
'Disable all interactions with `disabled` prop. Use it to highlight unavailable features.',
example: '_disabled',
},
],
commonUseCaseExamples: [
{
title: 'Controlled Mode',
description:
'The component value can be controlled manually using `selected` prop.',
example: '_controlledMode',
},
{
title: 'Switch between views',
description:
'Use the segmented toggle to switch between different content layouts.',
example: '_switchBetweenViews',
},
{
title: 'Status control',
description:
'Use the segmented toggle to control the status of content or an item.',
example: '_statusControl',
},
],
};