Basic components for developing modules used in infsoft's LocAware One application
Get Started
$ dotnet add package Infsoft.WPE.App.UIComponentsReadme
Workplace Experience (WPE 3.0) Components Library for UI
This library contains common components used for displaying data.
Managers
| Name | Description | File |
|---|---|---|
| IMouseManager.cs | Can be used to subscribe to mouse click events and retrieve information about clicked dom elements | Link |
| IScreenSizeManager.cs | Can be used to subscribe to window size changes | Link |
Helpers
| Name | Description | File |
|---|---|---|
| DelayedCallHelper.cs | Can be used to delay changes | Link |
| InputDebounceHelper.cs | Can be used to delay string inputs from input fields | Link |
Components
Atoms
| Name | Figma Component | File |
|---|---|---|
| MetaListItem.razor | atoms/meta-list-item | Link |
| SelectionListItem.razor | atoms/selection-list-item | Link |
| Searchbar.razor | atoms/searchbar | Link |
| NavTab.razor | atoms/nav-tab | Link |
| LinkIndicator.razor | atoms/link-indicator | Link |
| FreeOccupiedIndicator.razor | - | Link |
| Tag.razor | atoms/tag | Link |
| ContentBoxTabButtonGroup.razor | atoms/contentbox-tab-button-group | Link |
Buttons
| Name | Figma Component | File |
|---|---|---|
| Buttons.razor | atoms/button | Link |
| PrimaryButton.razor | atoms/button (Primary) | Link |
| SecondaryButton.razor | atoms/button (Secondary) | Link |
| TertiaryButton.razor | atoms/button (Tertiary) | Link |
| ProgressButton.razor | atoms/progress-button | Link |
PageElements
| Name | Figma Component | File |
|---|---|---|
| PaginationDot.razor | atoms/pagination-dot | Link |
Forms
| Name | Figma Component | File |
|---|---|---|
| FormDropdownSelection.razor | atoms/form/dropdown | Link |
| FormNumberPicker.razor | - | Link |
| FormTextInput.razor | atoms/form/text | Link |
| FormDateOnlyInput.razor | - | Link |
| FormDateTimeInput.razor | - | Link |
| FormLabel.razor | - | Link |
| FormTimeOnlyInput.razor | - | Link |
| FormToggleButtonInput.razor | - | Link |
| FormCheckboxGroup.razor | atoms/form/checkbox-group | Link |
| FormCheckbox.razor | atoms/form/checkbox | Link |
| FormMultiTextInput.razor | - | Link |
General
| Name | Figma Component | File |
|---|---|---|
| Icon.razor | - | Link |
| PageableContent.razor | - | Link |
SwipeComponents
| Name | Figma Component | File |
|---|---|---|
| SwipeComponent.razor | - | Link |
| SwipeComponentPage.razor | - | Link |
Login
| Name | Figma Component | File |
|---|---|---|
| LoginOptionButton.razor | - | Link |
| LoginSelectionOverlay.razor | - | Link |
| LoginInputContainer.razor | - | Link |
| LoginVoucherDialog.razor | - | Link |
Texts
| Name | Figma Component | File |
|---|---|---|
| Text.razor | - | Link |
| TextBold.razor | - | Link |
| TextDisplay.razor | - | Link |
| TextExtraBold.razor | - | Link |
| TextRegular.razor | - | Link |
| TextUppercase.razor | - | Link |
Ions
| Name | Figma Component | File |
|---|---|---|
| SerpImageIcon.razor | ions/serp-img (Icon) | Link |
| SerpImageRound.razor | ions/serp-img (Round image) | Link |
| SerpImageRect.razor | ions/serp-img (Rectangle image) | Link |
| Radio.razor | ions/radio | Link |
| Checkbox.razor | ions/checkbox | Link |
| MetaInfoElement.razor | ions/meta-info-element | Link |
| ContentBoxTabButton.razor | ions/contentbox-tab-button | Link |
Labels
| Name | Figma Component | File |
|---|---|---|
| Label.razor | ions/label | Link |
| LabelAvailability.razor | ions/label (Free & Occupied) | Link |
| LabelBrand.razor | ions/label (Brand) | Link |
| LabelGrey.razor | ions/label (Grey) | Link |
| LabelOutline.razor | ions/label (Outline) | Link |
| LabelParking.razor | ions/label-parking | Link |
Molecules
| Name | Figma Component | File |
|---|---|---|
| ListItem.razor | molecules/list-item | Link |
| ShowMore.razor | atoms/cards/show-more | Link |
| LocationInfo.razor | molecules/location-info | Link |
| LocationInfoSmall.razor | molecules/location-info-small | Link |
| ProgressButtonGroup.razor | molecules/progress-button-group | Link |
Dropdowns
| Name | Figma Component | File |
|---|---|---|
| SortDropdown.razor | molecules/sort-dropdown | Link |
| FilterDropdown.razor | molecules/filter-dropdown | Link |
| DropdownBody.razor | molecules/dropdown-body | Link |
| MultiSelectDropdownBody.razor | molecules/dropdown-body | Link |
| SingleSelectDropdownBody.razor | molecules/dropdown-body | Link |
PageElements
| Name | Figma Component | File |
|---|---|---|
| PageIndicator.razor | molecules/page-indicator | Link |
Forms
| Name | Figma Component | File |
|---|---|---|
| FormDropdown.razor | molecules/form/dropdown | Link |
| FormSlider.razor | molecules/form/slider | Link |
| FormDateOnly.razor | - | Link |
| FormTimeOnly.razor | - | Link |
| FormDateTime.razor | - | Link |
| FormText.razor | - | Link |
| FormToggleButton.razor | - | Link |
FunctionButtons
| Name | Figma Component | File |
|---|---|---|
| FunctionButton.razor | - | Link |
| FunctionButtonsHorizontalScroll.razor | molecules/function-buttons-horizontal-scroll | Link |
Organsims
Apps
| Name | Figma Component | File |
|---|---|---|
| App.razor | - | Link |
NavEntries
| Name | Figma Component | File |
|---|---|---|
| NavEntry.razor | - | Link |
Tiles
| Name | Figma Component | File |
|---|---|---|
| Tile.razor | - | Link |
| EmptyTileContent.razor | - | Link |
| ErrorTileContent.razor | - | Link |
PoIComponents
| Name | Figma Component | File |
|---|---|---|
| PoIComponent.razor | - | Link |
Listeners
Allows to detect user interaction on the UI. E.g. detecting swipe gestures on mobile screens.
Setup
Add this at the very end of MainLayout:
<UIComponents />
Add this to Program.cs:
using Infsoft.WPE.App.UIComponents;
...
builder.Services.AddUIComponents();