ACard

ACard is a surface container that groups related content. It renders an optional title header, a body, and an optional footer, and participates in the liquid-glass style when enabled.

Import

import { Card } from '@any-design/anyui/vue';
// React:  import { Card } from '@any-design/anyui/react';
// Svelte: import { Card } from '@any-design/anyui/svelte';

With the Vue plugin installed (app.use(AnyUI)) you can use <ACard> directly.

Basic usage

A titled card with body content in the default slot.

<template>
  <ACard title="Account">
    <p>Manage your profile, password and connected services.</p>
  </ACard>
</template>

Examples

Header and footer slots

Use the header and footer slots to fully customize those regions instead of relying on the title prop and default layout.

<template>
  <ACard width="320">
    <template #header>
      <strong>Notifications</strong>
    </template>
    <p>Choose what you want to be notified about.</p>
    <template #footer>
      <AButton type="primary" size="small">Save preferences</AButton>
    </template>
  </ACard>
</template>

Link card

Setting link renders the card as an <a>, turning the whole surface into a navigable element.

<template>
  <ACard title="Docs" link="/docs/getting-started">
    Read the getting started guide →
  </ACard>
</template>

Edge-to-edge content

Pass clean to drop the default body padding — useful when the body is itself a list, table, or image that should touch the card edges.

<template>
  <ACard title="Gallery" clean>
    <div
      style="height:120px;background:linear-gradient(135deg,var(--primary),var(--info));"
    ></div>
  </ACard>
</template>

Props

Prop	Type	Default	Description
title	String	‘’	Header title.
width	Number | String	240	Card width.
clean	Boolean	false	Remove default body padding.
link	String	‘’	Turns the card into a link (<a href>).

Slots

Slot	Props	Description
default	—	Body.
header	—	Overrides the title area.
footer	—	Footer area.

ACard

ACard 是用于聚合相关内容的卡片容器。它提供可选的标题、正文以及可选的底部区域，并在开启液态玻璃风格时自动适配。

引入

import { Card } from '@any-design/anyui/vue';
// React:  import { Card } from '@any-design/anyui/react';
// Svelte: import { Card } from '@any-design/anyui/svelte';

在 Vue 中通过 app.use(AnyUI) 全局注册后，可直接使用 <ACard>。

基础用法

带标题的卡片，正文内容通过默认插槽传入。

<template>
  <ACard title="账户">
    <p>管理你的资料、密码与已连接的服务。</p>
  </ACard>
</template>

示例

自定义头部与底部

使用 header 与 footer 插槽可以完全自定义这两个区域，而不必依赖 title 属性与默认布局。

<template>
  <ACard width="320">
    <template #header>
      <strong>通知</strong>
    </template>
    <p>选择你希望接收的通知类型。</p>
    <template #footer>
      <AButton type="primary" size="small">保存设置</AButton>
    </template>
  </ACard>
</template>

链接卡片

设置 link 后，卡片会渲染为 <a>，整个卡片变为可点击的导航元素。

<template>
  <ACard title="文档" link="/docs/getting-started">
    阅读快速上手指南 →
  </ACard>
</template>

贴边内容

传入 clean 可移除默认的正文内边距 —— 当正文本身是列表、表格或图片等需要贴边的元素时很有用。

<template>
  <ACard title="图库" clean>
    <div
      style="height:120px;background:linear-gradient(135deg,var(--primary),var(--info));"
    ></div>
  </ACard>
</template>

属性

属性	类型	默认值	说明
title	String	‘’	标题。
width	Number | String	240	宽度。
clean	Boolean	false	移除默认内边距。
link	String	‘’	使卡片成为链接（<a href>）。

插槽

插槽	作用域参数	说明
default	—	主体。
header	—	覆盖标题区域。
footer	—	底部区域。