MoBrix-ui shared properties
Summary
Props table
Parameter |
Type |
Default |
|---|---|---|
string |
/ |
|
string |
/ |
|
boolean |
false |
|
boolean |
false |
|
string |
/ |
|
boolean |
true |
|
CSSProperties |
/ |
|
boolean |
false |
|
boolean |
true |
|
fade-in | slide-in-left | slide-in-right | slide-in-top | shake |
/ |
|
boolean |
true |
|
boolean |
true |
|
boolean |
false |
|
boolean |
false |
|
(keyEvent : any) => void |
/ |
|
() => void |
/ |
|
() => void |
/ |
|
Record |
/ |
|
boolean |
true |
|
string |
/ |
|
number | string |
/ |
Props list
key
Type |
Default |
|---|---|
string |
/ |
React key, the standard key parameter
className
Type |
Default |
|---|---|
string |
/ |
custom className applied on main container
dark
Type |
Default |
|---|---|
boolean |
false |
Enable/disable dark mode
hide
Type |
Default |
|---|---|
boolean |
false |
Hide/show component
id
Type |
Default |
|---|---|
string |
/ |
id parameter (for styling/testing purpose, to easily find the component into the DOM)
shadow
Type |
Default |
|---|---|
boolean |
true |
Enable/disable shadow behind component
style
Type |
Default |
|---|---|
CSSProperties |
/ |
Css inline properties applied on main container
unstyled
Type |
Default |
|---|---|
boolean |
false |
If true, no standard MoBrix-ui styles will be applied on the components (useful for example, with image buttons)
animated
Type |
Default |
|---|---|
boolean |
true |
Enable/disable component animations
animation
Type |
Default |
|---|---|
fade-in | slide-in-left | slide-in-right | slide-in-top | shake |
/ |
If animated=true, this parameter specifies which animation is used when component is rendered
background
Type |
Default |
|---|---|
boolean |
true |
Enable/disable component background
hover
Type |
Default |
|---|---|
boolean |
true |
Enable/disable component hover standard styles
active
Type |
Default |
|---|---|
boolean |
false |
Enable/disable component click standard styles
disabled
Type |
Default |
|---|---|
boolean |
false |
If true, disable the component. The effect may vary depending on the component type
onKeyDown
Type |
Default |
|---|---|
(keyEvent : any) => void |
/ |
Custom callback triggered when a key is pressed while using the component (for example, when writing text inside an Input component).
onFocus
Type |
Default |
|---|---|
() => void |
/ |
Custom callback triggered when the component get the focus (for example, through tab key)
onFocusLost
Type |
Default |
|---|---|
() => void |
/ |
Custom callback triggered when the component lose the focus (for example, when user clicks outside it)
props
Type |
Default |
|---|---|
Record |
/ |
Custom additional properties, applied to the component
a11y
Type |
Default |
|---|---|
boolean |
true |
Enable/disable accessibility features
a11yLabel
Type |
Default |
|---|---|
string |
/ |
If a11y = true, is used as aria-label accessibility parameter
tabIndex
Type |
Default |
|---|---|
number | string |
/ |
Regular tabIndex a11y parameter. If a11y = true, this parameter is passed as tabIndex prop to the component (if not set, its value will be 0). If a11y = false, it is set to -1 (so the component is not focusable through tab key`)