astryx-vue

可点击卡片

@astryxdesign/core v0.7.1 · ClickableCard

Settings

Click anywhere on this card to navigate.

使用方法 ​

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

A raised shadow signals the whole card is clickable, lifting it above the surrounding content.

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

嵌套按钮

Wireless Headphones

$79.99

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