Infsoft.WPE.App.Components
0.1.0-next04
Prefix Reserved
See the version list below for details.
dotnet add package Infsoft.WPE.App.Components --version 0.1.0-next04
NuGet\Install-Package Infsoft.WPE.App.Components -Version 0.1.0-next04
<PackageReference Include="Infsoft.WPE.App.Components" Version="0.1.0-next04" />
paket add Infsoft.WPE.App.Components --version 0.1.0-next04
#r "nuget: Infsoft.WPE.App.Components, 0.1.0-next04"
// Install Infsoft.WPE.App.Components as a Cake Addin #addin nuget:?package=Infsoft.WPE.App.Components&version=0.1.0-next04&prerelease // Install Infsoft.WPE.App.Components as a Cake Tool #tool nuget:?package=Infsoft.WPE.App.Components&version=0.1.0-next04&prerelease
Workplace Experience (WPE) Components Library for UI
This library contains common components used for displaying data.
Components
ActionElements
These components provide user interaction elements.
Animations
These components can be used to indicate various loading states.
Atom
These small components are used in various more complex components. (Smallest parts of the UI)
Buttons
The buttons defined here are used all over the application to achieve a uniform UI.
Cards
These components are used to display content grouped in an uniform way. They provide several subcomponents like buttons or text components.
Charts
Provides components to render content in charts. Currently only a pie chart is available.
DatePicker
This component provides a date/time picker which can be used to query either for a time, date or both.
Empty
These components are used to indicate empty states in the UI. For example an empty list.
Form
These components are used all over the appication to enable the user to interact with the UI. Most components are used in forms and other input elements.
Module
These components are used to give information to the user. For example a toast notication.
Text
Allows formatting of text in an uniform way. E.g. making text uppercase or bold. Additionally a uniform control for text input is provided.
Listeners
Allows to detect user interaction on the UI. E.g. detecting swipe gestures on mobile screens.
Use the predefined colors
Simply define this function in a separate SASS file _functions.sass
in your wwwroot folder.
@function color($name, $percentage) {
@if ($percentage != null) {
@if ($percentage % 5 != 0)
{
@error "Only 5 percent steps are allowed";
}
@return var(--color-#{"" + $name}-#{$percentage});
}
@else {
@return var(--color-#{"" + $name});
}
}
This allows you to use the color steps (5 percent opacity steps) like this in your own SASS stylesheets.
@use "functions";
button {
background-color: functions.color("brand-primary");
color: functions.color("black", 10);
}
All available colors can be found below:
- black
- white
- primary-lighter
- grey-primary-light
- grey-primary-mid
- grey-primary-dark
- grey-primary-darker
- signal-red
- signal-green
- signal-yellow
- blue-active
- blue-active-dark
- yellow
- orange
- orange-popup-light
- orange-popup
- red
- purple
- blue-light
- blue-lighter
- blue-dark
- turquoise
- green
- infsoft
- grey-secondary-35
- brand-primary
- brand-primary-on-dark
- brand-primary-wcag
- brand-background-1
- brand-background-2
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net8.0
- Infsoft.WPE.App.Extensions (>= 0.1.0-next01)
- Microsoft.AspNetCore.Components.Web (>= 8.0.3)
NuGet packages (1)
Showing the top 1 NuGet packages that depend on Infsoft.WPE.App.Components:
Package | Downloads |
---|---|
Infsoft.WPE.App.Authentication.Base
Base authentication library used in platform dependent auth libraries (Infsoft.WPE.App.Authentication.Web and Infsoft.WPE.App.Authentication.Maui) for infsoft's Workplace Experience application |
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
0.1.0-next07 | 80 | 7/24/2024 |
0.1.0-next06 | 44 | 7/24/2024 |
0.1.0-next05 | 154 | 6/20/2024 |
0.1.0-next04 | 79 | 5/27/2024 |
0.1.0-next02 | 119 | 5/24/2024 |
0.1.0-next01 | 60 | 5/21/2024 |
0.1.0-next00 | 66 | 5/21/2024 |