<EditableControl> Component
<EditableControl> is an editable simple box layout component with built-in variants, states, and valid/invalid indicator.
Installing <EditableControl> Component
There are 2 ways to install <EditableControl> component into your react app project:
- Install the Specific Package of
<EditableControl>Component - Install the Whole Reusable-UI Component Pack, including the
<EditableControl>Component
Variant Properties
The alternative appearances of the <EditableControl> layout without changing the <EditableControl>'s functionality.
size Property
Defines the alternative size of the <EditableControl>.
The possible values are:
undefined'sm''md''lg'
Here the preview:
Preview
An <EditableControl> with sm size
An <EditableControl> with md size
An <EditableControl> with lg size
Show code
theme Property
Defines the contextual theme of the <EditableControl>.
The possible values are:
undefined'primary''secondary''success''info''warning''danger''light''dark'
Here the preview:
Preview
An <EditableControl> with primary theme
An <EditableControl> with secondary theme
An <EditableControl> with success theme
An <EditableControl> with info theme
An <EditableControl> with warning theme
An <EditableControl> with danger theme
An <EditableControl> with light theme
An <EditableControl> with dark theme
Show code
gradient Property
Activates a 3D mode of the <EditableControl>.
The possible values are:
undefined'inherit'truefalse
Here the preview:
Preview
An <EditableControl> with gradient mode
An <EditableControl> with gradient mode
An <EditableControl> with gradient mode
An <EditableControl> with gradient mode
An <EditableControl> with gradient mode
An <EditableControl> with gradient mode
An <EditableControl> with gradient mode
An <EditableControl> with gradient mode
Show code
outlined Property
Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <EditableControl>.
The possible values are:
undefined'inherit'truefalse
Here the preview:
Preview
An <EditableControl> with outlined mode
An <EditableControl> with outlined mode
An <EditableControl> with outlined mode
An <EditableControl> with outlined mode
An <EditableControl> with outlined mode
An <EditableControl> with outlined mode
An <EditableControl> with outlined mode
An <EditableControl> with outlined mode
Show code
mild Property
Activates a mild mode (mild background, contrast foreground, and contrast border) of the <EditableControl>.
The possible values are:
undefined'inherit'truefalse
Here the preview:
Preview
An <EditableControl> without mild mode
An <EditableControl> without mild mode
An <EditableControl> without mild mode
An <EditableControl> without mild mode
An <EditableControl> without mild mode
An <EditableControl> without mild mode
An <EditableControl> without mild mode
An <EditableControl> without mild mode
Show code
nude Property
Activates an nude mode (background-less, padding-less, and border-less) of the <EditableControl>.
The possible values are:
undefinedtruefalse
Here the preview:
Preview
An <EditableControl> with nude mode
An <EditableControl> with nude mode
An <EditableControl> with nude mode
An <EditableControl> with nude mode
An <EditableControl> with nude mode
An <EditableControl> with nude mode
An <EditableControl> with nude mode
An <EditableControl> with nude mode
Show code
State Properties
The conditions of the <EditableControl> behavior or functionality.
enabled Property
Defines the enabled/disabled state of the <EditableControl>.
The possible values are:
undefinedtruefalse
Here the preview:
Preview
An <EditableControl> with disabled state
An <EditableControl> with disabled state
An <EditableControl> with disabled state
An <EditableControl> with disabled state
An <EditableControl> with disabled state
An <EditableControl> with disabled state
An <EditableControl> with disabled state
An <EditableControl> with disabled state
Show code
inheritEnabled Property
Influences the <EditableControl>'s disabled state by <ancestor enabled={false}>.
The possible values are:
undefinedtruefalse
Here the preview:
Preview
An <EditableControl> with inherit enabled
An <EditableControl> with inherit enabled
An <EditableControl> with inherit enabled
An <EditableControl> with inherit enabled
An <EditableControl> with inherit enabled
An <EditableControl> with inherit enabled
An <EditableControl> with inherit enabled
An <EditableControl> with inherit enabled
Show code
readOnly Property
Defines the readOnly/mutable state of the <EditableControl>.
The possible values are:
undefinedtruefalse
inheritReadOnly Property
Influences the <EditableControl>'s readOnly by <ancestor readOnly={true}>.
The possible values are:
undefinedtruefalse
active Property
Defines the current active state of the <EditableControl>.
The possible values are:
undefinedtruefalse
Here the preview:
Preview
An <EditableControl> with active state
An <EditableControl> with active state
An <EditableControl> with active state
An <EditableControl> with active state
An <EditableControl> with active state
An <EditableControl> with active state
An <EditableControl> with active state
An <EditableControl> with active state
Show code
inheritActive Property
Influences the <EditableControl>'s active state by <ancestor active={true}>.
The possible values are:
undefinedtruefalse
Here the preview:
Preview
An <EditableControl> with inherit active
An <EditableControl> with inherit active
An <EditableControl> with inherit active
An <EditableControl> with inherit active
An <EditableControl> with inherit active
An <EditableControl> with inherit active
An <EditableControl> with inherit active
An <EditableControl> with inherit active
Show code
enableValidation Property
Activates the valid/invalid indicator of the <EditableControl>.
The possible values are:
undefinedtruefalse
isValid Property
Marks the validity status of the <EditableControl>.
The possible values are:
undefinednulltruefalse
Here the preview:
Preview
An <EditableControl> marked as neutral
An <EditableControl> marked as valid
An <EditableControl> marked as invalid
Show code
inheritValidation Property
Influences the <EditableControl>'s valid/invalid indicator by <ancestor isValid={true|false} enableValidation={true}>.
The possible values are:
undefinedtruefalse
Inherited Properties
Because <EditableControl> is made from <Control>, so all properties from <Control> are inherited.
Variables
There are several variables of <EditableControl> you can customize. Changing the variables affects all <EditableControl> instance and other components that depend on <EditableControl>.
Here the exposed variables:
- Animations
The example of accessing, modifying, & adding variables:
Show code