Skip to content

Instantly share code, notes, and snippets.

@freecodecampster
Created July 5, 2020 23:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save freecodecampster/10ab7b1166bd53fbae815ce6535a833f to your computer and use it in GitHub Desktop.
Save freecodecampster/10ab7b1166bd53fbae815ce6535a833f to your computer and use it in GitHub Desktop.
Code from https://www.youtube.com/watch?v=slzc0-24q-I updated for current version of Swift
https://www.youtube.com/watch?v=slzc0-24q-I
// SwiftUI: Custom Button using ButtonStyle
import SwiftUI
struct ContentView : View {    
    var body: some View {
        VStack {
            Button("Hello World"){}
                .buttonStyle(RoundedButton())
            
            Button(action: {}) {
                HStack {
                    Image(systemName: "magnifyingglass")
                    Text("Search")
                }
            }.buttonStyle(RoundedButton())
            
            Button(action: {}) {
                VStack {
                    Image(systemName: "magnifyingglass")
                }
            }.buttonStyle(RoundedButton())
            .mask(Circle())
            
            Button("Login") {
                
            }.buttonStyle(PrimaryFullWidthButton())
            
            Button("Sign up") {
                
            }.buttonStyle(SecondaryFullWidthButton())
        }
    }
    
    public struct RoundedButton: ButtonStyle {
        public func makeBody(configuration: Self.Configuration) -> some View {
            // These modifiers belong to the label of the button
            configuration.label
                .accentColor(.white)
                .padding()
                .background(Color.red)
                .cornerRadius(10)
        }
    }
    
    public struct PrimaryFullWidthButton: ButtonStyle {
        
        public func makeBody(configuration: Self.Configuration) -> some View {
            // These modifiers belong to the label of the button
            configuration.label
                .accentColor(configuration.isPressed ? .red : .white)
                .frame(minWidth: 0, maxWidth: .infinity)
                .padding()
                .background(configuration.isPressed ? Color.blue : Color.red)
                .cornerRadius(10)
                .padding([.leading, .trailing, .bottom])
        }
    }
    
    public struct SecondaryFullWidthButton: ButtonStyle {
        
        public func makeBody(configuration: Self.Configuration) -> some View {
            // These modifiers belong to the label of the button
            configuration.label
                .accentColor(.red)
                .frame(minWidth: 0, maxWidth: .infinity)
                .padding()
                .border(Color.red)
                .cornerRadius(10)
                .padding([.leading, .trailing, .bottom])
        }
    }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment