logoNamu Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
1.0.0
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮New
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器New
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码New
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导New
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印New
  • 其他
    • Affix固钉
    • App包裹组件New
    • ConfigProvider全局化配置
何时使用
代码演示
典型卡片
无边框
简洁卡片
更灵活的内容展示
栅格卡片
预加载的卡片
网格型内嵌卡片
内部卡片
带页签的卡片
支持更多内容配置
API
Card
Card.Grid
Card.Meta
Design Token

Card
卡片

    • Calendar日历Carousel走马灯

    相关资源

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu Design Landing-首页模板集
    Scaffolds-脚手架市场
    Umi-React 应用开发框架
    dumi-组件/文档研发工具
    qiankun-微前端框架
    ahooks-React Hooks 库
    Ant Motion-设计动效
    国内镜像站点 🇨🇳

    社区

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design 语雀专栏
    Namu Design 知乎专栏
    体验科技专栏
    seeconfSEE Conf-蚂蚁体验科技大会
    加入我们

    帮助

    GitHub
    更新日志
    常见问题
    报告 Bug
    议题
    讨论区
    StackOverflow
    SegmentFault

    Ant XTech更多产品

    yuque语雀-构建你的数字花园
    AntVAntV-数据可视化解决方案
    EggEgg-企业级 Node.js 框架
    kitchenKitchen-Sketch 工具集
    xtech蚂蚁体验科技
    主题编辑器
    Made with ❤ by
    蚂蚁集团和 Namu Design 开源社区

    通用卡片容器。

    何时使用

    最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。

    代码演示

    Default size card
    More

    Card content

    Card content

    Card content

    Small size card
    More

    Card content

    Card content

    Card content

    典型卡片

    包含标题、内容、操作区域。

    expand codeexpand code
    Card title

    Card content

    Card content

    Card content

    无边框

    在灰色背景上使用无边框的卡片。

    expand codeexpand code

    Card content

    Card content

    Card content

    简洁卡片

    只包含内容区域。

    expand codeexpand code
    example
    Europe Street beat
    www.instagram.com
    更灵活的内容展示

    可以利用 Card.Meta 支持更灵活的内容。

    expand codeexpand code
    Card title
    Card content
    Card title
    Card content
    Card title
    Card content
    栅格卡片

    在系统概览页面常常和栅格进行配合。

    expand codeexpand code

    预加载的卡片

    数据读入前会有文本块样式。

    expand codeexpand code
    Card Title
    Content
    Content
    Content
    Content
    Content
    Content
    Content
    网格型内嵌卡片

    一种常见的卡片内容区隔模式。

    expand codeexpand code
    Card title
    Inner Card title
    More
    Inner Card content
    Inner Card title
    More
    Inner Card content
    内部卡片

    可以放在普通卡片内部，展示多层级结构的信息。

    expand codeexpand code
    Card title
    More
    tab1
    tab2

    content1



    article
    app
    project
    More

    app content

    带页签的卡片

    可承载更多内容。

    expand codeexpand code
    example
    Card title
    This is the description
    支持更多内容配置

    一种支持封面、头像、标题和描述信息的卡片。

    expand codeexpand code

    API

    通用属性参考：通用属性

    <Card title="卡片标题">卡片内容</Card>

    Card

    参数说明类型默认值版本
    actions卡片操作组，位置在卡片底部Array<ReactNode>-
    activeTabKey当前激活页签的 keystring-
    bodyStyle内容区域自定义样式CSSProperties-
    bordered是否有边框booleantrue
    cover卡片封面ReactNode-
    defaultActiveTabKey初始化选中页签的 key，如果没有设置 activeTabKeystring第一个页签
    extra卡片右上角的操作区域ReactNode-
    headStyle自定义标题区域样式CSSProperties-
    hoverable鼠标移过时可浮起booleanfalse
    loading当卡片内容还在加载中时，可以用 loading 展示一个占位booleanfalse
    sizecard 的尺寸default | smalldefault
    tabBarExtraContenttab bar 上额外的元素ReactNode-
    tabList页签标题列表TabItemType[]-
    tabPropsTabs--
    title卡片标题ReactNode-
    type卡片类型，可设置为 inner 或 不设置string-
    onTabChange页签切换的回调(key) => void-

    Card.Grid

    参数说明类型默认值版本
    className网格容器类名string-
    hoverable鼠标移过时可浮起booleantrue
    style定义网格容器类名的样式CSSProperties-

    Card.Meta

    参数说明类型默认值版本
    avatar头像/图标ReactNode-
    className容器类名string-
    description描述内容ReactNode-
    style定义容器类名的样式CSSProperties-
    title标题内容ReactNode-

    Design Token

    组件 Token

    全局 Token