Skip to content

Instantly share code, notes, and snippets.

@peantunes
Last active May 10, 2021 23:08
Show Gist options
  • Save peantunes/1101408feddd6144e91b7a1ae3726a93 to your computer and use it in GitHub Desktop.
Save peantunes/1101408feddd6144e91b7a1ae3726a93 to your computer and use it in GitHub Desktop.
ViewModifier version to create the aqua effect
private struct AquaButtonViewModifier: ViewModifier {
let color: Color
//Content type is inferred from the View this is trying to modify
func body(content: Content) -> some View {
content
// adding a gradient background based on the color used in the parameter
.background(LinearGradient(gradient: Gradient(colors: [.white, color.opacity(0.6), .white]), startPoint: .top, endPoint: .bottom))
// rounded corners
.cornerRadius(12)
// adding the borders using overlay with a RoundedRectangle
.overlay(RoundedRectangle(cornerRadius: 12)
.stroke(color, lineWidth: 2.0))
// a shadow to give more effect
.shadow(color: color, radius: 6, x: 0.0, y: 6.0)
}
}
// Using extension make it easy to access
// and also you can define the default parameters
extension View {
func aqua(color: Color = .blue) -> some View {
modifier(AquaButtonViewModifier(color: color))
}
}
struct AquaButtonViewModifier_Previews: PreviewProvider {
static var previews: some View {
Text("My button")
.foregroundColor(.white)
.padding()
.aqua(color: .blue) // Here is the modifier
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment