Avalonia.FuncUI 1.5.0

<h1 align="center"><img src="github/img/logo/FuncUI_Boxed.png" width="32px" alt="Avalonia FuncUI"> Avalonia FuncUI </h1>

<p align="center">使用 <a href="https://fsharp.org">F#</a> 和 <a href="https://github.com/AvaloniaUI/Avalonia">AvaloniaUI</a> 开发跨平台 GUI 应用程序！</p> <p align="center"> <img src="https://img.shields.io/github/languages/top/fsprojects/Avalonia.FuncUI" alt="GitHub top language"> <img alt="GitHub repo size" src="https://img.shields.io/github/repo-size/fsprojects/Avalonia.FuncUI"> <img src="https://img.shields.io/github/license/fsprojects/Avalonia.FuncUI"> <img alt="Nuget (with prereleases)" src="https://img.shields.io/nuget/vpre/Avalonia.FuncUI?color=green&label=package%20Avalonia.FuncUI"> </p><br>

关于

FuncUI 是建立在 AvaloniaUI 之上的一个薄层。它包含用于以不同编程风格编写 UI 应用程序的抽象。它还包含组件和状态管理系统。

FuncUI 主要由以下部分组成

• 虚拟 DOM
• 视图 DSL
• 组件模型

资源

• 💨 入门

• 📚 文档

• 📓 示例

贡献

请通过问题报告、拉取请求、代码审查、文档编写和讨论等方式为这个库做出贡献。

示例

使用组件的示例

使用组件库制作的一个简单计数器

type Components =
    static member Counter () =
        Component (fun ctx ->
            let state = ctx.useState 0
    
            DockPanel.create [
                DockPanel.children [
                    Button.create [
                        Button.onClick (fun _ -> state.Set(state.Current - 1))
                        Button.content "click to decrement"
                    ]
                    Button.create [
                        Button.onClick (fun _ -> state.Set(state.Current + 1))
                        Button.content "click to increment"
                    ]
                    TextBlock.create [
                        TextBlock.dock Dock.Top
                        TextBlock.text (string state.Current)
                    ]
                ]
            ]
        )

在组件示例文件夹中查找更多使用组件的示例。

使用 Elmish 的示例

与上述相同的计数器，但使用 Avalonia.FuncUI.Elmish 包

module Counter =
    type CounterState = { count : int }
    let init = { count = 0 }
    type Msg = Increment | Decrement

    let update (msg: Msg) (state: CounterState) : CounterState =
        match msg with
        | Increment -> { state with count =  state.count + 1 }
        | Decrement -> { state with count =  state.count - 1 }
    
    let view (state: CounterState) (dispatch): IView =
        DockPanel.create [
            DockPanel.children [
                Button.create [
                    Button.onClick (fun _ -> dispatch Increment)
                    Button.content "click to increment"
                ]
                Button.create [
                    Button.onClick (fun _ -> dispatch Decrement)
                    Button.content "click to decrement" 
                ]
                TextBlock.create [
                    TextBlock.dock Dock.Top
                    TextBlock.text (sprintf "the count is %i" state.count)
                ]
            ]
        ]    

在Elmish 示例文件夹中查找更多使用 Elmish 的示例

维护者

Avalonia.FuncUI的当前共同维护者有

• @Numpsy
• @JordanMarr
• @sleepyfran
• @JaggerJo（项目负责人）

"fsprojects"下项目的默认维护者账户是@fsprojectsgit - F# 社区项目孵化空间（仓库管理）

商业支持

如果您需要商业支持合同或有兴趣进行合同工作，请联系 [email protected]。

星标历史

<a href="https://star-history.com/#fsprojects/Avalonia.FuncUI&Date"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=fsprojects/Avalonia.FuncUI&type=Date&theme=dark" /> <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=fsprojects/Avalonia.FuncUI&type=Date" /> <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=fsprojects/Avalonia.FuncUI&type=Date" /> </picture> </a>