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 |
| 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 |
| 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 |
| 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 |
| 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();