Fun Blazor

Ant Design

For Blazor

Following the Ant Design specification, we developed a Blazor Components library ant-design-blazor that contains a set of high quality components and demos for building rich, interactive user interfaces.

Modal
[<AutoOpen>]
module Fun.Blazor.Docs.Wasm.DemoAntDesign.ModalDemo

open Fun.Blazor
open Fun.Blazor.DslCE
open AntDesign

let modalDemo = html.inject (fun (hook: IComponentHook) ->
    let isDialogOpen = hook.UseStore false

    html.div [
        button.create [
            button.childContent "Try to click 😊"
            button.onClick (fun _ -> isDialogOpen.Publish not)
        ]
        watch {
            Store isDialogOpen.Observable
            RenderFn (fun isOpen ->
                modal.create [
                    modal.title "Demo modal"
                    modal.visible isOpen
                    modal.onOk (fun _ -> isDialogOpen.Publish not)
                    modal.onCancel (fun _ -> isDialogOpen.Publish not)
                    modal.childContent [
                        result.create [
                            result.status "success"
                            result.title "Successfully Purchased Cloud Server ECS"
                            result.childContent [
                                alert.create [
                                    alert.type' AlertType.Success
                                    alert.message "Success"
                                ]
                                inputGroup.create [
                                    inputNumber<int>.create [
                                        inputNumber.min 100
                                        inputNumber.max 150
                                        inputNumber.value 123
                                    ]
                                ]
                            ]
                        ]
                        calendar.create [
                            calendar.monthCellRender (fun d -> html.text $"My {d.Month}")
                        ]
                    ]
                 ]
            )
        }
    ])


Dropdown
[<AutoOpen>]
module Fun.Blazor.Docs.Wasm.DemoAntDesign.DropDownDemo

open Fun.Blazor
open AntDesign

let dropDownDemo =
    dropdown.create [
        dropdown.overlay [
            menu.create [
                menuItemGroup.create [
                    menuItemGroup.title "Group title"
                    menuItemGroup.childContent [
                        menuItem.create "1st menu item"
                        menuItem.create "2st menu item"
                    ]
                ]
                subMenu.create [
                    subMenu.title "Sub menu"
                    subMenu.childContent [
                        menuItem.create "3st menu item"
                        menuItem.create "4st menu item"
                    ]
                ]
                subMenu.create [
                    subMenu.title "Disabled sub menu"
                    subMenu.disabled true
                    subMenu.childContent [
                        menuItem.create "5st menu item"
                        menuItem.create "6st menu item"
                    ]
                 ]
            ]
        ]
        dropdown.childContent [
            html.a [
                html.div "Cascading menu"
                icon.create [
                    icon.type' "down"
                ]
            ]
        ]
    ]


Collapse
Panel 1
Panel 1 content
Panel 2 content
Panel 3 content
[<AutoOpen>]
module Fun.Blazor.Docs.Wasm.DemoAntDesign.CollapseDemo

open AntDesign

let collapseDemo =
    collapse.create [
        collapse.bordered false
        collapse.defaultActiveKey [| "1" |]
        collapse.expandIconTemplate (fun expanded ->
            icon.create [
                icon.type' "caret-right"
                icon.rotate (if expanded then 90 else 0)
            ])
        collapse.childContent [
            for i in [1..3] do
                panel.create [
                    panel.header $"Panel {i}"
                    panel.key (string i)
                    panel.childContent $"Panel {i} content"
                ]
        ]
    ]


Chart
[<AutoOpen>]
module rec Fun.Blazor.Docs.Wasm.DemoAntDesign.ChartDemo

open AntDesign.Charts


type Item =
    { country: string 
      year: string
      value: int }


let chartDemo =
    PercentStackedArea'<Item>() {
        Config (
            PercentStackedAreaConfig(
                Title = Title(Visible = true, Text = "百分比堆叠面积图"),
                Meta = Meta(Range = [| 0; 1 |]),
                XField = "year",
                YField = "value",
                StackField = "country",
                //Color = OneOf.OneOf( [| "#82d1de"; "#cb302d"; "#e3ca8c" |],
                AreaStyle = GraphicStyle(FillOpacity = 0.7M)))
        Data items
    }



let items =
    [
        {
            country = "Asia"
            year = "1750"
            value = 502
        }
        {
            country = "Asia"
            year = "1800"
            value = 635
        }
        {
            country = "Asia"
            year = "1850"
            value = 809
        }
        {
            country = "Asia"
            year = "1900"
            value = 947
        }
        {
            country = "Asia"
            year = "1950"
            value = 1402
        }
        {
            country = "Asia"
            year = "1999"
            value = 3634
        }
        {
            country = "Asia"
            year = "2050"
            value = 5268
        }
        {
            country = "Africa"
            year = "1750"
            value = 106
        }
        {
            country = "Africa"
            year = "1800"
            value = 107
        }
        {
            country = "Africa"
            year = "1850"
            value = 111
        }
        {
            country = "Africa"
            year = "1900"
            value = 133
        }
        {
            country = "Africa"
            year = "1950"
            value = 221
        }
        {
            country = "Africa"
            year = "1999"
            value = 767
        }
        {
            country = "Africa"
            year = "2050"
            value = 1766
        }
        {
            country = "Europe"
            year = "1750"
            value = 163
        }
        {
            country = "Europe"
            year = "1800"
            value = 203
        }
        {
            country = "Europe"
            year = "1850"
            value = 276
        }
        {
            country = "Europe"
            year = "1900"
            value = 408
        }
        {
            country = "Europe"
            year = "1950"
            value = 547
        }
        {
            country = "Europe"
            year = "1999"
            value = 729
        }
        {
            country = "Europe"
            year = "2050"
            value = 628
        }
    ]