Awesome
Fable.AntDesign
Fable.AntD | SwiftUI style (class based) bindings | <img src="https://buildstats.info/nuget/Fable.AntD" alt="badge"/> |
---|
Getting Started
- Include the bindings from NuGet:
dotnet package add Fable.AntDesign
- Include the Ant Design React libraries from NPM
package.json:
{
"dependencies": {
"antd": "^4.0.0",
"@ant-design/icons": "^4.0.0",
"@ant-design/charts": "^1.2.14"
}
}
- Reference the styles
style.scss:
@import "../../node_modules/antd/dist/antd.min.css";
Example
Live: https://fable-antdesign.uxsoft.cz/
open Fable.Builders.AntDesign
let view model dispatch =
Content {
PageHeader {
title (str "Login")
subTitle (str "Please log-in to enter.")
}
Form {
style [ MaxWidth "320px"; Margin "0 auto" ]
onFinish (fun values -> dispatch (BeginLogin(string values.["username"], string values.["password"])))
FormItem {
name "email"
key "login-email"
rules [
[ FormRule.RuleType FormRuleType.Email
FormRule.Message "This isn't a valid email" ]
[ FormRule.Required true
FormRule.Message "This field is mandatory" ] ]
Input {
prefix (basicIcon icons.MailOutlined { style [ Color "lightgray" ] })
placeholder "Email"
}
}
FormItem {
name "password"
key "login-password"
rules [
[ FormRule.Required true
FormRule.Message "This field is mandatory" ] ]
Password {
prefix (basicIcon icons.LockOutlined { style [ Color "lightgray" ] })
}
}
FormItem {
key "login-submit"
Button {
style [ Width "100%" ]
buttonType ButtonType.Primary
loading model.IsLoggingIn
htmlType ButtonHtmlType.Submit
str "Login"
}
}
FormItem {
key "login-links"
Button {
buttonType ButtonType.Link
str "Register"
}
Button {
style [ Float FloatOptions.Right ]
buttonType ButtonType.Link
str "Forgot password?"
}
}
}
}
FAQ
- When supplying
formItem.rules
, make sure the form item has a Name otherwise the validations won't work - Use
formItem.key
to make sure the form item is recreated if switching between forms