본문으로 바로가기 본문 바로가기
WIKI 기술 지식 베이스

Card 카드

원문 보기 위키 갱신

범용 카드 컨테이너예요.

출처: 문서

본문

언제 사용하나요?

기본 카드 컨테이너예요. 글자, 목록, 이미지, 문단을 담아 개요를 보여 줄 때 사용해요.

기본 사용법

:::demo

<template>
  <d-card class="card-demo-basic">
    <template #avatar>
      <d-avatar name="DevUI"></d-avatar>
    </template>
    <template #title> DEVUI Course </template>
    <template #subtitle class="card-demo-icon"> <d-icon name="company-member"></d-icon><span>DevUI</span> </template>
    <template #content>
      DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are
      basedon...
    </template>
    <template #actions>
      <div class="card-block"><d-icon name="like"></d-icon><span>12</span></div>
      <div class="card-block"><d-icon name="star-o"></d-icon><span>8</span></div>
      <div class="card-block"><d-icon name="message"></d-icon><span>8</span></div>
    </template>
  </d-card>
</template>
<style lang="scss">

.card-demo-basic {
  cursor: pointer;

  .card-demo-icon {
    cursor: pointer;
    font-size: 16px;
    margin-right: 8px;
    vertical-align: middle;
  }
  .card-demo-icon + span {
    vertical-align: middle;
  }
  .card-block {
    margin-right: 16px;
    i {
      cursor: pointer;
      font-size: 16px;
      margin-right: 8px;
      vertical-align: middle;
    }
    i + span {
      vertical-align: middle;
    }
  }
  .card-container {
    width: 350px;
  }
  .action-text {
    color: #8a8e99;
  }
}
</style>

:::

그림자 효과

카드의 강조 그림자 효과를 언제 보여 줄지 직접 정할 수 있어요.

shadow 속성으로 카드 강조 그림자가 나타나는 시점을 설정해요. 값은 'always'|'hover'|'never'이고, 기본값은 hover예요.

:::demo

<template>
  <d-row>
    <d-col :span="8">
      <d-card shadow="always" style="width: 250px">
        <template #content> always </template>
      </d-card>
    </d-col>
    <d-col :span="8">
      <d-card style="width: 250px">
        <template #content> hover </template>
      </d-card>
    </d-col>
    <d-col :span="8">
      <d-card shadow="never" style="width: 250px">
        <template #content> never </template>
      </d-card>
    </d-col>
  </d-row>
</template>

:::

이미지 사용

:::demo

<template>
  <d-card class="card-demo-use-img" :src="'https://devui.design/components/assets/image1.png'">
    <template #avatar>
      <d-avatar name="DevUI"></d-avatar>
    </template>
    <template #title> DEVUI Course </template>
    <template #subtitle class="card-demo-icon"> <d-icon name="company-member"></d-icon><span>DevUI</span> </template>
    <template #content>
      DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are
      basedon...
    </template>
    <template #actions>
      <div class="card-block"><d-icon name="like"></d-icon><span>12</span></div>
      <div class="card-block"><d-icon name="star-o"></d-icon><span>8</span></div>
      <div class="card-block"><d-icon name="message"></d-icon><span>8</span></div>
    </template>
  </d-card>
</template>
<style lang="scss">

.card-demo-use-img {
  cursor: pointer;

  .icon {
    cursor: pointer;
    font-size: 16px;
    margin-right: 8px;
    vertical-align: middle;
  }
  .icon + span {
    vertical-align: middle;
  }
  .card-block {
    margin-right: 16px;
    i {
      cursor: pointer;
      font-size: 16px;
      margin-right: 8px;
      vertical-align: middle;
    }
    i + span {
      vertical-align: middle;
    }
  }
  .card-container {
    width: 350px;
  }
  img {
    max-width: none;
  }
  .action-text {
    color: #8a8e99;
  }
}
</style>

:::

커스텀 영역

align으로 작업 영역 정렬 방식을 설정할 수 있어요: 시작 정렬, 끝 정렬, 늘림 정렬.

:::demo

<template>
  <d-card class="card-demo-custom-area" :align="'spaceBetween'">
    <div class="custom-avatar">
      <d-avatar imgSrc="https://devui.design/components/assets/logo.svg" :width="48" :height="48" :isRound="false"></d-avatar>
      <div class="icon-star-o custom-star-action"></div>
    </div>
    <template v-slot:title> DEVUI Course </template>
    <template v-slot:actions>
      <div class="action-text">Updated at Otc 15 16:20</div>
      <div>
        <d-icon name="like"></d-icon>
        <d-icon name="more-operate"></d-icon>
      </div>
    </template>
  </d-card>
</template>
<style lang="scss">

.card-demo-custom-area {
  cursor: pointer;

  .icon {
    cursor: pointer;
    font-size: 16px;
    margin-right: 8px;
    vertical-align: middle;
  }
  .icon + span {
    vertical-align: middle;
  }
  .card-block {
    margin-right: 16px;
    i {
      cursor: pointer;
      font-size: 16px;
      margin-right: 8px;
      vertical-align: middle;
    }
    i + span {
      vertical-align: middle;
    }
  }
  .card-container {
    width: 350px;
  }
  img {
    max-width: none;
  }
  .action-text {
    color: #8a8e99;
  }
  .custom-avatar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    .custom-star-action {
      font-size: 20px;
      cursor: pointer;
    }
  }
}
</style>

:::

Card 파라미터

파라미터 타입 기본값 설명 Demo 링크
src string '' 선택, 이미지 경로 이미지 사용
align IAlignType 'start' 선택, 액션 영역 정렬 방식. 시작 정렬, 끝 정렬, 늘리기 정렬에 각각 대응 영역 커스텀
shadow IShadowType 'hover' 선택, 강화 그림자 표시 시점 설정 그림자 효과

Card 슬롯

두 가지 방법으로 사용할 수 있어요: v-slot:title 또는 이름 있는 슬롯 #title

이름 설명
avatar 아바타 영역. 아바타 등 이미지 표시용
title 카드 주요 콘텐츠 설명. 일반적으로 카드 이름으로 정의
subtitle 제목 보조 정보. 태그 등을 포함할 수 있음
actions 액션 역할. 조작 텍스트 또는 조작 아이콘 포함 가능
default 카드 내 전체 콘텐츠 커스텀

Card 타입 정의

IAlignType

type IAlignType = 'start' | 'end' | 'spaceBetween';

IShadowType

type IShadowType = 'always' | 'hover' | 'never';

더 알아보기 (Learn more)

Card로 콘텐츠를 카드 형태로 감쌀 수 있어요. 더 자세한 내용은 공식 문서를 참고하세요.