FloatingBox
This component is used to make a dropdown or a small popup
FloatingBox is a great and convenient way to create a dropdown on the page. It requires an element around which positioning will occur.
To control the visibility of the FloatingBox you have to use conditional rendering. When FloatingBox is exist on the page - it visible. You should provide closing logic in onClose
callback.
Under the hood
Altrone uses popper.js
dependency to place a popup on the page.
By default, we use 'auto' placement for any FloatingBox component. But you can change this via placement property. Also Altrone uses some modificators for the popup, like offset, sameWidth, preventOverflow and beforeWrite. You cannot add any other popper modificators to FloatingBox.
But you can use some custom popper settings via popperProps property. Read Popper.js documentation to get more information about this.
Closing a popup
By default, each FloatingBox closes when the user clicks outside the FloatingBox. But, there are some properties to change this behaviour.
Property closeOnAnotherFloatingBoxClick
allows to disable closing when user clicks on another FloatingBox. This is useful when you have FloatingBoxes inside of your FloatingBox (for instance, when you use Select or DatePicker).
For more complicated cases you can use preventClose
props. When you have FloatingBox on the page it listens all user clicks. When user clicks somewhere, FloatingBox trigger preventClose
function. If user clicked outside the FloatingBox but preventClose
function returned true
the popup won't be closed.
Mobile devices
There are two ways how to display FloatingBox on mobile devices: default
and as modal
. Use values from FloatingBoxMobileBehaviour
enum to set mobileBehaviour
property.
When variant is default
, the popup on mobile devices looks exactly the same as on desktop. But when you choose modal
it will be rendered as Modal.
Some popups on mobile devices will be more convenient in a display format as modal than popup. Don't forget to set this property for some FloatingBox.
FloatingBoxMobileBehaviour
Altrone Options
In Altrone 2.2 FloatingBox got a new configuration options (read more). To achieve this, you can leverage floatingBox.offset
and floatingBox.windowOffset
to set offset between this floating box and parent element or window.
Properties
Property | Type | Description |
---|---|---|
|
| The DOM element around which positioning will occur. |
|
| Callback fires when FloatingBox is ready to close |
|
| Space (in px) between the target element and the popup. Default value is |
|
| Side of placement. Default value is |
|
| Extra parameters for popper.js Deprecated . Will be removed in 3.0 |
|
| The popup has the same width as the target element. Default value is |
|
| Minimum width of the popup. Works only with |
|
| Maximum height of the popup. Default value is |
|
| If this is true then you popup will be placed in the root |
|
| Via this prop you can prevent closing in some cases. Default value is |
| Control the appearance of the popup on mobile devices. Default value is | |
|
| If this is true, then when you click on another popup other popup won't be closed. This is useful for cases when you have selects or any other FloatingBoxes inside your popup. Default value is |
|
| Surface of the popup. Default value is This property is available only in 2.0 and later |
|
| Elevation of the popup. Default value is This property is available only in 2.0 and later |
|
| Custom CSS class |
History
Altrone 2.2
:marked
popperProps
as deprecated. Will be removed in 3.0added
offset
config propadded
windowOffset
config prop
Altrone 2.0
:added
surface
propertyadded
elevation
propertyadded offsets from window boundaries
Altrone 1.0
: initial release
Last updated