Skip to Content
文档

浮动

用于将元素锚定到容器的边缘。

SourceStorybook
3

用法

¥Usage

Float 需要应用了 position: relative 样式的父元素。

¥Float requires a parent element with position: relative style applied.

import { Box, Float } from "@chakra-ui/react"
<Box position="relative">
  <Float>
    <div />
  </Float>
</Box>

示例

¥Examples

放置位置

¥Placement

使用 placement 属性将元素沿容器边缘定位。

¥Use the placement prop to position the element along the edges of the container.

bottom-end

3

bottom-start

3

top-end

3

top-start

3

bottom-center

3

top-center

3

middle-center

3

middle-end

3

middle-start

3

X 偏移

¥Offset X

使用 offsetX 属性沿 x 轴偏移元素。

¥Use the offsetX prop to offset the element along the x-axis.

3

Y 偏移

¥Offset Y

使用 offsetY 属性沿 y 轴偏移元素。

¥Use the offsetY prop to offset the element along the y-axis.

3

偏移

¥Offset

使用 offset 属性沿两个轴偏移元素。

¥Use the offset prop to offset the element along both axes.

3

头像

¥Avatar

以下是将 Float 组件与 Avatar 组件组合的示例。

¥Here's an example of composing a Float component with an Avatar component.

New

属性

¥Props

PropDefaultType
placement 'top-end'
| ConditionalValue< | 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start' | 'bottom-center' | 'top-center' | 'middle-center' | 'middle-end' | 'middle-start' > | undefined

The placement of the indicator

offsetX
SystemStyleObject['left'] | undefined

The x offset of the indicator

offsetY
SystemStyleObject['top'] | undefined

The y offset of the indicator

offset
SystemStyleObject['top'] | undefined

The x and y offset of the indicator

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Previous

弹性

Next

网格