FS.FluentUI
0.0.1-beta12
See the version list below for details.
dotnet add package FS.FluentUI --version 0.0.1-beta12
NuGet\Install-Package FS.FluentUI -Version 0.0.1-beta12
<PackageReference Include="FS.FluentUI" Version="0.0.1-beta12" />
paket add FS.FluentUI --version 0.0.1-beta12
#r "nuget: FS.FluentUI, 0.0.1-beta12"
// Install FS.FluentUI as a Cake Addin #addin nuget:?package=FS.FluentUI&version=0.0.1-beta12&prerelease // Install FS.FluentUI as a Cake Tool #tool nuget:?package=FS.FluentUI&version=0.0.1-beta12&prerelease
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!⚠️
NOTE: I've created FS.FluentUI.V8toV9 in order to use Stack, StackItem, and createBrandVariants (from V8 theme). See example of Stack below.
IMPORTANT: Place a Fui.fluentProvider
at the root of your app and pass the theme in as a prop. You can use pre-determined themes, or create your own BrandVariants
or Tokens
to use for your theme. See src/TestGrounds/src/Main.fs
for specific examples. BrandVariants
can be generated and copied over from Microsoft's Theme Designer. Simply pick your "Key color value", choose your theme, click Export
, and convert the TS BrandVariants
into something more F#.
open Feliz
open Browser.Dom
open FS.FluentUI
open FS.FluentUI.V8toV9
[<ReactComponent>]
let ToggleButtons () =
let isChecked1, setIsChecked1 = React.useState true
let isChecked2, setIsChecked2 = React.useState false
Fui.stack [
stack.horizontal true
stack.tokens [ stack.tokens.childrenGap 16 ]
stack.children [
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!
Please see src/FS.FluentUI.TestGrounds/src
for examples of every component
Complete Components | Complete Hooks / Functions | Has TODO's or are unstable | Upcoming |
---|---|---|---|
Accordion | useArrowNavigationGroup | Toast | TimePicker |
Avatar | useId | Table | ColorPicker |
AvatarGroup | useFocusableGroup | useToastController | SwatchColorPicker |
Badge | partitionAvatarGroupItems | Drawer (Preview) | Rating |
CounterBadge | useOverflowMenu | useHeadlessFlatTree_unstable | BasicList |
PresenceBadge | useIsOverflowItemVisible | Alert (Preview) | PeoplePicker |
Button | createTableColumn | useTableFeatures | TeachingCallout |
CompoundButton | useStaticVirtualizerMeasure | InfoLabel (Preview) | Coachmark |
MenuButton | useModalAttributes | VirtualizerScrollView (Preview) | MessageBar |
SplitButton | useObservedElement | InteractionTag (Preview) | |
ToggleButton | useFocusFinders | TagGroup (Preview) | |
Card | useOverflowCount | Tag (Preview) | |
CardFooter | makeResetStyles | Breadcrumb (Preview) | |
CardHeader | makeStyles | Searchbox (Preview) | |
CardPreview | bundleIcon | VirtualizerScrollViewDynamic (Preview) | |
Checkbox | Virtualizer (Preview) | ||
Combobox | |||
DataGrid | |||
Dialog | |||
Divider | |||
Divider | |||
Dropdown | |||
Tablist | |||
Field | |||
FluentProvider | |||
Image | |||
Input | |||
Label | |||
Link | |||
Menu | |||
Overflow | |||
Persona | |||
Popover | |||
Portal | |||
ProgressBar | |||
Radio | |||
RadioGroup | |||
Select | |||
Skeleton | |||
Slider | |||
SpinButton | |||
Switch | |||
Text | |||
Textarea | |||
Toolbar | |||
Tree | |||
Tooltip | |||
DatePicker (w/ one small TODO) |
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 Docs
Styling
Fluent UI React v9 provides design tokens
for consistent theming.
Microsoft doesn't suggest using exact colors in Fluent UI code.
❌ style.color.darkBlue
✅ style.color Theme.tokens.colorBrandForeground1
Although shorthands
is used extensively throughout the Microsoft documentation, it is not necessary here when using makeStyles
or makeResetStyles
; I'm expanding any shorthand styling properties under-the-hood.
makeStyles
is used to define style permutations in components and is used for style overrides. It returns a React hook that should be called inside a component:
When using single numeric values in makeStyles
or makeResetStyles
, specify the value's length
.
❌ style.minWidth 200
✅ style.minWidth (length.px 200)
open Feliz
open FS.FluentUI
let tokens = Theme.tokens
type Styles = {
accordion: string
useArrowNavigationGroup: string
tooltip: string
icon: string
compoundButton: string
}
let useStyles: unit -> Styles = Fui.makeStyles [
"accordion", [
style.color.red
style.backgroundColor.darkGray
]
"useArrowNavigationGroup", [
style.display.flex
style.columnGap 15
]
"tooltip", [
style.backgroundColor tokens.colorBrandBackground
style.color tokens.colorNeutralForegroundInverted
]
"icon", [
style.color.green
]
"compoundButton", [
style.width (length.px 150)
]
]
[ReactComponent]
let ToolTip () =
let styles = useStyles()
Fui.tooltip [
tooltip.className styles.tooltip
...
The makeResetStyles
API works similarly to makeStyles
and is used to generate styles as a single monolithic class to avoid the "CSS rules explosion" problem.
open Feliz
open FS.FluentUI
open FS.FluentUI.V8toV9
let dialogClass = Fui.makeResetStyles [
style.position.fixedRelativeToWindow
style.top (length.px 200)
style.backgroundColor tokens.colorBrandBackground2
style.margin (length.auto)
style.borderStyle.none
style.padding (10, 50)
style.boxShadow (5, 5, tokens.shadow16)
style.width (length.px 450)
style.height (length.px 200)
style.zIndex 100
]
[<ReactComponent>]
let Dialog () =
let isOpen, setIsOpen = React.useState false
let dialogClass = dialogClass()
Fui.stack [
stack.className dialogClass
...
BundleIcon
You can use the bundleIcon
method to bundle a filled and unfilled version of an icon which will combine them into one icon.
❌ let AddIcon = Fui.bundleIcon(Fui.icon.addCircleFilled [], Fui.icon.addCircleRegular [])
✅ let AddIcon = Fui.bundleIcon(bundleIcon.addCircleFilled, bundleIcon.addCircleRegular)
In the following example, the icons are toggled depending on if the button isChecked
. Some components will toggle between the two icons on-hover, on-click, or not at all. Please see Microsoft's documentation for more examples.
[<ReactComponent>]
let ToggleButton () =
let isChecked, setIsChecked = React.useState true
let CheckedIcon = Fui.bundleIcon(bundleIcon.checkbox1Filled, bundleIcon.checkbox1Regular)
Fui.toggleButton [
toggleButton.icon (CheckedIcon [])
toggleButton.checked' isChecked
toggleButton.onClick (fun _ -> setIsChecked (isChecked |> not))
toggleButton.text "Button Text"
]
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}
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 was computed. net5.0-windows was computed. net6.0 was computed. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
.NET Core | netcoreapp2.0 was computed. netcoreapp2.1 was computed. netcoreapp2.2 was computed. netcoreapp3.0 was computed. netcoreapp3.1 was computed. |
.NET Standard | netstandard2.0 is compatible. netstandard2.1 was computed. |
.NET Framework | net461 was computed. net462 was computed. net463 was computed. net47 was computed. net471 was computed. net472 was computed. net48 was computed. net481 was computed. |
MonoAndroid | monoandroid was computed. |
MonoMac | monomac was computed. |
MonoTouch | monotouch was computed. |
Tizen | tizen40 was computed. tizen60 was computed. |
Xamarin.iOS | xamarinios was computed. |
Xamarin.Mac | xamarinmac was computed. |
Xamarin.TVOS | xamarintvos was computed. |
Xamarin.WatchOS | xamarinwatchos was computed. |
-
.NETStandard 2.0
- Feliz (>= 2.6.0)
- FSharp.Core (>= 6.0.1)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
1.16.0 | 106 | 10/9/2024 |
1.15.2 | 778 | 7/27/2024 |
1.15.1 | 119 | 6/26/2024 |
1.15.0 | 149 | 6/7/2024 |
1.14.0 | 118 | 5/20/2024 |
1.13.0 | 146 | 4/24/2024 |
1.12.0 | 144 | 4/1/2024 |
1.11.0 | 184 | 1/23/2024 |
1.10.0 | 135 | 1/11/2024 |
1.9.0 | 218 | 12/22/2023 |
1.8.0 | 179 | 12/3/2023 |
1.7.0 | 132 | 11/27/2023 |
1.6.0 | 147 | 11/11/2023 |
1.5.0 | 147 | 11/2/2023 |
1.4.0 | 120 | 10/30/2023 |
1.3.0 | 134 | 10/23/2023 |
1.2.0 | 144 | 10/18/2023 |
1.1.0 | 187 | 10/6/2023 |
1.0.4 | 146 | 10/6/2023 |
1.0.3 | 139 | 10/6/2023 |
1.0.2 | 146 | 10/5/2023 |
1.0.1 | 164 | 9/25/2023 |
1.0.0 | 156 | 9/25/2023 |
1.0.0-prerelease-003 | 110 | 9/21/2023 |
1.0.0-prerelease-002 | 128 | 9/18/2023 |
1.0.0-prerelease-001 | 112 | 9/15/2023 |
0.0.1-beta12 | 128 | 9/14/2023 |
0.0.1-beta11 | 134 | 9/12/2023 |
0.0.1-beta10 | 115 | 9/12/2023 |
0.0.1-beta09 | 129 | 9/11/2023 |
0.0.1-beta08 | 127 | 9/11/2023 |
0.0.1-beta07 | 130 | 9/8/2023 |
0.0.1-beta06 | 129 | 9/7/2023 |
0.0.1-beta05 | 116 | 9/7/2023 |
0.0.1-beta04 | 150 | 9/1/2023 |
0.0.1-beta03 | 115 | 8/31/2023 |
0.0.1-beta02 | 148 | 8/29/2023 |
- Add ability to bundleIcons, theme with custom Tokens, and fix dataGrid.onSelectionChange bug