https://github.com/uxsoft/Fable.AntDesign

Fable bindings for Ant Design (https://ant.design)
https://github.com/uxsoft/Fable.AntDesign

Last synced: 2 months ago
JSON representation

Fable bindings for Ant Design (https://ant.design)

• Host: GitHub
• URL: https://github.com/uxsoft/Fable.AntDesign
• Owner: uxsoft
• Created: 2020-01-04T16:11:12.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-04-18T14:39:43.000Z (about 2 years ago)
• Last Synced: 2024-04-27T23:05:07.996Z (2 months ago)
• Language: F#
• Size: 2 MB
• Stars: 9
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Security: SECURITY.md

Lists

• awesome-fable - Fable.AntD - Ant Design bindings for Fable (Libraries)

README

        
# Fable.AntDesign

| __Fable.AntD__ | __SwiftUI style (class based) bindings__ |  |

| :--- | :--- | :--- |

### Getting Started

- Include the bindings from NuGet:

`dotnet package add Fable.AntDesign`

- Include the Ant Design React libraries from NPM

package.json:

```json

{

  "dependencies": {

    "antd": "^4.0.0",

    "@ant-design/icons": "^4.0.0",

    "@ant-design/charts": "^1.2.14"

  }

}

```

- Reference the styles

style.scss:

```sass

@import "../../node_modules/antd/dist/antd.min.css";

```

### Example 

Live: [https://fable-antdesign.uxsoft.cz/](https://fable-antdesign.uxsoft.cz/)

```fsharp

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