After install, you can use all of the Bulma styles, along with those of the extension packages on your own components. You may want to store a copy of the pre-compiled CSS files somewhere in your solution so that Visual Studio can use Intellisense to give you CSS class recommendations. You will also be able to use the .material-icons CSS class to use any of the Material Symbols. The icon font will also be updated regularly, just let me know if there are any missing and I can do an update.

Finally, you can use any of the pre-built components here to simplify use of the Bulma framework. Items such as <Tabs />, <Panel />, or <ProgressBar /> will all be available. There is a list below, eventually all items in the Bulma documentation will be added. If you need one of the missing ones either do a Pull Request or let me know and I may have time.

Installation

To use this library:

• Clone a copy of the repository
• Reference the NuGet package
• Try it on Android with the APK file (see releases)
• Try it on Windows with the Microsoft Store App or MSIX package (see releases)

Features

• 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)
• Minimal JavaScript

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
• <Clock />, creates a live updating clock display
• <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
• <NavigationButtons />, creates Previous and Next buttons for navigating between pages
• <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
• <ZoomSelector />, creates a drop-down list of zoom levels to select from and apply to a target element

Elements

• <BooleanIcon />, creates an icon with either a check or 'X'
• <ButtonBase />, allows easily creating standard buttons
• <Calendar />, creates a grid style calendar to display dates and schedule items
• <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
• <WeekScheduler />, creates a weekly scheduler to display events

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
• <InputSelectObject />, creates a select list for object types
• <InputSelectMultipleObject />, creates a select list for selection of multiple 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
• <MarkupViewer />, creates a viewer for displaying HTML markup safely
• <MediaObject />, creates a media object prevalent in social media interfaces
• <ThreeColumns />, creates a simple three column layout
• <TruncatedText />, creates a block of text that is truncated after a set number of characters
• <TwoColumns />, creates a simple two column layout

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 several helper methods in the bundled JavaScript file. The recommendation is to use the extension methods provided in the easy_blazor_bulma namespace to call these functions.

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 8.0
• .NET 9.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