Skip to content

Home

Jump to bottom
Imre Toth edited this page Jan 22, 2022 · 73 revisions

Welcome to the blazor-components wiki. Below you can read about Extension and component ideas.

Planned Extensions:

  • Blazor WebAssembly browser console log: logs to the Browser's Console window.
  • Server hosted Blazor browser console log: logs to the Browser's Console window.
  • Browser Storages: reads/writes JSON serialized data to browser storages, with date and optional expiry.
    • Local Storage
    • Session Storage
    • Cookies
    • Cache Storage
  • SEO (Search Engine Optimization) package to simplify HTML Head updates.
  • Analytics for tracking Blazor app usage (Google)

Planned UI Components:

  • Debounce: delaying onChanged event on HTML inputs:
    • DebounceInput
    • DebounceInputText
    • DebounceTextArea
    • DebounceInputTextArea
  • JS common components:
    • OutsideClickHandler
    • Element extensions
    • Scroll page in list/text/etc.
      • Sticky scroll to page top/end components
    • Focus JS
    • Resize JS
    • Clipboard JS
    • Browser Lang JS
    • GEO JS (Geolocation features, GPS access)
    • Media JS (Microphone, camera access)
    • Head JS
    • Browser time simple: new Date();
    • Browser color theme dark/light mode, etc.
    • Browser History JS
  • Typeahead input: typeahead input with customizable templated dropdown, multiselect, etc.
    • TypeaheadInput
    • TypeaheadInputText
  • Permalink control: navigation service and wrapper to generate and scroll to element.
  • Timer Control: Wrapper around Timer with: delay, tick, reoccurre (exactNumber|Forewer), ElapsedEvent
  • Loading:
    • Button: disabled button with customized animation and overlay until a specified Async operation finished.
    • Page: page overlay with loading content
    • Element: overlay wrapper with content and loading content
  • Notifications: UI notification controls
    • Alert: with title and content, close X button also configurable with TimerControl to auto close
    • HTML5 Notification: acquire User consent and use HTML5 API to show notifications
    • Toast: with different locations (top-right, bottom, etc) custom content, customization, animations, use TimerControl to disappear
  • *Popups
    • *Tooltip: custom tooltip message on elements
    • *Popover window with custom content
  • Modal Dialog: allows to create modals (popup) with title, content and footer customizable overlay, etc.
  • CSS events: JS support for animation and transition events with injectable Services and Component wrapper
    • animation: supports 3 events add/remove
    • transition: CSS supports 1 event add/remove
  • RichTextEditor: Enables Markdown/Html enabled text editor
  • Input controls: Icon inputs (e.g. search box) max length counter limiting maximum chars for inputs and showing remaining countdown:
    • MaxLengthInput
    • MaxLengthInputText
    • MaxLengthTextarea
    • MaxLengthInputTextArea
    • *Generic input with icon: e.g. search box "magnifier" icon and "x" to clear text, "collapse" on hover etc.
    • *Star rating: with 5 stars scalable image with click rating, supports half star, etc.
  • DateTime inputs:
    • DateTime picker: input field which renders a customizable calendar control
    • Time picker: input field with time selector available
  • *Color picker: dropdown with color rendered opens a pane with named colors and HUE slider and RGB, Hex color values.
  • Dropdown with checkbox list and multiple select.
  • *Country Inputs:
    • Calling Code Picker with Flags: Phone number field with country codes and flags.
    • Country selector with flags.
    • US States selector with flags.
  • GDPR Consents: "This site uses cookies" banner and popup with Accept/Reject and value should be stored in browser storage.
    • Simple banner at page bottom/top with Accept/Reject
    • Overlay with popup with toggles and detailed cookies info
  • *Drag&Drop: support for drag and drop in Blazor.
  • Toggle:
    • Switch: Razor toggle switch for bool value (circle, rounded, square) CSS background color and could be disabled.
    • Button: Razor toggle button for bool value with customizable Content, CSS background color and could be disabled.
    • Button Group: Razor container for Toggle Buttons. It allows only 1 Checked button.
  • Tab: customizable tab control with multiple tabs and custom content.
  • Collapse:
    • Collapse customizable control with custom content and configurable animation.
    • Collapse Group container for Collapse control to allow only 1 element to collapsed at once.
  • Image components:
    • Carousel: component to show images automatically (or manual) sliding, edge or count icon clickable. Support navigation if URLs provided.
    • Image view: single or multi image viewer/(auto)slider. When clicked image should be magnified...
    • MultiImage Uploader: multi select with preview, reordering, edit, delete... Size limit support with image processing (resize, reduce if it is possible)...
  • Ad control: wrap advertisement scripts and HTML elements, etc.
  • *Maps components: wrapping features to .Net Blazor components which supports: paths, pins, clusters, events, etc.
    • Google maps Static and JavaScript API maps.
    • *Bing maps
    • *Mapbox
  • Breadcrumb: breadcrumb navigation service and Link component.
  • Grid
  • Confetti: https://www.cssscript.com/confetti-falling-animation/
  • *Advanced EditForm: autosave, prompt on navigation, etc.

Known problems and potential improvements:

  • Server hosted Blazor browser console log: it does not work with JS, should be open a SignalR channel and receive all logs from server.
  • Debounce: Timer code is written in 3 times since Component cannot inherit from 2 base classes. Potential idea to create 1 base component with RenderFrangement as input/inputText, etc.
  • MaxLenght: Logic is written in 3 times since Component cannot inherit from 2 base classes.
  • Loading:
    • Set/Reset might be better to set with public property as a Parameter. Deprecate public methods to avoid using of @ref=""
  • ModalDialog:
    • Animate: has some problems it is CSS property and timer is not correct
    • Focus: refocusing previous element only works with Id. see: https://github.com/dotnet/aspnetcore/issues/26496
    • Open/Close might be better to set with public property as a Parameter. Deprecate public methods to avoid using of @ref=""
  • Typeahead:
  • Permalink control:
    • Link icon should have Tooltip to show "Copy link"
  • Toggle:
    • Switch and Button should have Tooltip support.
  • Toggle:
    • Tabs should have Tooltip support.

* Currently in progress

Clone this wiki locally