导入

import { CloseButton } from 'heroui-native';

用法

基础用法

CloseButton 渲染带默认样式的关闭图标按钮。

<CloseButton />

自定义图标颜色

通过 iconProps 自定义图标颜色。

<CloseButton iconProps={{ color: themeColorDanger }} />
<CloseButton iconProps={{ color: themeColorAccent }} />

自定义图标尺寸

通过 iconProps 调整图标大小。

<CloseButton iconProps={{ size: 24 }} />

自定义子节点

用自定义内容替换默认关闭图标。

<CloseButton>
  <CustomIcon />
</CloseButton>

禁用态

禁用按钮以禁止交互。

<CloseButton isDisabled />

示例

import { CloseButton, useThemeColor } from 'heroui-native';
import { Ionicons } from '@expo/vector-icons';
import { View } from 'react-native';
import { withUniwind } from 'uniwind';

const StyledIonicons = withUniwind(Ionicons);

export default function CloseButtonExample() {
  const themeColorForeground = useThemeColor('foreground');
  const themeColorDanger = useThemeColor('danger');

  return (
    <View className="flex-1 px-5 items-center justify-center">
      <View className="flex-row items-center gap-4">
        <CloseButton />
        <CloseButton iconProps={{ color: themeColorDanger }} />
        <CloseButton>
          <StyledIonicons
            name="close-circle"
            size={28}
            color={themeColorForeground}
          />
        </CloseButton>
        <CloseButton isDisabled />
      </View>
    </View>
  );
}

更多示例见 GitHub 仓库。

API 参考

CloseButton

CloseButton 继承 Button 的全部属性。默认 variant='tertiary'、size='sm'、isIconOnly=true。

prop	type	default	description
`iconProps`	`CloseButtonIconProps`	-	自定义关闭图标属性
`children`	`React.ReactNode`	-	自定义内容，替换默认关闭图标

isDisabled、className、animation、feedbackVariant 以及所有 Pressable 相关继承属性见 Button API 参考。

CloseButtonIconProps

prop	type	default	description
`size`	`number`	`20`	图标尺寸
`color`	`string`	Uses theme muted color	图标颜色

CloseButton 关闭按钮

导入

用法