Components

Switch

Control that allows users to turn on or off item

Usage

Switch are used for activating one of two predefined options

Use Legion switch to modify the responsive toggle buttons that supports default and small sizes, and an optional text label on its right side etc.

    import LegionUI

Variant

Legion Have 2 Variant of Switch :

Switched ON

Switched OFF

Use this Function : LGNSwitch and add value initialValue: true or false

This code sample demonstrates how to modify the type of switch :

A. Switched ON

    LGNSwitch(
        initialValue: true,
        onToggleChange: { newValue in
            // do something with newValue
        }
    )

B. Switched OFF

    LGNSwitch(
        initialValue: false,
        onToggleChange: { newValue in
            // do something with newValue
        }
    )

Attribute

Legion Have 3 Attributes for Customize Switch :

Size

Small

Default

Size switch is automaticlly default, if you want to change to small add this function : sizeType: LGNSwitch.SizeType.small

This code sample demonstrates how to modify size switch :

A. Switch Small

    LGNSwitch(
        initialValue: true,
        sizeType: LGNSwitch.SizeType.small,
        onToggleChange: { newValue in
            // do something with newValue
        }
    )

B. Switch Normal

   LGNSwitch(
        initialValue: true,
        onToggleChange: { newValue in
            // do something with newValue
        }
    )

Disable

This disable for mark the switch that now have a value true

Choose type Switch : For default size nothing to add, for small size add this function sizeType: LGNSwitch.SizeType.small , And if the switch is ON or OFF add this function initialValue: ValueSwitch where ValueSwitch consist of true or false Last finish it if the switch disable ON or OFF add this funcition isDisabled: .constant(ValueDisable) where ValueDisable consist of true or false

This code sample demonstrates how to modify disable of the switch :

   LGNSwitch(
        initialValue: true,
        isDisabled: .constant(true)
    )

B. Size Small , Switch ON & Disable ON

   LGNSwitch(
        sizeType: LGNSwitch.SizeType.small,
        initialValue: true,
        isDisabled: .constant(true)
    )

C. Size Normal, Switch OFF & Disable OFF

   LGNSwitch(
        initialValue: false,
        onToggleChange: { newValue in
            // do something with newValue
        }
    )

D. Size Small, Switch OFF & Disable OFF

    LGNSwitch(
        sizeType: LGNSwitch.SizeType.small,
        initialValue: false,
        onToggleChange: { newValue in
            // do something with newValue
        }
    )

E. Size Normal, Switch ON & Disable OFF

   LGNSwitch(
        initialValue: true,
        onToggleChange: { newValue in
            // do something with newValue
        }
    )

F. Size Small, Switch ON & Disable OFF

   LGNSwitch(
        sizeType: LGNSwitch.SizeType.small,
        initialValue: true,
        onToggleChange: { newValue in
            // do something with newValue
        }
    )

G. Size Normal, Switch OFF & Disable ON

   LGNSwitch(initialValue: false, isDisabled: .constant(true))

H. Size Small, Switch OFF & Disable ON

    LGNSwitch(
        sizeType: LGNSwitch.SizeType.small,
        initialValue: false,
        isDisabled: .constant(true)
    )

Label

Choose type Switch : For default size nothing to add, for small size add this function sizeType: LGNSwitch.SizeType.small , For labeling just add “Label” where Label consist the value of label you want to add. And if the switch is ON or OFF add this function initialValue: ValueSwitch where ValueSwitch consist of true or false Last finish it if the switch disable ON or OFF add this funcition isDisabled: .constant(ValueDisable) where ValueDisable consist of true or false

This code sample demonstrates how to modify disable of the button :

A. Size Normal , Switch ON & Disable ON

   LGNSwitch("Label", initialValue: true, isDisabled: .constant(true))

B. Size Small , Switch ON & Disable ON

   LGNSwitch(
        "Label",
        sizeType: LGNSwitch.SizeType.small,
        initialValue: true,
        isDisabled: .constant(true)
    )

C. Size Normal, Switch OFF & Disable OFF

    LGNSwitch(
        "Label",
        initialValue: false,
        onToggleChange: { newValue in
            // do something with newValue
        }
    )

D. Size Small, Switch OFF & Disable OFF

   LGNSwitch(
        "Label",
        sizeType: LGNSwitch.SizeType.small,
        initialValue: false,
        onToggleChange: { newValue in
            // do something with newValue
        }
    )

E. Size Normal, Switch ON & Disable OFF

  LGNSwitch(
        "Label",
        initialValue: true,
        onToggleChange: { newValue in
            // do something with newValue
        }
    )

F. Size Small, Switch ON & Disable OFF

    LGNSwitch(
        "Label",
        sizeType: LGNSwitch.SizeType.small,
        initialValue: true,
        onToggleChange: { newValue in
            // do something with newValue
        }
    )

G. Size Normal, Switch OFF & Disable ON

   LGNSwitch("Label", initialValue: false, isDisabled: .constant(true))

H. Size Small, Switch OFF & Disable ON

    LGNSwitch(
        "Label",
        sizeType: LGNSwitch.SizeType.small,
        initialValue: false,
        isDisabled: .constant(true)
    )

Properties

Properties	Description	Default Value
text	The text that should appear on the right side of the swift	`nil`
initialValue	The initial state of the Switch. Whether it is turned on (`true`) or off (`false`)	required or no default value
sizeType	The size of the toggle Either `.default` or `.small`	`.default`
fontFamily	A string of font family name	`Nurito-Sans`
textForegroundColor	A color to be used for the text label on the right, when the view is not disabled	`Color.LGNTheme.tertiary800`
textDisabledColor	A color to be used for the text label on the right, when the view is disabled	`Color.LGNTheme.tertiary50`
isDisabled	A binding boolean to enable disable the component	`.constant(false)`
onToggleChange	The action to perform when user toggles the switch.	`nil`

Example Project

    LGNSwitch(
        initialValue: false,
        sizeType: LGNSwitch.SizeType.small,
        fontFamily: "Montserrat",
        textForegroundColor: Color.LGNTheme.secondary800,
        textDisabledColor: Color.LGNTheme.secondary50,
        onToggleChange: { newValue in
            // do something with newValue
        }

Do you have feedback?

Please let us know to make it better

Send Feedback