Segmented Control

A component that allows users to choose between multiple segments or options.

Preview

Button Preview

Code Example

enum Item {
  case iPhone
  case iPad
  case mac
}

let model = SegmentedControlVM<Item> {
  $0.items = [
    .init(id: .iPhone) {
      $0.title = "iPhone"
    },
    .init(id: .iPad) {
      $0.title = "iPad"
    },
    .init(id: .mac) {
      $0.title = "Mackbook"
      $0.isEnabled = false
    }
  ]
  $0.isFullWidth = true
  $0.cornerRadius = .full
}

API

SegmentedControlVM Props

A model that defines the appearance properties for a segmented control component.

NameTypeDefaultDescription
colorComponentColor?nilThe color of the segmented control.
cornerRadiusComponentRadiusmediumThe corner radius of the segmented control.
fontUniversalFont?nilThe font used for the segmented control items' titles.
isEnabledBooltrueA Boolean value indicating whether the segmented control is enabled.
isFullWidthBoolfalseA Boolean value indicating whether the segmented control should take full width of its parent view.
items[SegmentedControlItemVM<ID>][]The array of items in the segmented control. Must contain at least one item with unique identifiers.
sizeComponentSizemediumThe predefined size of the segmented control.

SegmentedControlItemVM Props

A model that defines the data and appearance properties for an item in a segmented control.

NameTypeDefaultDescription
idID—The unique identifier for the segmented control item.
titleString""The text displayed for the segmented control item.
fontUniversalFont?nilThe font used for the item's title.
isEnabledBooltrueA Boolean value indicating whether the item is enabled or disabled.

SUSegmentedControl

public init(
  selectedId: Binding<ID?>,
  model: SegmentedControlVM<ID>
)

UKSegmentedControl

Initializers

public init(
  selectedId: ID,
  model: SegmentedControlVM<ID>,
  onSelectionChange: @escaping (ID) -> Void = { _ in }
)

Public Properties

NameTypeDescription
onSelectionChange(ID) -> VoidA closure that is triggered when a selected segment changes.
modelSegmentedControlVMA model that defines the appearance properties.
selectedIdID?An identifier of the selected segment.

Public Subviews

NameTypeDescription
containerUIViewA view that contains all segments.
segments[UKSegmentedControl.Segment]An array of views that represent segments.
selectedSegmentUIViewA view that highlights a selected segment.