Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Bottom Sheet

The bottom sheet is a slides from the bottom of the screen

banner-Bottom Sheet
Component Status Details

Status component contains a list of checks and completeness that has been tested and owned by each component

check-list-icon We don't use color as the only visual tool to convey information.
check-list-icon The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.check-list-icon The title is the component name that uses the frame base component template.check-list-icon The base component name contains: .Base & "Component Name" if there is more than one.check-list-icon All component properties use the Legion foundation.
check-list-icon We can change all the parts that are connected to the component base.check-list-icon The inside of the base component remains connected to the master component.check-list-icon All variant options are not damaged when we change from one to another.check-list-icon Overriding changes to components will not reset other variants.
check-list-icon Component's already has component specs documentation.

Status

Resources

Usage

The bottom sheet is a slides from the bottom of the screen Whereas a bottom navigation component is for buttons and specific application level actions, a bottom sheet can contain anything.

Use Legion button sheet styles to modify button sheet with lots of attributes that make you easier.

Usage Default LegionUI

struct ContentView: View {
  var body: some View {
    VStack {
      // screen content
    }.lgnBottomSheet(isShowing: .constant(true)) {
      // sheet content
    }
  }
}

Usage Theme

ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy

struct ContentView: View {
  var body: some View {
    VStack {
      // screen content
    }.lgnBottomSheet(isShowing: .constant(true)) {
      // sheet content
    }
  }
}

Variant

Legion Have 2 Variant of Buttom Sheet :

Use this Function : lgnBottomSheet and add dragable: false for Without Dragger

This code sample demonstrates how to modify the type of button sheet :

A. With Dragger

Default LegionUI

@State var isShowing: Bool = false
var body: some View {
    content()
        .BottomSheet(isShowing: $isShowing) {


        }
}

Theme (ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)

@State var isShowing: Bool = false
var body: some View {
    content()
        .lgnBottomSheet(isShowing: $isShowing) {


        }
}

B. Without Dragger

Default LegionUI

@State var isShowing: Bool = false
var body: some View {
    content()
        BottomSheet(isShowing: $isShowing,
                        dragable: false) {


        }
}

Theme (ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)

@State var isShowing: Bool = false
var body: some View {
    content()
        .lgnBottomSheet(isShowing: $isShowing,
                        dragable: false) {


        }
}

Attribute

Legion Have 2 Attributes for Customize Bottom Sheet :

Header

Title
Title & Icon
Title, Icon & Desc
Title, Icon, Desc & Close Button

This code sample demonstrates how to modify header :

A. Title

Default LegionUI

HeaderBottomSheet(title: "Title")

Theme (ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)

LGNHeaderBottomSheet(title: "Title")

B. Title & Icon

Default LegionUI

HeaderBottomSheet(
    icon: Image(systemName: "arrow.up.circle"),
    title: "Title"
)

Theme (ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)

LGNHeaderBottomSheet(
    icon: Image(systemName: "arrow.up.circle"),
    title: "Title"
)

C. Title, Icon & Desc

Default LegionUI

HeaderBottomSheet(
    icon: Image(systemName: "arrow.up.circle"),
    title: "Title",
    description: "description"
)

Theme (ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)

LGNHeaderBottomSheet(
    icon: Image(systemName: "arrow.up.circle"),
    title: "Title",
    description: "description"
)

D. Title, Icon, Desc & Close Button

Default LegionUI

HeaderBottomSheet(
    icon: Image(systemName: "arrow.up.circle"),
    title: "Title",
    showClose: true,
    description: "description"
)

Theme (ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)

LGNHeaderBottomSheet(
    icon: Image(systemName: "arrow.up.circle"),
    title: "Title",
    showClose: true,
    description: "description"
)

Button Position

This code sample demonstrates how to modify button position :

Vertical
Horizontal

Use this Function : LGNVButton for vertical & LGNHButton for horizontal

A. Vertical

Default LegionUI

VButton(
    firstTitleButton: "first button",
    secondTitleButton: "second button"
)

Theme (ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)

LGNVButton(
    firstTitleButton: "first button",
    secondTitleButton: "second button"
)

B. Horizontal

Default LegionUI

HButton(
    firstTitleButton: "yes",
    secondTitleButton: "no",
    thirdTitleButton: "ok"
)

Theme (ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)

LGNHButton(
    firstTitleButton: "yes",
    secondTitleButton: "no",
    thirdTitleButton: "ok"
)

Properties

PropertiesDescriptionDefault Value
firstTitleButtonshow LGNSolidBtn with title.nil
secondTitleButtonshow the LGNSoftBtn with title, and the button position is on the left firstButton.nil
thirdTitleButtonshow the LGNTransparentBtn with title, and the button position is on the left secondButton.nil
firstActionThe action to perform when the user triggers first button.{}
secondActionThe action to perform when the user triggers second button.{}
thirdActionThe action to perform when the user triggers third button.{}