Block UI
Last updated
Last updated
Welcome to the svyBlockUI wiki!
svyBlockUI is a simple service to block the UI either with a message and/or a spinner. The service can be used to let the user know that a certain operation may take a while for example.
The UI is blocked by an overlay that prevents the user from clicking anywhere in the background while the UI is blocked. The services provides 11 different spinners and the possibility to update the message during a process
Here is a screenshot of a blocked UI with message and the "Tree bounce" spinner.
In NGClient2 , we use a different library for svyBlockUI implementation. The styling of the new component is different than NGClient1, the UI customizations are currently not available currently in NGClient2 as those should be done via CSS. The classes to use are: block-ui-wrapper (all overlay), loader (child class for spinner implementation) and message (child class for message).
Table of contents
The service has the following properties:
Blocks the UI, optionally showing the given message.
Params
Returns void
Stops (hides) all UI blockers.
Params none
Returns void
Updates the message shown
Params
Returns void
| Property | Type | Default | Description |
|---|---|---|---|
| Method | Params | Return | Description |
|---|---|---|---|
| Type | Name | Description | Required |
|---|---|---|---|
| Type | Name | Description | Required |
|---|---|---|---|
spinnerBgColor
String
null
Color for most of the available spinners (it does not work for "Circle", "Cube grid", "Fading circle" and "Folding cube")
overlayColor
String
#ffffff
The color of the overlay (default is white)
overlayOpacity
Number
0.5
The opacity of the overlay (default is 50%)
messageStyleClass
String
null
Style class of the message container; if set, properties from that style class are applied.
spinner
String
null
The name of the spinner to show; one of "Rotating plane", "Double bounce", "Wave", "Wandering cubes", "Pulse", "Chasing dots", "Three bounce", "Circle", "Cube grid", "Fading circle", "Folding cube"
message:String,delay:Number
Blocks the UI, optionally showing the given message
Stops (hides) all UI blockers
message:String
Updates the message shown
String
message
The message to show; when null, no message will be shown.
Optional
Number
delay
The wait time before showing the message. Ideal for when an operation may complete quickly, in which case blocking might not show
Optional
String
message
The message to show
Required
