Skip to content
Inputs & Forms

Segment

client44.75 kB
@stellaria/nebula-webSegmentProps

Preview

Props

19
PropTypeDefault

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

booleanfalse

draggable

booleantrue

fill

Stretches the viewport and every panel to the height of the box. Takes precedence over `auto`.

boolean

—

fullWidth

booleanfalse

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

booleanfalse

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

1
Segment.Item

Also accepts

On top of its own props, this component forwards these groups.

Style props · 127