Card

카드 레이아웃 컴포넌트

Card#

콘텐츠를 구조화하여 표시하는 카드 컴포넌트입니다. 헤더, 본문, 푸터 영역을 지원합니다.

사용법#

// 기본 카드
CouiCard(
  child: Text('카드 내용'),
)

// 헤더, 본문, 푸터
CouiCard(
  header: CouiCardHeader(
    title: '제목',
    subtitle: '부제목',
    trailing: Icon(Icons.more_vert),
  ),
  body: CouiCardBody(
    child: Text('카드 본문 내용입니다.'),
  ),
  footer: CouiCardFooter(
    child: Row(
      children: [
        CouiButton.ghost(
          onPressed: handleCancel,
          child: Text('취소'),
        ),
        CouiButton(
          onPressed: handleConfirm,
          child: Text('확인'),
        ),
      ],
    ),
  ),
)

Card(
  header: CardHeader(
    title: '제목',
    subtitle: '부제목',
  ),
  body: CardBody(
    child: Text('카드 본문 내용입니다.'),
  ),
  footer: CardFooter(
    children: [
      Button.ghost(onClick: handleCancel, child: Text('취소')),
      Button(onClick: handleConfirm, child: Text('확인')),
    ],
  ),
)

Props / Parameters#

속성	타입	기본값	설명
`header`	`CouiCardHeader?`	`null`	카드 헤더
`body`	`CouiCardBody?`	`null`	카드 본문
`footer`	`CouiCardFooter?`	`null`	카드 푸터
`elevation`	`double`	`1.0`	그림자 깊이
`borderRadius`	`BorderRadius?`	`null`	모서리 둥글기
`child`	`Widget?`	`null`	단순 카드 내용

변형 (Variants)#

이미지 카드#

CouiCard(
  image: CouiCardImage(
    imageUrl: 'https://example.com/cover.jpg',
    height: 200,
  ),
  body: CouiCardBody(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('이미지 카드 제목'),
        Text('설명 텍스트입니다.'),
      ],
    ),
  ),
)

클릭 가능한 카드#

CouiCard.clickable(
  onTap: handleCardTap,
  child: Text('클릭하세요'),
)