import { CloseButton } from "@chakra-ui/react"
const Demo = () => {
return <CloseButton />
}
用法
¥Usage
import { CloseButton } from "@chakra-ui/react"<CloseButton />示例
¥Examples
尺寸
¥Sizes
使用 size 属性更改关闭按钮的大小。
¥Use the size prop to change the size of the close button.
import { CloseButton, For, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="4" wrap="wrap">
<For each={["2xs", "xs", "sm", "md", "lg", "xl"]}>
{(size) => <CloseButton variant="outline" size={size} />}
</For>
</HStack>
)
}
变量
¥Variants
使用 variant 属性更改关闭按钮的外观。
¥Use the variant prop to change the appearance of the close button.
import { CloseButton, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
<CloseButton variant="ghost" />
<CloseButton variant="outline" />
<CloseButton variant="subtle" />
<CloseButton variant="solid" />
</HStack>
)
}
自定义图标
¥Custom Icon
将自定义图标传递给 CloseButton 组件的 children 。
¥Pass the custom icon to the children of the CloseButton component.
import { CloseButton } from "@chakra-ui/react"
import { HiX } from "react-icons/hi"
const Demo = () => {
return (
<CloseButton variant="ghost" aria-label="Close">
<HiX />
</CloseButton>
)
}
属性
¥Props
| Prop | Default | Type |
|---|---|---|
spinnerPlacement | 'start' | 'start' | 'end' | undefinedThe placement of the spinner |
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
size | 'md' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'The size of the component |
variant | 'solid' | 'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain'The variant of the component |
loading | boolean | undefinedIf `true`, the button will show a loading spinner. | |
loadingText | React.ReactNode | undefinedThe text to show while loading. | |
spinner | React.ReactNode | undefinedThe spinner to show while loading. | |
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. |