• Pre-compiled CSS bundle containing Bulma, several extensions, and a dark theme
• Interactive Blazor components for Bulma framework elements
• Additional components to help with common Blazor tasks
• Bundled with Google Material Symbols icon font
• No additional dependencies (Microsoft.AspNetCore.Components.Web is already required by Blazor)
• No JavaScript required (except for <ThemeSelector />)

Component List

The following components are currently available for use. All of them are documented and you can hover over them in Visual Studio to get details for the components and their parameters.

Components

• <BreadCrumb /> and <BreadCrumbItem />, creates a simple breadcrumb component to improve your navigation experience
• <Card />, creates an all-around flexible and composable component
• <Message />, creates a styled block containing a note to display
• <Modal />, creates an overlay that can display additional content
• <Navbar />, creates a navigation menu to use at the top of the screen
• <NavbarDropdown />, creates a dropdown to use in a Navbar menu
• <NavbarItem />, creates a link to use in a Navbar menu
• <Panel />, creates a styled block containing content to display
• <Steps /> and <Step />, creates a progress tracker with visual indicators
• <Tabs /> and <Tab />, creates a tab bar and content panels

Elements

• <BooleanIcon />, creates an icon with either a check or 'X'
• <ButtonBase />, allows easily creating standard buttons
• <DeleteButton />, creates a button to delete a record with a confirmation modal
• <Notification />, creates a bold notification block, to alert your users of something
• <ProgressBar />, creates a meter to display completion or loading status
• <ResetButton />, creates a button to reset contents of a form
• <SubmitButton />, creates a button to submit contents of a form
• <Table />, creates an HTML table
• <TableCellBase />, allows easily creating table cells
• <TableData />, creates a td element within a table
• <TableHeader />, creates a th element within a table
• <TableRow />, creates a tr element within a table

Errors

• <_400 />, displays a message with 400: Bad Request
• <_401 />, displays a message with 401: Unauthorized
• <_403 />, displays a message with 403: Forbidden
• <_404 />, displays a message with 404: Not Found
• <_405 />, displays a message with 405: Method Not Allowed
• <_408 />, displays a message with 408: Request Timeout
• <_409 />, displays a message with 409: Conflict
• <_422 />, displays a message with 422: Unprocessable Entity
• <_423 />, displays a message with 423: Locked
• <_426 />, displays a message with 426: Upgrade Required
• <_500 />, displays a message with 500: Internal Server Error
• <_501 />, displays a message with 501: Not Implemented
• <_502 />, displays a message with 502: Bad Gateway
• <_503 />, displays a message with 503: Service Unavailable
• <_504 />, displays a message with 504: Gateway Timeout
• <ExtendedErrorBoundary />, provides additional details on exceptions
• <Unknown />, displays a message with generic error details

Form

• <InputAutocomplete />, creates a drop-down list of options to select from
• <InputCharacter />, creates a series of buttons to select a single character
• <InputDateTime />, creates an input with a popout for binding date and time values
• <InputDuration />, creates an input with a popout for binding duration values
• <InputFlaggedEnum />, creates a series of checkboxes for bitmasked enum types
• <InputPassword />, creates an input for entering passwords
• <InputNumberPad />, creates a keyboard style number pad for numeric values
• <InputRadioGroupObject />, creates a radio group with the provided option list
• <InputSelectEnum />, creates a select list for enum types
• <InputSelectObject />, creates a select list for object types
• <InputSwitch \>, creates a sliding on off switch with an underlying checkbox
• <Label />, creates a label to display with form inputs

Helpers

• <Loader />, displays a loading screen with a progress meter and message
• <ThemeSelector />, toggles between dark and light CSS themes (requires JavaScript file and both CSS stylesheets in index.html)
• <TitleBlock />, displays a banner accross the top of the screen with some text

Layout

• <Hero />, creates an imposing hero banner to showcase something
• <Level /> and <LevelItem />, displays a multi-purpose horizontal level
• <MediaObject />, creates a media object prevalent in social media interfaces

Usage

Basic Example

The following example provides a complete use case. This example makes use of the most basic configuration.

In your index.html file add the following line. You must do this even if you just want to use the components, they need this too.

This will link the CSS style pack and Google Material Symbols icon font.

Next, add one of the components or use some of the styles in your own components.

Dark Theme Example

To use the dark theme, just add a secondary stylesheet reference in your index.html. The theme can automatically be selected based on the preference of the user. Changing between the styles can be done easily with an IJSRuntime.

There are 5 helper methods in the bundled JavaScript file.

• easyBlazorBulma.IsOsDarkMode, checks to see if dark mode is currently enabled
• easyBlazorBulma.ToggleStyleSheet, enables or disables the element with the matching id
• easyBlazorBulma.HasStorage, tests to see if browser storage is available
• easyBlazorBulma.WriteStorage, saves the provided value to browser storage
• easyBlazorBulma.ReadStorage, retrieves the specified value from browser storage

Additionally, you can use the <ThemeSelector /> component to display a button that will toggle between themes. By default it applies the .navbar-item CSS class, if you provide another class this will override it. Simply including this component anywhere in your display will automatically load the correct theme when your app starts.

Icons

To use an icon just add a <span> with the desired icon text and the .material-icons CSS class. The sample below will produce the magnifier glass icon. An icon reference is available at Google Fonts.

Build Details

Frameworks

• .NET 6.0
• .NET 7.0
• .NET 8.0

External Libraries

Authors

• NF Software Inc.

License

This project is licensed under the MIT License - see the LICENSE file for details

Acknowledgments

Thank you to:

• Kmg Design for the project icon