Usage
Start by importing the necessary components from the package:
import {
Segment,
SegmentControl,
SegmentGroup,
SegmentGroupIndicator,
SegmentLabel,
} from '@ark-ui/react'Here are some examples of how to use the SegmentGroup component:
import { SegmentGroup } from '@ark-ui/react'
const Basic = () => {
const frameworks = ['React', 'Solid', 'Vue']
return (
<SegmentGroup.Root>
<SegmentGroup.Indicator />
{frameworks.map((framework) => (
<SegmentGroup.Item key={framework} value={framework}>
<SegmentGroup.ItemText>{framework}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
))}
</SegmentGroup.Root>
)
}
import { SegmentGroup } from '@ark-ui/solid'
import { For } from 'solid-js'
const Basic = () => {
const frameworks = ['React', 'Solid', 'Vue']
return (
<SegmentGroup.Root>
<SegmentGroup.Indicator />
<For each={frameworks}>
{(framework) => (
<SegmentGroup.Item value={framework}>
<SegmentGroup.ItemText>{framework}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
)}
</For>
</SegmentGroup.Root>
)
}
Story not availableInitial Value
To set a default segment on initial render, use the defaultValue prop:
Story not availableStory not availableStory not availableControlled SegmentGroup
To create a controlled SegmentGroup component, manage the current selected
segment using the value prop and update it when the onChange event handler
is called:
Story not availableimport { SegmentGroup } from '@ark-ui/solid'
import { For, createSignal } from 'solid-js'
const Controlled = () => {
const frameworks = ['React', 'Solid', 'Vue']
const [value, setValue] = createSignal('React')
return (
<SegmentGroup.Root value={value()} onValueChange={(e) => setValue(e.value)}>
<SegmentGroup.Indicator />
<For each={frameworks}>
{(framework) => (
<SegmentGroup.Item value={framework}>
<SegmentGroup.ItemText>{framework}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
)}
</For>
</SegmentGroup.Root>
)
}
Story not availableDisabled Segment
To disable a segment, simply pass the disabled prop to the Segment
component:
Story not availableimport { SegmentGroup } from '@ark-ui/solid'
import { For } from 'solid-js'
const Disabled = () => {
const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
return (
<SegmentGroup.Root>
<SegmentGroup.Indicator />
<For each={frameworks}>
{(framework) => (
<SegmentGroup.Item value={framework} disabled={framework === 'Svelte'}>
<SegmentGroup.ItemText>{framework}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
)}
</For>
</SegmentGroup.Root>
)
}
Story not availableConclusion
The SegmentGroup component provides a versatile and adaptable solution for introducing segmented navigation to your applications. With a broad variety of customization options and features, it can cater to various use cases and designs.