FileCard 文件卡片

用卡片的形式展示文件。

何时使用

• 用于在对话或输入时展示文件。

代码演示

基础用法

excel-has-long-long-long-name.xlsx

1 KB

word-file.docx

1 KB

pdf-file.pdf

1 KB

ppt-file.pptx

1 KB

zip-file.zip

1 KB

txt-file.txt

1 KB

markdown-file.md

1 KB

java-file.java

1 KB

javascript-file.js

1 KB

python-file.py

1 KB

excel-file.xlsx

1 KB

基础用法

不同类型文件会自动匹配对应图标和颜色。

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardBasicV2' });

import { FileCard } from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';

defineRender(() => (
  <Flex vertical gap="middle">
    <FileCard name="excel-has-long-long-long-name.xlsx" byte={1024} />
    <FileCard name="word-file.docx" byte={1024} />
    <FileCard name="pdf-file.pdf" byte={1024} />
    <FileCard name="ppt-file.pptx" byte={1024} />
    <FileCard name="zip-file.zip" byte={1024} />
    <FileCard name="txt-file.txt" byte={1024} />
    <FileCard name="markdown-file.md" byte={1024} />
    <FileCard name="java-file.java" byte={1024} />
    <FileCard name="javascript-file.js" byte={1024} />
    <FileCard name="python-file.py" byte={1024} />
    <FileCard styles={{ file: { width: '350px' } }} name="excel-file.xlsx" byte={1024} />
  </Flex>
));
</script>

隐藏源代码

卡片大小

pdf-file.pdf

1 KB

pdf-file.pdf

1 KB

卡片大小

通过 size 属性设置卡片大小。

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardSizeV2' });

import { FileCard } from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';

defineRender(() => (
  <Flex vertical gap="middle">
    <FileCard name="pdf-file.pdf" byte={1024} size="small" />
    <FileCard name="pdf-file.pdf" byte={1024} size="default" />
  </Flex>
));
</script>

隐藏源代码

图片文件

Preview

Preview

image-file.png

1 KB

图片文件

图片类型文件会自动展示图片预览。可通过 type="file" 强制展示为文件卡片。

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardImageV2' });

import { FileCard } from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';

defineRender(() => (
  <Flex vertical gap="middle">
    <FileCard
      name="image-file.png"
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    />
    <FileCard
      styles={{
        file: {
          width: '100px',
          height: '100px',
        },
      }}
      name="image-file.png"
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    />
    <FileCard
      type="file"
      name="image-file.png"
      byte={1024}
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    />
  </Flex>
));
</script>

隐藏源代码

图片加载

0%

0%

图片加载

图片加载时显示加载动画。

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardImageLoadingV2' });

import { FileCard } from 'ant-design-x-vue';
import { Button, Flex, Space } from 'ant-design-vue';
import { ref } from 'vue';

const loading = ref(true);
const src = ref('');

defineRender(() => (
  <Flex gap="middle" vertical>
    <Space>
      <Button
        disabled={loading.value}
        onClick={() => {
          loading.value = true;
          src.value = '';
        }}
      >
        Start Loading
      </Button>
      <Button
        onClick={() => {
          src.value = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
          setTimeout(() => {
            loading.value = false;
          }, 400);
        }}
      >
        Load Complete
      </Button>
    </Space>

    <FileCard
      loading={loading.value}
      styles={{ file: { width: '200px' } }}
      spinProps={{ size: 'small' }}
      name="image-file.png"
      src={src.value ? `${src.value}?${Date.now()}` : ''}
    />
    <FileCard
      loading={loading.value}
      name="image-file.png"
      src={src.value ? `${src.value}?${Date.now()}` : ''}
    />
  </Flex>
));
</script>

隐藏源代码

音视频类型

audio-file.mp3

1 KB

video-file.mp4

1 KB

音视频类型

音频和视频类型文件支持内联播放，也可通过 type="file" 以文件卡片形式展示。

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardAudioV2' });

import { FileCard } from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';

defineRender(() => (
  <Flex vertical gap="middle">
    <FileCard
      name="audio-file.mp3"
      src="https://mdn.alipayobjects.com/cto_doraemon/afts/file/HFTcTLugiIAAAAAAgCAAAAgAehe3AQBr"
    />
    <FileCard
      name="video-file.mp4"
      src="https://mdn.alipayobjects.com/doraemon_plugin/afts/file/vl7tSa-m3jEAAAAAAAAAAAAAeur1AQBr"
    />
    <FileCard name="audio-file.mp3" byte={1024} type="file" />
    <FileCard name="video-file.mp4" byte={1024} type="file" />
  </Flex>
));
</script>

隐藏源代码

使用遮罩

txt-file.txt

1 KB

使用遮罩

通过 mask 属性添加遮罩内容。

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardMaskV2' });

import { FileCard } from 'ant-design-x-vue';
import { VerticalAlignBottomOutlined } from '@ant-design/icons-vue';

const onDownload = () => {
  const blob = new Blob(['123'], { type: 'text/plain' });
  const a = document.createElement('a');
  const href = URL.createObjectURL(blob);
  a.href = href;
  a.download = 'txt-file.txt';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(href);
};

defineRender(() => (
  <FileCard
    name="txt-file.txt"
    byte={1024}
    mask={<VerticalAlignBottomOutlined style={{ fontSize: '20px' }} onClick={() => onDownload()} />}
  />
));
</script>

隐藏源代码

自定义图标

txt-file.txt

1 KB

android-file.apk

1 KB

自定义图标

通过 icon 属性自定义图标，支持传入预设图标名称或自定义 VNode。

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardIconV2' });

import { FileCard } from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';
import { AndroidOutlined } from '@ant-design/icons-vue';

defineRender(() => (
  <Flex vertical gap="middle">
    <FileCard icon="pdf" name="txt-file.txt" byte={1024} />
    <FileCard
      icon={<AndroidOutlined style={{ fontSize: '36px', color: '#22b35e' }} />}
      name="android-file.apk"
      byte={1024}
    />
  </Flex>
));
</script>

隐藏源代码

文件列表

excel-file.xlsx

1 KB

word-file.docx

1 KB

pdf-file.pdf

1 KB

ppt-file.pptx

1 KB

zip-file.zip

1 KB

txt-file.txt

1 KB

excel-file.xlsx

1 KB

word-file.docx

1 KB

pdf-file.pdf

1 KB

ppt-file.pptx

1 KB

zip-file.zip

1 KB

txt-file.txt

1 KB

Preview

Preview

Preview

Preview

Preview

Preview

Preview

Preview

Preview

文件列表

使用 FileCard.List 展示文件列表，支持删除和图片预览。

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardListV2' });

import { FileCard } from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';

const files = [
  { name: 'excel-file.xlsx', byte: 1024 },
  { name: 'word-file.docx', byte: 1024 },
  { name: 'pdf-file.pdf', byte: 1024 },
  { name: 'ppt-file.pptx', byte: 1024 },
  { name: 'zip-file.zip', byte: 1024 },
  { name: 'txt-file.txt', byte: 1024 },
];

defineRender(() => (
  <Flex vertical gap="middle" style={{ width: '900px' }}>
    <FileCard.List items={files} removable />
    <FileCard.List items={files} removable size="small" />
    <FileCard.List
      items={new Array(6).fill({
        name: 'image-file.png',
        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      })}
    />
    <FileCard.List
      styles={{ file: { width: '230px', height: '230px' } }}
      items={new Array(3).fill({
        name: 'image-file.png',
        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      })}
    />
  </Flex>
));
</script>

隐藏源代码

超出样式

Wrap

Scroll X

Scroll Y

Preview

Preview

Preview

Preview

Preview

Preview

Preview

Preview

Preview

Preview

Preview

excel-file.xlsx

1 KB

word-file.docx

1 KB

pdf-file.pdf

1 KB

ppt-file.pptx

1 KB

zip-file.zip

1 KB

txt-file.txt

1 KB

超出样式

通过 overflow 属性控制列表超出时的展示方式。

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardOverflowV2' });

import { FileCard } from 'ant-design-x-vue';
import type { FileCardListProps } from 'ant-design-x-vue';
import { Flex, Segmented } from 'ant-design-vue';
import { ref } from 'vue';

const images = Array.from({ length: 11 }).map((_, index) => ({
  name: `image-file-${index}.png`,
  src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  byte: 1024,
}));

const files = [
  { name: 'excel-file.xlsx', byte: 1024 },
  { name: 'word-file.docx', byte: 1024 },
  { name: 'pdf-file.pdf', byte: 1024 },
  { name: 'ppt-file.pptx', byte: 1024 },
  { name: 'zip-file.zip', byte: 1024 },
  { name: 'txt-file.txt', byte: 1024 },
];

const overflow = ref<FileCardListProps['overflow']>('wrap');

defineRender(() => (
  <Flex vertical gap="middle">
    <Segmented
      options={[
        { value: 'wrap', label: 'Wrap' },
        { value: 'scrollX', label: 'Scroll X' },
        { value: 'scrollY', label: 'Scroll Y' },
      ]}
      value={overflow.value}
      onChange={(val: any) => (overflow.value = val)}
      style={{ marginInlineEnd: 'auto' }}
    />
    <FileCard.List items={[...images, ...files]} removable overflow={overflow.value} />
  </Flex>
));
</script>

隐藏源代码

API

FileCardProps

属性	说明	类型	默认值	版本
name	文件名称	string	-	-
byte	文件大小（字节）	number	-	-
size	卡片大小	'small' | 'default'	'default'	-
description	文件描述	VNode | string	-	-
loading	是否处于加载状态	boolean	false	-
type	文件类型	'file' | 'image' | 'audio' | 'video' | string	-	-
src	图片或文件地址	string	-	-
mask	遮罩内容	VNode | string	-	-
icon	自定义图标	VNode | PresetIcons	-	-
imageProps	图片属性，同 ant-design-vue Image 属性	ImageProps	-	-
videoProps	视频属性配置	Record<string, any>	-	-
audioProps	音频属性配置	Record<string, any>	-	-
spinProps	加载中属性	SpinProps & { showText?: boolean; icon?: VNode }	-	-
onClick	点击事件回调	() => void	-	-

PresetIcons

预设图标类型，支持以下值：

type PresetIcons =
  | 'default'    // 默认文件图标
  | 'excel'      // Excel 文件图标
  | 'image'      // 图片文件图标
  | 'markdown'   // Markdown 文件图标
  | 'pdf'        // PDF 文件图标
  | 'ppt'        // PowerPoint 文件图标
  | 'word'       // Word 文件图标
  | 'zip'        // 压缩文件图标
  | 'video'      // 视频文件图标
  | 'audio'      // 音频文件图标
  | 'java'       // Java 文件图标
  | 'javascript' // JavaScript 文件图标
  | 'python';    // Python 文件图标

FileCard.List

文件列表组件，用于展示多个文件卡片。

属性	说明	类型	默认值	版本
items	文件列表数据。每一项是 FileCardProps，并可用 key 作为稳定标识；缺省时回退为 name-index	(FileCardProps & { key?: string | number })[]	-	-
size	卡片大小	'small' | 'default'	'default'	-
removable	是否可删除	boolean | ((item: FileCardProps) => boolean)	false	-
onRemove	删除事件回调	(item: FileCardProps) => void	-	-
extension	扩展内容	VNode	-	-
overflow	超出展示方式	'scrollX' | 'scrollY' | 'wrap'	'wrap'	-

Semantic DOM

pdf-file.pdf

1 KB

• root

  根节点

• file

  文件

• icon

  图标

• name

  名称

• description

  描述

excel-file.xlsx

1 KB

excel-file.xlsx

1 KB

excel-file.xlsx

1 KB

• root

  根节点

• card

  卡片

• file

  文件

• icon

  图标

• name

  名称

• description

  描述

主题变量（Design Token）

组件暂无自定义 Component Token，可通过全局 Design Token 定制。