I attempted so as to add a backside sheet on my login web page so when the consumer click on on forgot password it exhibits the underside sheet and the consumer can enter its electronic mail.
Under is the code.
Button(motion: {
if self.index == 0 {
showSheet.toggle()
}
}) {
if self.index == 0{
Textual content("Overlook Password?")
.foregroundColor(FoodlooseColors.cOrange)
.fontWeight(.daring)
} else {
Textual content("Overlook Password?")
.foregroundColor(.clear)
.fontWeight(.daring)
}
}
.sheet(isPresented: $showSheet) {
VStack() {
Textual content("Enter your electronic mail to reset your password")
.presentationDetents([.fraction(0.15)])
.padding(.prime, 50)
HStack(spacing: 15){
Picture(systemName: "envelope")
.foregroundColor(FoodlooseColors.cOrange)
TextField("Enter E-mail Deal with", textual content: self.$resetEmail)
}.padding(.vertical, 20)
Button(motion: {
}, label : {
Textual content("Reset Password")
.body(maxWidth: .infinity, maxHeight: 50)
})
.background(FoodlooseColors.cOrange)
.foregroundColor(.white)
.font(.system(measurement: 16, weight: .daring))
.clipShape(Capsule())
}
}
.padding(.prime, 20)
however it appears like this:
As you possibly can see it is compressed. I attempted to make use of body to alter the dimensions however nothing change.
Any concept?
