Components Library
The components library of the Luminu Project
Background
Implements all reused components, such as
Buttons, Notification Cards, Tabs, Cards, Alerts, Layout Items, etc.
This featurerich library is used in all Luminu Projects.
Project's README
@luminu/components
Setup
Deployment
Documentation
Props
| Name |
required/default |
type |
description |
| text |
true |
String |
Sets the button's text |
| size |
false / normal |
String |
Sets the button's size (small, big) |
| type |
false / normal |
String |
Sets the button's type (success, error) |
| disabled |
false / false |
Boolean |
Sets the button's disabled state |
Seperator
Props
| Name |
required/default |
type |
description |
| mtop |
false / 5 |
Number |
Sets the top margin of the seperator |
| mbottom |
false / 5 |
Number |
Sets the bottom margin of the seperator |
Notification
Props
| Name |
required/default |
type |
description |
| message |
true |
String |
Sets the message that will be displayed |
| activity |
false / 0 |
Number |
Sets it's activity state (Increment to activate/set to negative to disable) |
| timeout |
false / 2500 |
Number |
Sets the timeout when it should fade out again |
| fontSize |
false / 24 |
Number |
Sets the font size for the notification message |
Card
Props
| Name |
required/default |
type |
description |
| highlight |
false / false |
Boolean |
Marks the card as highlighted |
Loader
Props
| Name |
required/default |
type |
description |
| mtop |
false / 0 |
Number |
Sets the top margin of the loader |
| mbottom |
false / 0 |
Number |
Sets the bottom margin of the loader |
| justifyCenter |
false / false |
Boolean |
Declares whether the loader should be aligned to the horizontal middle or not |
| size |
false / 24 |
Number |
Sets the size of the loader |
Alert
Published Events
| Name |
data |
type |
| LM_ALERT_RESPONSE |
status |
{ isSuccess: boolean, message: string, title: string } |
Props
| Name |
required/default |
type |
description |
| links |
true |
Array(TLink) |
Sets the displayed links |
| active |
false / -1 |
Number |
Sets which dropdown is pressed |
| type |
false / 'defaultLogin' |
String |
Sets the login type |
| username |
false / "" |
String |
Sets the displayed username |
| userId |
false / -1 |
Number |
Sets the user id |
| hasAvatar |
false / false |
Boolean |
If a user has an avatar his personal avatar will be displayed |
| notLoggedInAction |
false / {} |
Any |
Sets login action (View integration test for implementation) |
| dropdownItems |
false / [] |
Array |
Sets the dropdown items (View integration test for implementation) |
Props
| Name |
required/default |
type |
description |
| partners |
true |
Array(TPartners) |
Sets the actively displayed partners |
Tabs
Props
| Name |
required/default |
type |
description |
| tabs |
true |
Array(string) |
Sets the name of the displayed tabs |
| active |
false / 0 |
number |
Sets the currently active tab |
Published Events
| Name |
data |
type |
| LM_CHANGED_TAB |
index |
number |