logoAnt Design

⌘ K
  • 디자인
  • 개발
  • 컴포넌트
  • 블로그
  • 자료
5.21.3
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Card

데이터를 담아 보여주기 위한 컨테이너입니다.
가져오기import{ Card }from"antd";
소스components/card
문서
이 페이지 수정변경 로그

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference
Work with Us

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

언제 사용할까요?

카드는 단일 주제와 관련된 콘텐츠를 표시하는 데 사용할 수 있습니다. 이 콘텐츠는 다양한 유형과 크기의 여러 요소로 구성될 수 있습니다.

예시

API

공통 속성 참조:공통 속성

<Card title="Card title">카드 내용</Card>
프로퍼티설명타입기본값버전
actions카드의 하단에 표시되는 작업 목록Array<ReactNode>-
activeTabKey현재 TabPane의 키string-
bordered카드 주위의 테두리 렌더링하는 토글 여부booleantrue
cover카드 커버ReactNode-
defaultActiveTabKeyactiveTabKey가 설정되지 않은 경우 초기 활성 탭 패널의 키stringThe key of first tab
extra카드의 오른쪽 상단에 렌더링할 콘텐츠ReactNode-
hoverable카드를 호버할 때 카드가 위로 올라갑니다.booleanfalse
loading카드의 콘텐츠를 가져오는 동안 로딩 표시 여부booleanfalse
size카드의 크기default | smalldefault
tabBarExtraContent탭 바의 추가 콘텐츠ReactNode-
tabList탭 패널의 상단 목록TabItemType[]-
tabProps탭--
title카드 제목ReactNode-
type카드 스타일 유형을 내부로 설정하거나 설정하지 않을 수 있습니다.string-
classNames카드 내장 모듈의 className 구성Record<SemanticDOM, string>-5.14.0
styles카드 내장 모듈의 스타일 구성Record<SemanticDOM, CSSProperties>-5.14.0
onTabChange탭이 전환될 때 호출되는 콜백(key) => void-

Card.Grid

프로퍼티설명타입기본값버전
className컨테이너의 classNamestring-
hoverable그리드인 카드를 호버할 때 카드가 위로 올라갑니다.booleantrue
style컨테이너의 스타일 객체CSSProperties-

Card.Meta

프로퍼티설명타입기본값버전
avatar사용자 이미지나 아이콘ReactNode-
className컨테이너의 classNamerstring-
description설명 콘텐츠ReactNode-
style컨테이너의 스타일 객체CSSProperties-
title제목 콘텐츠ReactNode-

Semantic DOM

Design Token

컴포넌트 토큰어떻게 사용하나요?

토큰 이름설명타입기본값
actionsBg操作区背景色string#ffffff
actionsLiMargin操作区每一项的外间距string12px 0
extraColor额外区文字颜色stringrgba(0, 0, 0, 0.88)
headerBg卡片头部背景色stringtransparent
headerFontSize卡片头部文字大小string | number16
headerFontSizeSM小号卡片头部文字大小string | number14
headerHeight卡片头部高度string | number56
headerHeightSM小号卡片头部高度string | number38
tabsMarginBottom内置标签页组件下间距number-17

글로벌 토큰어떻게 사용하나요?

기본 카드
codepen icon
External Link Icon
expand codeexpand code
테두리 없는 카드
codepen icon
External Link Icon
expand codeexpand code
간단한 카드
codepen icon
External Link Icon
expand codeexpand code
맞춤형 콘텐츠 카드
codepen icon
External Link Icon
expand codeexpand code
열이 있는 카드
codepen icon
External Link Icon
expand codeexpand code
로딩 카드
codepen icon
External Link Icon
expand codeexpand code
그리드 카드
codepen icon
External Link Icon
expand codeexpand code
내부 카드
codepen icon
External Link Icon
expand codeexpand code
탭이 있는 카드
codepen icon
External Link Icon
expand codeexpand code
추가 콘텐츠 구성을 지원하는 카드
codepen icon
External Link Icon
expand codeexpand code
컴포넌트 토큰
codepen icon
External Link Icon
expand codeexpand code
Default size card
More

Card content

Card content

Card content

Small size card
More

Card content

Card content

Card content

Card title

Card content

Card content

Card content

Card content

Card content

Card content

example
Europe Street beat
www.instagram.com
Card title
Card content
Card title
Card content
Card title
Card content
Card Title
Content
Content
Content
Content
Content
Content
Content
Card title
Inner Card title
More
Inner Card content
Inner Card title
More
Inner Card content
Card title
More
tab1
tab2

content1



article
app
project
More

app content

example
Card title
This is the description
Card title
More
tab1
tab2

Card content

Card content

Card content

Small size card
More

Card content

Card content

Card content

Card title
More
example
Card Meta title
This is the description
  • header
    5.14.0
    카드의 `header`를 설정합니다
  • body
    5.14.0
    카드의 `body`를 설정합니다
  • extra
    5.14.0
    카드의 `extra`를 설정합니다
  • title
    5.14.0
    카드의 `title`를 설정합니다
  • actions
    5.14.0
    카드의 `actions`를 설정합니다
  • cover
    5.14.0
    카드의 `cover`를 설정합니다