# 可点击卡片

## 使用方法

`ClickableCard` 是整张卡片触发同一个动作的卡片。有 `href` 时，键盘焦点落在一个视觉上隐藏的链接上，否则落在按钮上。里面的按钮和链接仍走自己的点击。

```vue
<script setup lang="ts">
import { ClickableCard } from '@astryx-vue/core/ClickableCard'
import { Heading } from '@astryx-vue/core/Heading'
</script>

<template>
  <ClickableCard href="/settings" label="Settings">
    <Heading :level="4">
      Settings
    </Heading>
  </ClickableCard>
</template>
```

`target="_blank"` 会在新标签页打开 `href`。按住修饰键或用中键点击也一样。`elevation` 和 `variant` 传给 `Card`。

### 结构

- **容器**: 带悬停、聚焦和按下状态的可交互区域。
- **内容**: 里面的内容，可以再嵌套可交互元素。

## 示例

### 抬升

Quarterly report，用中等阴影抬起来。

```vue
<script setup lang="ts">
import { ClickableCard } from '@astryx-vue/core/ClickableCard'
import { Heading } from '@astryx-vue/core/Heading'
import { VStack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <ClickableCard elevation="med" href="#" label="Open report" :width="320">
    <VStack :gap="2">
      <Heading :level="4">
        Quarterly report
      </Heading>
      <Text color="secondary" type="body">
        A raised shadow signals the whole card is clickable, lifting it above the surrounding content.
      </Text>
    </VStack>
  </ClickableCard>
</template>
```
### 嵌套按钮

Wireless Headphones。Add to cart 是卡片里单独的按钮。

```vue
<script setup lang="ts">
import { Button } from '@astryx-vue/core/Button'
import { ClickableCard } from '@astryx-vue/core/ClickableCard'
import { Heading } from '@astryx-vue/core/Heading'
import { VStack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <ClickableCard href="#" label="Product" :width="320">
    <VStack :gap="3">
      <VStack :gap="1">
        <Heading :level="4">
          Wireless Headphones
        </Heading>
        <Text color="secondary" type="body">
          $79.99
        </Text>
      </VStack>
      <Button label="Add to cart" variant="primary" />
    </VStack>
  </ClickableCard>
</template>
```

## 属性

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `label` | `string` | - | 隐藏控件的无障碍名称。 |
| `href` | `string` | - | 卡片要去的地址。不传时改由 `click` 处理。 |
| `target` | `string` | - | `href` 的浏览上下文。`_blank` 打开新标签页。 |
| `isDisabled` | `boolean` | `false` | 卡片不再响应激活。 |
| `variant` | `CardVariant` | `'default'` | 背景变体，传给 `Card`。 |
| `elevation` | `CardElevation` | `'none'` | 静止阴影：none、low、med、high。 |
| `padding` | `SpacingStep` | - | 传给 `Card` 的内边距。 |
| `width` | `number \| string` | - | 宽度。数字按像素。 |
| `height` | `number \| string` | - | 高度。数字按像素。 |
| `maxWidth` | `number \| string` | - | 最大宽度。 |

## 事件

| 名称 | 参数 | 说明 |
| --- | --- | --- |
| `click` | `MouseEvent` | 卡片表面被激活。里面的控件不会发出这个事件。 |

## 插槽

默认插槽是卡片内容。