Moon liveview storybook Moon Liveview Storybook

Segmented Control

Website
Moon Design System Website
HEX
View package HEX
GitHub
View repository GitHub
Attribute Type Documentation Default Value
Required id * :string

Id of the segmented control
initial_segment :integer

Index of the initially selected segment
0
class :string

Additional classes for the segmented control wrapper
""
size :string

Size of the segments, can be ‘sm’ or ‘md’
"md"
rest :global

Additional attributes for the segments wrapper
inner_block :slot

Default slot, to be used to enable more extensive customization
segment :slot

List of segments that can be used directly within the segment wrapper
Show slot attributes Hide slot attributes
disabled :boolean

Segment is disabled, if true
rest :map

Additional attributes for the segment
class :string

CSS classes for the segment

 
<.segments_list {segments}>
  <:segment>Segment 1</:segment>
  <:segment disabled><.icon name="star"/> Segment 2</:segment>
  <:segment>Segment 3 <.icon name="star"/> </:segment>
</.segments_list>