Didn’t have a chance to announce our component bundle on this KnowledgeBase yet…

Now we released version 1.4.3. What’s new?

• HxInputDate, HxInputDateRange and HxCalendar have new MinDate and MaxDate parameters to allow customization of selectable dates in calendars (also added to Defaults to be able to customize the application-wide defaults)
• HxInputDate and HxInputDateRange have new CalendarDateCustomizationProvider which allows further customization (enabled/disabled, CssClass) of individual dates in dropdown calendars
• ⚠️ HxCalendar parameters MinYear and MaxYear replaced with the new MinDate and MaxDate parameters
• HxCalendar has new simplified month/year navigation
• HxInputDate fixed validation icon position if CalendarIcon is used
• HxInputFileCore has new HxInputFileCore.Defaults.MaxFileSize application-wide default to be able to limit maximum file size,
• HxInputFile has new HxInputFile.Defaults.InputSize application-wide default to be able to set form component size
• HxSidebar fixed ability to scroll on mobile if viewport is overlapped
• HxSidebar has new CSS variable for customising background-colour
• Updated to Bootstrap 5.1.3 and Bootstrap Icons 1.6

What is HAVIT Blazor?

HAVIT Blazor is a free open-source (MIT) component bundle build on top of Bootstrap 5. It not only covers all Bootstrap 5 components but also brings a few enterprise-level ones (e.g. HxGrid, HxInputDate, HxAutosuggest, HxInputTags) and special ones (e.g. HxGoogleTagManager).

Interactive documentation & demos – https://havit.blazor.eu

Source code – https://github.com/havit/Havit.Blazor

Forms

• HxAutosuggest – Component for single item selection with dynamic suggestions.
• HxCalendar – Basic calendar building block.
• HxInputCheckbox – Checkbox input.
• HxInputDate – Date picker. Form input component for entering a date.
• HxInputDateRange – Date range picker. Form input component for entering start date and end date.
• HxInputFile[Core] – Wraps HxInputFileCore as Bootstrap form control (incl. Label etc.).
• HxInputFileDropZone – Ready-made UX for drag&drop file upload.
• HxInputNumber – Numeric input.
• HxInputPercent – Numeric input in percentages with value normalization (0% = 0, 100% = 1.0).
• HxInputSwitch – Switch input.
• HxInputTags – Input for entering tags.
• HxInputText – Text input (also password, search, etc.)
• HxInputTextArea – Textarea.
• HxCheckboxList – Multiple choice by checkboxes.
• HxFormState – Propagates form states as a cascading parementer to child components.
• HxFormValue – Displays a read-only value in the form control visual.
• HxRadioButtonList – Select.
• HxSelect – Select – DropDownList – single-item picker.
• HxFilterForm – Edit form derived from HxModelEditForm with support for chip generators.
• HxValidationMessage – Displays a list of validation messages for a specified field.

Buttons & Indicators

• HxButtonGroup – Bootstrap ButtonGroups.
• HxButtonToolbar – Bootstrap ButtonGroups.
• HxSubmit – Submit button.
• HxDropdown – Bootstrap Dropdown.
• HxBadge – Bootstrap Badge component.
• HxChipList – Presents a list of chips as badges.
• HxIcon – Displays an icon.
• HxSpinner – Bootstrap Spinner (usually indicates operation in progress).
• HxProgressIndicator – Displays the content of the component as “in progress”.
• HxTooltip – Bootstrap Tooltip component, activates on hover.

Data & Grid

• HxGrid – Grid to display tabular data from data source.
• HxContextMenu – Ready-made context menu.
• HxPager – Pager.
• HxRepeater – A data-bound list component.

Layout & Typography

• HxAccordion – Bootstrap accordion component.
• HxAlert – Bootstrap Alert.
• HxBadge – Bootstrap Badge component.
• HxCard – Bootstrap Card component.
• HxCarousel – A slideshow component for cycling through elements—images or slides of text—like a carousel.
• HxCollapse – Bootstrap Collapse component.
• HxIcon – Displays an icon.
• HxSpinner – Bootstrap Spinner (usually indicates operation in progress).
• HxPlaceholder – Bootstrap Placeholder component, aka Skeleton.
• HxProgress – Bootstrap Progress component.
• HxProgressIndicator – Displays the content of the component as “in progress”.
• HxTooltip – Bootstrap Tooltip component, activates on hover.
• HxTabPanel – Container for HxTabs.
• HxListGroup – Bootstrap List group component.
• HxListLayout – Page layout for data presentation (usualy HxGrid with filter in HxOffcanvas).
• HxFormValue – Displays a read-only value in the form control visual (as .form-control, with label, border, etc.).

Navigation

• HxNavbar – Bootstrap 5 Navbar component – responsive navigation header.
• HxSidebar – Sidebar component – responsive navigation sidebar.
• HxNav – Bootstrap Nav component.
• HxNavLink – Bootstrap Nav component.
• HxScrollspy – Bootstrap Scrollspy component.
• HxBreadcrumb – Bootstrap Breadcrumb component. Indicates the current page’s location within a navigational hierarchy.
• HxAnchorFragmentNavigation – Compensates Blazor deficiency in anchor-fragments (scrolling to page#id URLs).
• HxTabPanel – Container for HxTabs for easier implementation of tabbed UI.

Modals & Interactions

• HxMessageBox – Component to display message-boxes.
• HxModal – Component to render modal dialog as a Bootstrap Modal.
• HxDialogBase – Base class to simplify custom modal dialog implementation.
• HxOffcanvas – Bootstrap Offcanvas component (aka Drawer).
• HxMessenger – HxToastContainer wrapper for displaying HxToast messages dispatched through IHxMessengerService.
• HxToast – Bootstrap Toast component. Not intented to be used in user code, use HxMessenger.

Special

• HxGoogleTagManager – Support for Google Tag Manager – initialization and pushing data to data-layer.

Enterprise-application template [OPTIONAL]

Beside the components there is a ready to run enterprise level application template which includes gRPC code-first communication, full layered architecture stack (Model, DataLayer, Services, …) and much more.