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
firstActionThe action to perform when the user triggers first button.{}
firstTitleButtonshow LGNSolidBtn with title.nil
secondActionThe action to perform when the user triggers second button.{}
secondTitleButtonshow the LGNSoftBtn with title, and the button position is on the left firstButton.nil
thirdActionThe action to perform when the user triggers third button.{}
thirdTitleButtonshow the LGNTransparentBtn with title, and the button position is on the left secondButton.nil