Floating
Floating is a container that floats over the stage.
When to use
Use it for what floats over the stage: a search, the navigation, a credit line, a small floating pane. A panel beside the stage is a Panel. It takes only its position from outside. Without a position it stands in the flow of a place that is already positioned, such as the content of a Dropdown with bare.
Props
| Prop | Default | Description |
|---|---|---|
top | The distance to the top: a gap step, 0 or a length | |
right | The distance to the right, likewise | |
bottom | The distance to the bottom, likewise | |
left | The distance to the left, likewise | |
children | required | The content |
Contract
It has the panel color and one strong line, no shadow, and floats on the floating layer. It is placed absolutely in its frame, which must be a positioned element; a step name (2xs to xl) is that gap step, and any other string is a CSS length. Pinned, it is no wider than the frame less the left and right sides given as steps (or 0); a side given as another length is the application's own and is not subtracted. Two Floatings that would overlap are the application's layout to solve. With no side given it stands in the flow, fills its place and stacks its content in a column, so that text wraps inside the frame. It has no padding: list items hold their own, and text goes in a Block. A control without a line or a surface placed directly in it (a ghost button, alone or in a Row as a bar) is laid out at its reach, the height of a small button, and keeps its width, so the Floating holds its whole hit area and its line never cuts it. In a browser without container style queries (Firefox before 151) the hit area reaches across the line instead; it is still pressed as a whole.