CloseButton 关闭按钮

用于关闭对话框、抽屉与提示的按钮。

有新版本可用

刷新页面后即可使用最新功能。

<script setup lang="ts">
  import { Card, CloseButton, Heading, Inline, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Card padded class="w-full max-w-sm">
    <Inline align="start" justify="between" :wrap="false" class="gap-4">
      <Stack gap="xs">
        <Heading :level="3" size="sm">有新版本可用</Heading>
        <Text tone="muted" size="sm">刷新页面后即可使用最新功能。</Text>
      </Stack>
      <CloseButton class="-mt-1.5 -me-1.5 shrink-0" />
    </Inline>
  </Card>
</template>

vue

用法

import { CloseButton } from '@hina-ui/vue'

组件已经内置了图标与无障碍名称，因此不需要传入任何属性。默认名称为“关闭”，监听 click 事件即可。

<script setup lang="ts">
  import { CloseButton } from '@hina-ui/vue'
</script>

<template>
  <CloseButton />
</template>

vue

示例

尺寸

默认为 sm。关闭按钮通常位于标题行或者卡片的右上角，sm 与相邻文字的高度最为接近。如果界面以触摸操作为主，可以适当放大按钮。xs 用于行内的小控件内部，例如 Chip 的移除按钮。

<script setup lang="ts">
  import { CloseButton, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center">
    <CloseButton size="xs" />
    <CloseButton size="sm" />
    <CloseButton size="md" />
    <CloseButton size="lg" />
  </Inline>
</template>

vue

提示

默认不显示提示。把名称改写为更具体的动作后可以打开它，并通过 side 指定出现的方向。

<script setup lang="ts">
  import { CloseButton, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center">
    <CloseButton tooltip />
    <CloseButton label="关闭预览" tooltip side="right" />
  </Inline>
</template>

vue

不可用

设置 disabled 之后，按钮无法点击，也无法通过键盘聚焦。表单提交期间通常需要禁止关闭。

<script setup lang="ts">
  import { CloseButton } from '@hina-ui/vue'
</script>

<template>
  <CloseButton disabled />
</template>

vue

外观

组件不开放变体、色调与形状，它们固定为 ghost 变体、neutral 色调与圆形，图标固定为 X。

如果需要其他外观或者其他图标，请直接使用 IconButton。

对话框与提示

Dialog、Drawer 与 Toast 已经在标题行的右侧放置了关闭按钮，不需要重复添加。当 Dialog 与 Drawer 设置了 locked 时，内置的关闭按钮会同时被禁用。

<script setup lang="ts">
  import { Button, Dialog, Text } from '@hina-ui/vue'
</script>

<template>
  <Dialog title="导出数据" description="选择一种格式，导出当前的筛选结果。">
    <Button variant="outline" tone="neutral">打开对话框</Button>
    <template #content>
      <Text tone="muted">右上角的关闭按钮由 Dialog 内置，无需重复添加。</Text>
    </template>
  </Dialog>
</template>

vue

API

Props

属性	类型	默认值	说明
`label`	`string`	关闭	按钮的无障碍名称，同时作为提示文字
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	尺寸
`tooltip`	`boolean`	`false`	是否显示提示
`disabled`	`boolean`	`false`	是否不可用
`class`	`string`	—	追加至按钮的类名

其余属性都会传递给 IconButton，例如通过 side 指定提示的方向。