Components

Component

Float

Places floating content inside a positioned frame.

ReactReact Native4 props
PreviewReact
New

Anchored content

Imports

import { Float } from "@hozorica/hods-react";
import { Float } from "@hozorica/hods-react-native";

Props

PropTypeDescription
placement *top-start | top-center | ...Nine-point placement value.
offsetXDimensionToken | number | 0Horizontal offset.
offsetYDimensionToken | number | 0Vertical offset.
zIndexnumber | stringStacking order.

Platform Support

React

Absolute positioning with transform centering.

React Native

Absolute wrapper positioning; middle placements depend on parent size.

Usage

<Float placement="bottom-end" offsetX="x3" offsetY="x3"><ActionButton>Save</ActionButton></Float>

Notes

  • Parent must be positioned relative on web.
  • RN middle placement uses a full-size absolute wrapper.