Segment
@stellaria/nebula-webSegmentPropsPreview
Props
19| Prop | Type | Default |
|---|---|---|
auto Sizes the box to the active panel and springs to the next one. Ignored when `fill` is set. | boolean | — |
autoWidth Same on the horizontal axis: every panel takes its own width and the box springs to the active one, capped at the room it has. Panels without a width of their own collapse, so it does not suit text that is meant to wrap. | boolean | — |
children required | ReactNode | — |
className | string | — |
color | ColorExtended | "primary" |
defaultValue | string | "" |
disabled | boolean | false |
draggable | boolean | true |
fill Stretches the viewport and every panel to the height of the box. Takes precedence over `auto`. | boolean | — |
fullWidth | boolean | false |
lazy Mounts ONLY the active panel and unmounts the one it leaves. Turns a segment whose panels are whole screens from six live trees into one. It stacks the panels and fades between them instead of sliding, because with no neighbour mounted there is nothing to slide to. For the same reason it turns `swipeable` off. Returning to a panel mounts it again: the chunk is cached, so it costs render, not network. State that has to survive the trip lives above the panel. | boolean | — |
loop Wraps the swipe around, so the first panel follows the last one. Needs two panels or more. | boolean | — |
onChange | ((value: string) => void) | — |
overflowMode What the control does when its tabs do not fit. `scroll` slides the bar and keeps one row, `wrap` breaks it into rows and moves the indicator on both axes. Both turn the drag gesture off. Not named `overflow`: that one is a style prop and lands on the same element. | SegmentOverflowMode | "visible" |
padded | boolean | false |
size | SegmentSize | "md" |
swipeable The drag gesture across the panels. It governs the gesture only: the slide stays either way. | boolean | — |
value | string | — |
variant | SegmentVariant | — |
Parts
1Segment.ItemAlso accepts
On top of its own props, this component forwards these groups.