Skip to content

3. Custom Style

Andrea Miotto edited this page Mar 2, 2022 · 8 revisions

Custom Style

The PartialSheet allows very deep customisations. As you can see the partialSheet method used to call the sheet has several parameters:

func partialSheet<Content: View>(isPresented: Binding<Bool>,
                                     type: PSType = PSType.dynamic,
                                     iPhoneStyle: PSIphoneStyle = .defaultStyle(),
                                     iPadMacStyle: PSIpadMacStyle = .defaultStyle(),
                                     slideAnimation: PSSlideAnimation? = nil,
                                     @ViewBuilder content: @escaping () -> Content) -> some View

PartialSheet Type

The PSType allows you to choose between two different types:

  • dynamic
  • scrollView
public enum PSType {
    case `dynamic`
    case scrollView(height: CGFloat, showsIndicators: Bool)
}

Dynamic type

The sheet will be resized according to the frame's height of its content. If you run the Base Example you can easily see how he adapts on a frame's change.

ScrollView type

The sheet will be scrollable thanks to its own PSScrollVIew. This type requires you to specify the height of the scrollView container, and if you want to show the vertical scroll indicators.

iPhone Style

This struct will define the style of the sheet on iPhones. This is the initialiser:

    public init(background: PSIphoneBackground, // The background of the Sheet
                handleBarStyle: PSHandleBarStyle, // The style of the handlebar
                cover: PSCoverStyle, // The cover style
                cornerRadius: CGFloat // The corner radius of the sheet
    )

PSIphoneBackground

public enum PSIphoneBackground {
        case solid(Color) // Solid color for the background
        case blur(Material) // A material blur effect for the background
    }

PSHandleBarStyle

public enum PSHandleBarStyle {
        case solid(Color) // Solid color for the handlebar
        case none // None, in case you don't want the handlebar
    }

PSCoverStyle

 public enum PSCoverStyle {
        case enabled(Color) // Enable the cover layer between the sheet and its parent view, with a solid color.
        case disabled // Don't display any cover
    }

iPad and Mac Style

This struct will define the style of the sheet on iPad and Mac. This is the initialiser:

    public init(backgroundColor: Color, // The background color of the Sheet
                closeButtonStyle: PSIpadMacCloseButtonStyle // The style of close button
    )

PSIpadMacCloseButtonStyle

 public enum PSIpadMacCloseButtonStyle {
        case icon(image: Image, color: Color) // Enable the code icon with your image and a specific color
        case none // Hide the close button
    }

Slide Animations

You can specify custom animation for the slide in and the slide out. This is the initialiser for PSSlideAnimation

public init(slideIn: Animation? = nil, slideOut: Animation? = nil)

If you leave the animation to nil the default one will be used. At the moment the default one is:

private(set) var defaultSlideAnimation: Animation = {
        .interpolatingSpring(stiffness: 300.0, damping: 30.0, initialVelocity: 10.0)
    }()