generalComponents.md

General Components

Contents

• Bar View
• Button Styles

Bar View

This is a progress bar that can be set in various states.

Full documentation

VStack {
    BarView(value: 22, max: 30)
    BarView(value: 35, max: 30) // Notice that this bar overflows its max. This is why there is a indicator on the bar.
    BarView(value: 30, max: 30)
    BarView(value: 22, max: 30, showLabel: nil, color: .green)
    BarView(value: 22, max: 30, showLabel: true, color: nil)
    BarView(value: 22, max: 30, showLabel: true, color: .red)
}

You can also set the bar based on percentages:

VStack {
    BarView(percent: 25)
    BarView(percent: 50)
    BarView(percent: 75)
    BarView(percent: 100)
}

Button Styles

Simple button styling to make styling your buttons quicker. This feature is still not very customizable but will be enhanced in later versions.

Full documentation links

• Primary Button
• Secondary Button
• Disabled Button

There are three button styles available

    Button(action: {}){
        Text("Secondary")
    }.buttonStyle(PrimaryButton())

    Button(action: {}){
        Text("Secondary")
    }.buttonStyle(SecondaryButton())

    Button(action: {}){
        Text("Secondary")
    }.buttonStyle(DisabledButton())

By default these buttons will take up as much space as is available to them. You can adjust the size of your button with the frame modifier.

    Button(action: {}){
        Text("Disabled")
    }.buttonStyle(PrimaryButton())
        .frame(width: 100, height: 50)

You can set the border/fill styling

    Button(action: {}){
        Text("Primary")
    }.buttonStyle(PrimaryButton())

    Button(action: {}){
        Text("Primary")
    }.buttonStyle(PrimaryButton(variant: .outlined))

    Button(action: {}){
        Text("Primary")
    }.buttonStyle(PrimaryButton(variant: .contained))