Card
Card
데이터를 담아 보여주기 위한 컨테이너입니다.
가져오기import{ Card }from"antd"; |
카드는 단일 주제와 관련된 콘텐츠를 표시하는 데 사용할 수 있습니다. 이 콘텐츠는 다양한 유형과 크기의 여러 요소로 구성될 수 있습니다.
공통 속성 참조:공통 속성
<Card title="Card title">카드 내용</Card>
프로퍼티 | 설명 | 타입 | 기본값 | 버전 |
---|---|---|---|---|
actions | 카드의 하단에 표시되는 작업 목록 | Array<ReactNode> | - | |
activeTabKey | 현재 TabPane의 키 | string | - | |
bordered | 카드 주위의 테두리 렌더링하는 토글 여부 | boolean | true | |
cover | 카드 커버 | ReactNode | - | |
defaultActiveTabKey | activeTabKey 가 설정되지 않은 경우 초기 활성 탭 패널의 키 | string | The key of first tab | |
extra | 카드의 오른쪽 상단에 렌더링할 콘텐츠 | ReactNode | - | |
hoverable | 카드를 호버할 때 카드가 위로 올라갑니다. | boolean | false | |
loading | 카드의 콘텐츠를 가져오는 동안 로딩 표시 여부 | boolean | false | |
size | 카드의 크기 | default | small | default | |
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 | - |
프로퍼티 | 설명 | 타입 | 기본값 | 버전 |
---|---|---|---|---|
className | 컨테이너의 className | string | - | |
hoverable | 그리드인 카드를 호버할 때 카드가 위로 올라갑니다. | boolean | true | |
style | 컨테이너의 스타일 객체 | CSSProperties | - |
프로퍼티 | 설명 | 타입 | 기본값 | 버전 |
---|---|---|---|---|
avatar | 사용자 이미지나 아이콘 | ReactNode | - | |
className | 컨테이너의 classNamer | string | - | |
description | 설명 콘텐츠 | ReactNode | - | |
style | 컨테이너의 스타일 객체 | CSSProperties | - | |
title | 제목 콘텐츠 | ReactNode | - |
토큰 이름 | 설명 | 타입 | 기본값 |
---|---|---|---|
actionsBg | 操作区背景色 | string | #ffffff |
actionsLiMargin | 操作区每一项的外间距 | string | 12px 0 |
extraColor | 额外区文字颜色 | string | rgba(0, 0, 0, 0.88) |
headerBg | 卡片头部背景色 | string | transparent |
headerFontSize | 卡片头部文字大小 | string | number | 16 |
headerFontSizeSM | 小号卡片头部文字大小 | string | number | 14 |
headerHeight | 卡片头部高度 | string | number | 56 |
headerHeightSM | 小号卡片头部高度 | string | number | 38 |
tabsMarginBottom | 内置标签页组件下间距 | number | -17 |
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content