Modal (Bottom)

A component that displays content in a popup dialog anchored to the bottom of the screen.

Preview

Button Preview

Code Example

let model = BottomModalVM {
  $0.hidesOnSwipe = true
  $0.isDraggable = true
  $0.overlayStyle = .blurred
  $0.transition = .fast
  $0.backgroundColor = .accentBackground
}

API

BottomModalVM Props

A model that defines the appearance properties for a bottom modal component.

NameTypeDefaultDescription
backgroundColorUniversalColor?nilThe background color of the modal.
borderWidthBorderWidthsmallThe border thickness of the modal.
closesOnOverlayTapBooltrueIndicates whether the modal should close when tapping on the overlay.
contentPaddingsPaddingspadding: 16The padding applied to the modal's content area.
contentSpacingCGFloat16The spacing between header, body, and footer.
cornerRadiusContainerRadiusmediumThe corner radius of the modal.
hidesOnSwipeBooltrueIndicates whether the modal should hide when swiped down.
isDraggableBooltrueIndicates whether the modal can be dragged vertically.
overlayStyleModalOverlayStyledimmedThe style of the overlay displayed behind the modal.
outerPaddingsPaddingspadding: 20The padding outside the modal content, creating space from screen edges.
sizeModalSizemediumThe predefined maximum size of the modal.
transitionModalTransitionfastThe transition duration of modal's animations.

SUBottomModal

  • A SwiftUI view modifier that presents a bottom-aligned modal.
public func bottomModal<Header: View, Body: View, Footer: View>(
  isPresented: Binding<Bool>,
  model: BottomModalVM = .init(),
  onDismiss: (() -> Void)? = nil,
  @ViewBuilder header: @escaping () -> Header = { EmptyView() },
  @ViewBuilder body: @escaping () -> Body,
  @ViewBuilder footer: @escaping () -> Footer = { EmptyView() }
) -> some View
  • A SwiftUI view modifier that presents a bottom-aligned modal bound to an optional identifiable item.
public func bottomModal<Item: Identifiable, Header: View, Body: View, Footer: View>(
  item: Binding<Item?>,
  model: @escaping (Item) -> BottomModalVM = { _ in .init() },
  onDismiss: (() -> Void)? = nil,
  @ViewBuilder header: @escaping (Item) -> Header,
  @ViewBuilder body: @escaping (Item) -> Body,
  @ViewBuilder footer: @escaping (Item) -> Footer
) -> some View
  • A SwiftUI view modifier that presents a bottom-aligned modal bound to an optional identifiable item.
public func bottomModal<Item: Identifiable, Body: View>(
  item: Binding<Item?>,
  model: @escaping (Item) -> BottomModalVM = { _ in .init() },
  onDismiss: (() -> Void)? = nil,
  @ViewBuilder body: @escaping (Item) -> Body
) -> some View

UKBottomModalController

Initializers

public init(
  model: BottomModalVM = .init(),
  header: Content? = nil,
  body: Content,
  footer: Content? = nil
)

Public Properties

NameTypeDescription
modelBottomVMA model that defines the appearance properties.

Public Subviews

NameTypeDescription
headerUIView?The optional header view of the modal.
bodyViewThe main body view of the modal.
footerUIView?The optional footer view of the modal.
contentViewUIViewThe content view, holding the header, body, and footer.
bodyWrapperUIScrollViewA scrollable wrapper for the body content.
overlayUIViewThe overlay view that appears behind the modal.