BlazorFluentUI knowledge bundle
Bundle OKF 0.2 · 5 conceitos · Apps-By-TAP/BlazorFluentUI
Open source Repository Open in the app JSON README (API)
About
# BlazorFluentUI knowledge bundle
This is the canonical, source-verified reference for AppsByTAP.BlazorFluentUI 0.1.0. Coding agents should begin here, then load the relevant component concept before writing Razor. Exact parameter names, generic arguments, enum casing, defaults, binding pairs, and current limitations are deliberate contract data—not suggestions.
## Start here
* [Getting started](getting-started.md) - Project setup, services, static assets, namespaces, and first component usage.
* [Architecture and binding conventions](architecture-and-binding.md) - WPF-style names, data flow, component composition, and rules for generated code.
* [Components](components/) - One detailed source-linked page for each of the 41 compiled Razor components.
* [References](references/) - Supporting types, assets, migration, and documentation maintenance.
* [Update log](log.md) - Bundle and API changes in newest-first order.
## Agent consumption contract
1. Read the exact component page an
Details
- Kind
- OKF bundles
- Topic
- No topic detected
- Publisher
- apps-by-tap
- Origin
- okf_github
- Category
- dados
- Version
- 0.2
- Last push
- 2026-08-14T15:29:04Z
- Repository state
- ativo
- Language
- HTML
- License
- MIT
- Added
- 2026-09-09 05:03:59
- Updated
- 2026-09-09 05:03:59
- Origin id
Apps-By-TAP/BlazorFluentUI:docs/OKF/index.md
README
# BlazorFluentUI
A Blazor component library that provides [Fluent UI](https://developer.microsoft.com/en-us/fluentui) inspired components for Blazor Server applications. Built by [Apps-By-TAP](https://github.com/Apps-By-TAP).
## WPF-Style API Design
This library was **purpose-built for WPF developers transitioning to the web**. It intentionally uses WPF-style parameter names rather than standard Blazor conventions. This makes components feel familiar to developers coming from WPF, Silverlight, or UWP backgrounds.
### Data Binding
Blazor's `@bind-*` sugar works with all components — you don't need to manually wire up change callbacks. However, the underlying parameter names differ from standard Blazor:
| Components | Parameters | Binding |
|---|---|---|
| **Toggle**, **CheckBox** | `IsChecked` + `IsCheckedChanged` | `@bind-IsChecked="@_value"` |
| **DropDown**, **SplitButton**, **ChoiceGroup**, **BlankDropDown** | `SelectedItem` + `SelectedItemChanged` | `@bind-SelectedItem="@_value"` |
| **TextField**, **SpinButton** | `Value` + `ValueChanged` | `@bind-Value="@_value"` |
### Why the Difference?
Standard Blazor components use `Value`/`ValueChanged`, which works well when the underlying value is a single primitive. But for components like a Toggle or DropDown, `IsChecked` and `SelectedItem` are more semantically meaningful. The library prioritizes developer clarity over Blazor convention.
## Features
- **20+ reusable UI components** — buttons, text fields, dropdowns, modals, toggles, spinners, and more
- **Light and Dark theme support** — a built-in theming system that uses CSS custom properties with full palette, semantic color, and semantic text color tokens
- **Generic components** — `DropDown<T>` and other components support generic type parameters for strongly typed data binding
- **Two-way data binding** — components follow Blazor conventions with `EventCallback` parameters for seamless binding
- **Form validation** — integrates with Blazor's `EditForm` and validation infrastructure
- **Office Fabric icons** — over 100 icons from the Office Fabric icon set are available through the `Icon` component
- **Input masking** — the `TextField` component supports regex-based input masks via JavaScript interop
- **Responsive modal and callout system** — with light-dismiss behavior and automatic z-index layering
## Components
| Component | Description |
|---|---|
| **Button** | Multiple variants — `DefaultButton`, `CompoundButton`, `IconButton`, `SplitButton`, `NavButton`, `HyperLinkButton`, and more |
| **TextField** | Single-line and multi-line text input with character limits, placeholder text, input masks, and multiple input types |
| **DropDown** | Generic dropdown (`DropDown<T>`) with single and multi-select modes, grouped items with headers, and custom item templates |
| **CheckBox** | Checkbox with configurable label positioning (start or end) |
| **CheckboxGroup** | Groups multiple checkboxes with horizontal or vertical layout; optionally renders as toggle switches |
| **ChoiceGroup** | Radio button group for single-selection scenarios |
| **Toggle** | Binary toggle switch with inline or stacked label |
| **SpinButton** | Numeric spinner for integer or decimal values with configurable suffix and rounding |
| **Modal** | Dialog window with header, close button, light-dismiss support, and configurable width |
| **Callout** | Overlay panel for contextual content |
| **Expander** | Collapsible section with header and chevron indicator |
| **Tabs** | Tabbed content container with scrollable tab panels |
| **TreeMenu** | Hierarchical menu built from branch components |
| **Icon** | Renders Office Fabric icons by type via the `IconTypes` enum |
| **Label** | Simple text label |
| **Persona** | Displays a user's avatar (initials-based), name, and title |
| **Spinner** | Loading indicator in multiple sizes and label positions |
| **Chip / ChipSet** | Chip input component for tag-like selections |
| **FloatingActionButton** | Floating action button |
| **BottomNavigationBar** | Mobile-style bottom navigation bar |
| **FitText** | Automatically scales text to fit its container |
| **LightDismiss** | Backdrop overlay used internally by modals and dropdowns |
## Quick Start
1. Add a reference to the `AppsByTAP.BlazorFluentUI.Components` project.
2. Register the theme provider in your `Program.cs` or `Startup.cs`:
```csharp
using AppsByTAP.BlazorFluentUI.Components.Theme.Models;
using AppsByTAP.BlazorFluentUI.Components.Theme.Themes.Light;
// Register with a light theme
builder.Services.AddSingleton<IThemeProvider>(new ThemeProvider(new LightThemePalette()));
```
3. Wrap your application content with the `Theme` component in your root layout:
```razor
@using AppsByTAP.BlazorFluentUI.Components.Theme
<Theme>
@Body
</Theme>
```
4. Add the required CSS to your `_Host.cshtml` or `index.html`:
```html
<link href="_content/AppsByTAP.BlazorFluentUI.Components/css/fabric-icons-inline.css" rel="stylesheet" />
```
5. Use components in your Razor pages:
```razor
@using AppsByTAP.BlazorFluentUI.Components.Button
@using AppsByTAP.BlazorFluentUI.Components.TextField
<DefaultButton Text="Click Me" OnClick="HandleClick" IsPrimary="true" />
<TextField Label="Name" @bind-Value="name" PlaceHolder="Enter your name" />
```
## Documentation
The source-verified [OKF knowledge bundle](docs/OKF/index.md) is the canonical documentation for people and coding agents.
- [Getting Started](docs/OKF/getting-started.md) - installation, project setup, services, and assets
- [Component Index](docs/OKF/components/) - a dedicated contract page for every compiled component
- [Theme Reference](docs/OKF/components/theme.md) - palette creation, runtime switching, and all 141 generated CSS variables
- [0.1.0 Migration](docs/OKF/references/migration-0.1.0.md) - corrected public symbol and token names
## Project Structure
```
BlazorFluentUI/
├── AppsByTAP.BlazorFluentUI.PlayGround/
│ ├── AppsByTAP.BlazorFluentUI.Components/ # Core component library (net8.0)
│ │ ├── BaseComponent/ # Shared base classes
│ │ ├── Button/ # Button components
│ │ ├── TextField/ # Text input components
│ │ ├── DropDown/ # Dropdown components
│ │ ├── CheckBox/ # Checkbox component
│ │ ├── CheckboxGroup/ # Checkbox group component
│ │ ├── ChoiceGroup/ # Radio button group
│ │ ├── Toggle/ # Toggle switch
│ │ ├── SpinButton/ # Numeric spinner
│ │ ├── Modal/ # Modal dialog
│ │ ├── Callout/ # Callout overlay
│ │ ├── Expander/ # Collapsible section
│ │ ├── Tabs/ # Tab container
│ │ ├── TreeMenu/ # Hierarchical menu
│ │ ├── Icon/ # Fabric icons
│ │ ├── Label/ # Text label
│ │ ├── Persona/ # User profile display
│ │ ├── Spinner/ # Loading spinner
│ │ ├── Chip/ # Chip/tag component
│ │ ├── FloatingActionButton/ # FAB component
│ │ ├── BottomNavigationBar/ # Bottom nav bar
│ │ ├── FitText/ # Auto-fit text
│ │ ├── LightDismiss/ # Backdrop overlay
│ │ ├── Forms/ # Form validation support
│ │ ├── Theme/ # Theming system
│ │ ├── Common/ # Shared enums and utilities
│ │ └── wwwroot/ # Static assets (CSS, JS)
│ └── AppsByTAP.BlazorFluentUI.PlayGround.sln
├── docs/ # Documentation
├── LICENSE # MIT License
└── README.md
```
## Requirements
- [.NET 6.0 SDK](https://dotnet.microsoft.com/download/dotnet/6.0) or later
- A Blazor Server project
## License
This project is licensed under the [MIT License](LICENSE).