syidaxdesign system
홈 가격 내 정보
ComponentsData display

Card

관련된 정보와 동작을 하나의 영역으로 묶습니다.

<sy-card>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<sy-card
  title="프로젝트 현황"
  collapsible
  active
  show-footer
  id="sample"
>
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p><span slot="footer">마지막 갱신 · 오늘</span>
</sy-card>

사용 가이드

#

프로젝트·상품처럼 독립적인 정보 한 묶음을 담습니다. 단순한 페이지 배치에는 Layout이나 Flex를 사용하세요.

제목과 도구
cardTitle 또는 header 슬롯에 제목을, header-actions에 보조 동작을 넣습니다.
본문과 하단
기본 슬롯에 내용을, footer에 후속 동작을 배치하세요.
커버 이미지
커버 슬롯을 사용할 때는 showCover도 켜야 표시됩니다.

예제

#

기본 정보

제목과 내용을 하나의 카드로 묶습니다.

코드 보기
HTML
<sy-card title="프로젝트 현황" id="sample">
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p>
</sy-card>

제목 옆 동작과 푸터

보조 동작은 header-actions, 다음 단계는 footer에 배치합니다.

코드 보기
HTML
<sy-card title="프로젝트 현황" id="sample">
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p>
  <sy-button slot="header-actions" size="small">편집</sy-button>
  <sy-button slot="footer" variant="primary">프로젝트 열기</sy-button>
</sy-card>

커버 영역

showCover와 cover 슬롯을 함께 설정합니다.

코드 보기
HTML
<sy-card
  title="프로젝트 현황"
  show-cover
  id="sample"
>
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p>
  <div slot="cover" style="background:#eee9f8;padding:24px;color:#6750a4">SYIDAX
    · TEAM WORKSPACE</div>
</sy-card>

펼침 제어

메서드로 내용을 접거나 다시 펼칩니다.

코드 보기
HTML
<sy-card
  title="프로젝트 현황"
  collapsible
  id="sample"
>
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p>
</sy-card>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">접기</sy-button>
  <sy-button id="action-1" size="small">펼치기</sy-button>
  <sy-button id="action-2" size="small">전환</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.collapse();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.expand();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.toggle();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기
HTML
<sy-card
  title="프로젝트 현황"
  collapsible
  active
  show-footer
  id="sample"
>
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p><span slot="footer">마지막 갱신 · 오늘</span>
</sy-card>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["toggled"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

카드 아이콘과 배경

showBackdrop과 showIcon을 켜면 배경 효과와 제목 아이콘을 표시합니다. icon에는 SVG 파일의 경로를 지정합니다.

코드 보기
HTML
<sy-card
  title="프로젝트 현황"
  collapsible
  active
  show-footer
  show-backdrop
  show-icon
  icon="/assets/examples/star.svg"
  id="sample"
>
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p><span slot="footer">마지막 갱신 · 오늘</span>
</sy-card>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "showBackdrop": true,
    "showIcon": true,
    "icon": "/assets/examples/star.svg"
  });
</script>

펼치기·접기 지연

열기와 닫기 지연을 각각 300ms로 지정했습니다. 제목을 눌러 전환 시간을 확인하세요.

코드 보기
HTML
<sy-card
  title="프로젝트 현황"
  collapsible
  active
  show-footer
  show-scroll-bar
  open-delay="300"
  close-delay="300"
  id="sample"
>
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p><span slot="footer">마지막 갱신 · 오늘</span>
</sy-card>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "collapsible": true,
    "showScrollBar": true,
    "openDelay": 300,
    "closeDelay": 300
  });
</script>

접힌 카드로 시작

카드를 접힌 상태로 표시하고 헤더에서 내용을 펼칩니다.

코드 보기
HTML
<sy-card
  title="프로젝트 현황"
  collapsible
  active="false"
  show-footer
  id="sample"
>
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p><span slot="footer">마지막 갱신 · 오늘</span>
</sy-card>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "collapsible": true,
    "active": false
  });
</script>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-card>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse카드 내용을 접거나 펼칠 수 있게 합니다.
booleantrue본문이 펼쳐진 상태입니다.
booleanfalsecover 슬롯을 표시합니다.
booleantruefooter 슬롯을 표시합니다.
booleanfalse카드 배경 효과를 사용합니다.
booleanfalse내용 영역의 스크롤바 표시를 허용합니다.
booleanfalse상태 아이콘을 표시합니다.
string''아이콘 표시 또는 아이콘 콘텐츠를 지정합니다. 컴포넌트별 형식을 확인하세요.
string'Card Title'카드 제목입니다.
booleanfalseLegacy alias for `show-backdrop`.
number0펼치기 지연 시간(ms)입니다.
number0접기 지연 시간(ms)입니다.

Events

EventDetailDescription
CustomEvent<{ active: boolean }>이벤트의 detail에서 결과를 확인하세요.

Methods

MethodReturnsDescription
Promise<void>현재 펼침 상태를 전환합니다.
Promise<void>본문을 펼칩니다.
Promise<void>본문을 접습니다.

Slots

SlotDescription
cover 영역에 표시할 내용입니다.
header 영역에 표시할 내용입니다.
header-actions 영역에 표시할 내용입니다.
컴포넌트의 본문 또는 자식 항목입니다.
footer 영역에 표시할 내용입니다.
Design SystemTab 이동 Enter 열기