import { Spinner } from "@chakra-ui/react"
const Demo = () => {
return <Spinner size="sm" />
}
用法
¥Usage
import { Spinner } from "@chakra-ui/react"<Spinner />示例
¥Examples
尺寸
¥Sizes
使用 size 属性更改加载控件的大小。
¥Use the size prop to change the size of the spinner.
import { HStack, Spinner } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="5">
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />
</HStack>
)
}
颜色
¥Colors
使用 colorPalette 属性更改旋转器的配色方案。
¥Use the colorPalette prop to change the color scheme of the spinner.
import { Spinner, Stack } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
const Demo = () => {
return (
<Stack gap="2" align="flex-start">
{colorPalettes.map((colorPalette) => (
<Stack
align="center"
key={colorPalette}
direction="row"
gap="10"
px="4"
>
<Spinner
size="sm"
color="colorPalette.600"
colorPalette={colorPalette}
/>
<Spinner
size="md"
color="colorPalette.600"
colorPalette={colorPalette}
/>
<Spinner
size="lg"
color="colorPalette.600"
colorPalette={colorPalette}
/>
</Stack>
))}
</Stack>
)
}
自定义颜色
¥Custom Color
使用 color 属性将自定义颜色传递给旋转器。
¥Use the color prop to pass a custom color to the spinner.
import { Spinner } from "@chakra-ui/react"
const Demo = () => {
return <Spinner color="teal.500" size="lg" />
}
轨道颜色
¥Track Color
使用 --spinner-track-color 变量更改旋转器轨道的颜色。
¥Use the --spinner-track-color variable to change the color of the spinner's
track.
import { Spinner } from "@chakra-ui/react"
export const SpinnerWithTrackColor = () => (
<Spinner
color="red.500"
css={{ "--spinner-track-color": "colors.gray.200" }}
/>
)
自定义速度
¥Custom Speed
使用 animationDuration 属性更改旋转器的速度。
¥Use the animationDuration prop to change the speed of the spinner.
import { Spinner } from "@chakra-ui/react"
export const SpinnerWithCustomSpeed = () => (
<Spinner color="blue.500" animationDuration="0.8s" />
)
粗细
¥Thickness
使用 borderWidth 属性更改旋转器的粗细。
¥Use the borderWidth prop to change the thickness of the spinner.
import { Spinner } from "@chakra-ui/react"
export const SpinnerWithCustomThickness = () => (
<Spinner color="blue.500" borderWidth="4px" />
)
标签
¥Label
编写带有标签的加载控件，以提供更多上下文。
¥Compose the spinner with a label to provide additional context.
Loading...
import { Spinner, Text, VStack } from "@chakra-ui/react"
const Demo = () => {
return (
<VStack colorPalette="teal">
<Spinner color="colorPalette.600" />
<Text color="colorPalette.600">Loading...</Text>
</VStack>
)
}
叠加
¥Overlay
组合旋转器与 AbsoluteCenter 组件，使其叠加在另一个组件之上。
¥Compose spinner with the AbsoluteCenter component to overlay the spinner on
top of another component.
Some heading text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac consectetur libero, id ultricies urna. Sed ac consectetur libero, id fames ac ante ipsum primis in faucibus.
import { Box, Center, Heading, Spinner, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Box position="relative" aria-busy="true" userSelect="none">
<Heading>Some heading text</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
consectetur libero, id ultricies urna. Sed ac consectetur libero, id
fames ac ante ipsum primis in faucibus.
</Text>
<Box pos="absolute" inset="0" bg="bg/80">
<Center h="full">
<Spinner color="teal.500" />
</Center>
</Box>
</Box>
)
}
属性
¥Props
根元素
¥Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
size | 'md' | 'inherit' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'The size of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |