Hiding or Locking Elements
Loupe UX supports hiding and locking elements based on the value of a machine variable.
Hiding Elements
Class name: lux-hide
| Attribute | Description | Default Value |
|---|---|---|
| data-var-name-hide | Machine variable name that controls hiding the element | |
| data-hide-set | Machine value which will hide the element | true |
| data-hide-true | Class name to add to hide the element | hidden |
Class name: lux-show
| Attribute | Description | Default Value |
|---|---|---|
| data-var-name-hide | Machine variable name that controls showing the element | |
| data-hide-set | Machine value which will show the element | true |
| data-hide-true | Class name to add to hide the element | hidden |
Locking/Unlocking Elements
Class name: lux-lock
| Attribute | Description | Default Value |
|---|---|---|
| data-var-name-lock | Machine variable name that controls locking the element | |
| data-lock-set | Machine value which will lock the element | true |
| data-lock-true | Class name to add to lock the element, in addition to setting the disabled property to true | disabled |
Class name: lux-unlock
| Attribute | Description | Default Value |
|---|---|---|
| data-var-name-lock | Machine variable name that controls unlocking the element | |
| data-lock-set | Machine value which will unlock the element | true |
| data-lock-true | Class name to add to unlock the element | disabled |