FS.FluentUI 0.0.1-beta07

FS.FluentUI

Microsoft's FluentUI V9 (React) made for F#

⚠️This repo is in beta. Some components/ functions are incomplete. Please feel free to send PR's and messages in order to get this library as close to 100% as possible!⚠️

Please see src/FS.FluentUI.TestGrounds/src/TestGrounds.fs for examples of every component

open FS.FluentUI

[<ReactComponent>]
let ToggleButtons () =
    let isChecked1, setIsChecked1 = React.useState true
    let isChecked2, setIsChecked2 = React.useState false
    Html.div [
        Fui.toggleButton [
            toggleButton.icon (Fui.icon.checkbox1Filled [])
            toggleButton.checked' isChecked1
            toggleButton.onClick (fun _ -> setIsChecked1 (isChecked1 |> not))
            toggleButton.text "Checked state"
        ]
        Fui.toggleButton [
            toggleButton.appearance.primary
            toggleButton.checked' isChecked2
            toggleButton.onClick (fun _ -> setIsChecked2 (isChecked2 |> not))
            toggleButton.text "Unchecked state"
        ]
        Fui.toggleButton [
            toggleButton.shape.circular
            toggleButton.disabledFocusable true
            toggleButton.text "Disabled focusable"
        ]
    ]

let root = ReactDOM.createRoot (document.getElementById "feliz-app")
root.render (
    Fui.fluentProvider [
        fluentProvider.theme.webDarkTheme
        fluentProvider.children [
            ToggleButtons ()
        ]
    ]
)

Components / Hooks

If you don't see a component/ hook in this list.... just wait longer!

I have done my best so far to keep usage of these similar to Typescript usage in the docs. See docs for more usage examples: Microsoft Documentation: Docs

Contributing

Before sending PR's, please test what you've added in the "TestGrounds".

cd src/FS.FluentUI.TestGrounds
npm install
npm start

Installation

Install into your Client.fsproj project using Femto (recommended)

cd ./{path to Client}

# when using femto as a global CLI tool
femto install FS.FluentUI --version {newest version}

# when using femto as a local CLI tool
dotnet femto install FS.FluentUI --version {newest version}

This will install the nuget package and afterwards automatically installs the required npm packages used by this binding.

Femto will detect whether you are using paket and will install the package using paket into the dependency group of the project

You can install the library manually if you want by first installing the nuget package

cd ./{path to your project}
dotnet add package FS.FluentUI --version {newest version}