xtf-card

组件说明

xtf-card 是卡片容器组件，用于承载内容分组展示。支持多种视觉变体（浮起、描边、填充、扁平、玻璃、拟物）、渐变边框、骨架屏加载态、封面图和可点击交互，适用于商品卡片、信息列表和内容模块等场景。

基础用法

1. 最简示例

通过 title 和 desc 设置卡片标题和描述，默认内容通过默认插槽传入：

vue

<template>
  <xtf-card title="商品信息" desc="以下是商品的基本信息">
    <text>商品名称：无线蓝牙耳机</text>
  </xtf-card>
</template>

2. 视觉变体

通过 variant 切换卡片视觉风格：

vue

<template>
  <view style="display: flex; flex-direction: column; gap: 24rpx">
    <xtf-card title="浮起" variant="elevated" desc="默认样式，带阴影和边框">
      <text>浮起卡片内容</text>
    </xtf-card>
    <xtf-card title="描边" variant="outlined" desc="仅边框，无阴影">
      <text>描边卡片内容</text>
    </xtf-card>
    <xtf-card title="填充" variant="filled" desc="渐变背景，无边框">
      <text>填充卡片内容</text>
    </xtf-card>
    <xtf-card title="扁平" variant="flat" desc="纯色背景，无边框无阴影">
      <text>扁平卡片内容</text>
    </xtf-card>
    <xtf-card title="玻璃" variant="glass" desc="毛玻璃效果">
      <text>玻璃卡片内容</text>
    </xtf-card>
    <xtf-card title="拟物" variant="neomorphic" desc="拟物风格阴影">
      <text>拟物卡片内容</text>
    </xtf-card>
  </view>
</template>

3. 封面图与插槽

通过 cover 插槽添加封面图，通过 footer 插槽添加底部操作区：

vue

<template>
  <xtf-card title="精选推荐" desc="今日热门商品" variant="elevated" cover-height="280rpx">
    <template #cover>
      <image
        src="https://picsum.photos/600/300?random=30"
        mode="aspectFill"
        style="width: 100%; height: 100%"
      />
    </template>
    <text>高品质无线蓝牙耳机，续航持久，音质出色。</text>
    <template #footer>
      <view style="display: flex; justify-content: space-between; align-items: center">
        <text style="color: var(--xtf-color-danger); font-weight: 700; font-size: 36rpx">¥199</text>
        <xtf-button label="立即购买" size="sm" />
      </view>
    </template>
  </xtf-card>
</template>

4. 渐变边框与加载态

通过 borderGradient 启用渐变边框，通过 loading 显示骨架屏：

vue

<template>
  <view style="display: flex; flex-direction: column; gap: 24rpx">
    <xtf-card title="渐变边框" border-gradient>
      <text>带渐变边框的卡片</text>
    </xtf-card>
    <xtf-card title="加载中" :loading="true">
      <text>内容加载中...</text>
    </xtf-card>
  </view>
</template>

5. 可点击与内边距

通过 clickable 使卡片可点击，通过 padding 控制内边距，通过 radius 控制圆角：

vue

<template>
  <xtf-card
    title="点击卡片"
    desc="点击查看详情"
    variant="elevated"
    clickable
    padding="lg"
    radius="xl"
    @click="onClick"
  >
    <text>点击此卡片触发事件</text>
  </xtf-card>
</template>

<script>
export default {
  methods: {
    onClick() {
      uni.showToast({ title: '点击了卡片', icon: 'none' })
    }
  }
}
</script>

全部属性

属性	类型	默认值	作用描述	适用范围
`title`	`String`	`''`	卡片标题	设置标题
`desc`	`String`	`''`	卡片描述文字	设置描述
`variant`	`String`	`'elevated'`	视觉变体：`'elevated'` / `'outlined'` / `'filled'` / `'flat'` / `'glass'` / `'neomorphic'`（也兼容 `'neo'`）	切换视觉风格
`elevation`	`String \| Number`	`2`	阴影层级（0~8），`elevated` 变体生效	调整阴影强度
`padding`	`String`	`'md'`	内边距：`'none'` / `'sm'` / `'md'` / `'lg'`	控制内边距
`radius`	`String \| Object`	`'lg'`	圆角：`'sm'` / `'md'` / `'lg'` / `'xl'`，或对象 `{ topLeft, topRight, bottomRight, bottomLeft }`	控制圆角
`loading`	`Boolean`	`false`	是否显示骨架屏加载态	加载中展示
`borderGradient`	`Boolean \| String`	`false`	是否启用渐变边框	渐变边框效果
`coverHeight`	`String \| Number`	`'220rpx'`	封面区域最小高度	控制封面高度
`clickable`	`Boolean`	`false`	是否可点击，启用后点击有缩放反馈	卡片可交互场景
`hoverable`	`Boolean`	`false`	是否有悬浮上浮效果（不绑定点击事件）	仅视觉提升
`customClass`	`String`	`''`	自定义类名	样式覆盖
`customStyle`	`String \| Object`	`''`	自定义样式	动态样式覆盖

事件

事件名称	触发时机	回调参数	参数说明
`click`	点击卡片时触发（需 `clickable` 为 `true`）	`(event)`	原生点击事件对象

插槽

插槽名	说明
`cover`	卡片顶部封面区域。
`header`	替换 `title` 和 `desc` 组成的头部。
默认插槽	卡片主体内容。
`footer`	卡片底部操作区。

主题说明

elevated 变体背景使用 var(--xtf-card-bg)，边框使用 var(--xtf-card-border)，阴影使用 var(--xtf-shadow-card)
outlined 变体背景使用 var(--xtf-color-surface)，边框使用 var(--xtf-color-border)
filled 变体背景为 var(--xtf-color-surface) 到 var(--xtf-color-surface-muted) 渐变
glass 变体背景使用 var(--xtf-popup-bg)，模糊使用 var(--xtf-card-glass-blur)，阴影使用 var(--xtf-shadow-glass)
neomorphic 变体阴影使用 var(--xtf-shadow-neo)
阴影层级使用 var(--xtf-card-elevation1) ~ var(--xtf-card-elevation8)
标题字体使用 var(--xtf-font-font-family-title)，字重 700
骨架屏闪光使用 var(--xtf-card-skeleton-shimmer)
圆角使用 var(--xtf-radius-sm) ~ var(--xtf-radius-xl)
悬浮上浮阴影使用 var(--xtf-card-shadow-hover)

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。

xtf-card ​

组件说明 ​

基础用法 ​

1. 最简示例 ​

2. 视觉变体 ​

3. 封面图与插槽 ​

4. 渐变边框与加载态 ​

5. 可点击与内边距 ​

全部属性 ​

事件 ​

插槽 ​

主题说明 ​