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
Actions
Name |
Description |
File |
Collapsible.razor |
Collapsible |
Link |
Listeners
Name |
Description |
File |
SwipeListener.razor |
Swipe Listener for mobile devices |
Link |
Ions
Name |
Figma Component |
File |
Serp_Image_Icon.razor |
ions/serp-img (Icon) |
Link |
Serp_Image_Round.razor |
ions/serp-img (Round image) |
Link |
Serp_Image_Rect.razor |
ions/serp-img (Rectangle image) |
Link |
Radio.razor |
ions/radio |
Link |
Checkbox.razor |
ions/checkbox |
Link |
Info_Bar_Element.razor |
ions/info-bar-element |
Link |
Label
Name |
Figma Component |
File |
Label.razor |
ions/label |
Link |
Label_Parking.razor |
ions/label-parking |
Link |
Atoms
General
Name |
Figma Component |
File |
Card_Background.razor |
atoms/card-background |
Link |
Coffee_Coin.razor |
atoms/coffeecoin |
Link |
Dropdown_Mainframe_Element.razor |
atoms/Dropdown Mainframe Element |
Link |
Dropdown_Mainframe_Head.razor |
atoms/Dropdown Mainframe Head |
Link |
Dropdown_Mainframe_Indicator.razor |
atoms/Dropdown Mainframe Indicator |
Link |
Form_Label.razor |
atom/form-label |
Link |
Input_Notification.razor |
atoms/input-notification |
Link |
List_Item.razor |
atoms/list-item |
Link |
Location_Info.razor |
atoms/locationinfo |
Link |
Main_Menu_Tab_Desktop.razor |
atoms/main-menu-tab (Desktop) |
Link |
Main_Menu_Tab_Mobile.razor |
atoms/main-menu-tab (Mobile) |
Link |
Nav_Tab.razor |
atoms/nav-tabs |
Link |
Navigation_Tab.razor |
atoms/navigation-tab |
Link |
Page_Indicator.razor |
atoms/pageindicator |
Link |
Profile_Pic.razor |
atoms/profilepic |
Link |
Searchbar.razor |
atoms/searchbar |
Link |
Searchbar_Single.razor |
atoms/searchbar-deprecated (Round) |
Link |
Site_Button.razor |
atoms/site |
Link |
Site_Tag.razor |
atoms/site-tag |
Link |
Tab.razor |
atoms/tab |
Link |
Tag.razor |
atoms/tag |
Link |
Toggle.razor |
atoms/toggle |
Link |
Weather_Info.razor |
atoms/weather-info |
Link |
Free_Occupied_Indicator.razor |
atoms/free-occupied-indicator |
Link |
Link_Mainframe_Indicator.razor |
atoms/mainframe-accordeon-link-indicator |
Link |
Location_Info_Item.razor |
- |
Link |
Name |
Figma Component |
File |
Button.razor |
atoms/button |
Link |
ButtonCircleTransparent32.razor |
button/circle-transparent-32px |
Link |
Name |
Figma Component |
File |
Form_Dropdown_Selection.razor |
atoms/form/dropdown |
Link |
Form_Number_Picker.razor |
actionelement/numberpicker |
Link |
Form_Text_Input.razor |
atoms/form/text |
Link |
Ions
Label
Name |
Figma Component |
File |
Label.razor |
ions/label |
Link |
Label_Availability.razor |
ions/label (Occupied) |
Link |
Labe_Brand.razor |
ions/label (Brand) |
Link |
Labe_Grey.razor |
ions/label (Grey) |
Link |
Labe_Outline.razor |
ions/label (Outline) |
Link |
Labe_Parking.razor |
ions/label-parking |
Link |
Cards
Name |
Figma Component |
File |
Show_More.razor |
atoms/cards/show-more |
Link |
Molecules
General
Name |
Figma Component |
File |
Dropdown_App_Store.razor |
molecules/Dropdown_App_Store |
Link |
Dropdown_Body.razor |
molecules/dropdown-body |
Link |
Navigation_Tab_Group.razor |
molecules/dropdown-body |
Link |
Notification.razor |
molecules/notification |
Link |
People_Info.razor |
molecules/people-info |
Link |
Position_Request_Toggle.razor |
molecules/positionrequest-toggle |
Link |
Selectable_Category_And_Title.razor |
molecules/selectable-category-and-title |
Link |
Serp_List_Item.razor |
molecules/serp-list-item |
Link |
Tabs_Wrapper.razor |
molecules/tabs |
Link |
Toggle_Button.razor |
molecules/Toggle_Button |
Link |
Name |
Figma Component |
File |
Form_Dropdown.razor |
molecules/form/dropdown |
Link |
Form_Slider.razor |
molecules/form/slider |
Link |
Form_Text.razor |
molecules/form/text |
Link |
Form_Wrapper.razor |
- |
Link |
Text
Allows formatting of text in an uniform way.
E.g. making text uppercase or bold.
Name |
Figma Component |
File |
Text_Regular.razor |
- |
Link |
Text_Uppercase.razor |
- |
Link |
Text_ExtraBold.razor |
- |
Link |
Text_Display.razor |
- |
Link |
Text_Bold.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();