Expandable - Frameworks

Expandable is a layout component used for creating content that can be expanded and collapsed.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

iOS

AndroidElementsiOSReactVue

Syntax

// If you need a `Expandable` with a custom view use this
Warp.Expandable(
        style: Warp.ExpandableStyle,
        title: String,
        @ViewBuilder expandableView: () -> Content,
        isAnimated: Bool = true,
        isExpanded: Bool = false
)

// If you need a `Expandable` with a simple String use this instead
Warp.Expandable(
        style: Warp.ExpandableStyle,
        title: String,
        subtitle: String,
        isAnimated: Bool = true,
        isExpanded: Bool = false
)

Warp.Expandable(
        style: .box,
        title: "Title",
        subtitle: "SubTitle"
)

Visual options

enum Warp.ExpandableStyle {
    /// Basic expandable component with clear background.
    case `default`
    /// Expandable component with a boxed layout. Round corners
    case box
    /// Expandable component with a boxed layout. Square corners
    case boxBleed
}

Legacy support

By default all Warp components return a SwiftUI View but there is always a UIKit UIView available to use also.

Warp.Expandable(
        style: .box,
        title: "Title",
        subtitle: "SubTitle"
).uiView

Parameters

Required props

Name	Type	Default	Description
style	Warp.ExpandableStyle		The style of the Expandable. Use one of the predefined ExpandableStyle values: .default, .box, or .boxBleed
title	String		The title for the top sticky part of the Expandable

Optional Props

Name	Type	Default	Description
expandableView	View		The view for the bottom hidden part of the Expandable. Either this or subtitle needs to be provided.
subtitle	String		The subtitle for the bottom hidden part of the Expandable. Either this or expandableView needs to be provided.
isAnimated	Bool	true	Determines if the Expandable will expand and collapse with animation
isExpanded	Bool	false	Controls the state of the Expandable

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system