Card카드

카드는 단일 주제와 관련된 콘텐츠 및 작업을 담는 다용도 컴포넌트입니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/card.js';

컴포넌트의 TypeScript 타입 가져오기:

import type { Card } from 'mdui/components/card.js';

사용 예시:

Card

<mdui-card style="width: 200px;height: 124px">Card</mdui-card>

예시

형태

variant 속성을 사용해 카드의 형태를 설정합니다.

<mdui-card variant="elevated" style="width: 200px;height: 124px"></mdui-card>
<mdui-card variant="filled" style="width: 200px;height: 124px"></mdui-card>
<mdui-card variant="outlined" style="width: 200px;height: 124px"></mdui-card>

소스

클릭 가능

clickable 속성을 추가하면 카드를 클릭할 수 있게 되어 마우스 호버 효과와 클릭 물결 효과가 추가됩니다.

<mdui-card clickable style="width: 200px;height: 124px"></mdui-card>

소스

링크

href 속성을 추가하면 카드가 링크로 변경되며, 이때 링크 관련 속성(download, target, rel)도 함께 사용합니다.

<mdui-card href="https://www.mdui.org" target="_blank" style="width: 200px;height: 124px"></mdui-card>

소스

비활성화 상태

disabled 속성을 추가하면 카드를 비활성화할 수 있습니다.

<mdui-card disabled style="width: 200px;height: 124px"></mdui-card>

소스

API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`variant`	`variant`	`'elevated' \| 'filled' \| 'outlined'`	`'elevated'`
카드의 모양입니다. 사용 가능한 값은 다음과 같습니다: `elevated`: 그림자가 있는 카드로, 배경과의 시각적 분리도가 높습니다. `filled`: 배경색이 채워진 카드로, 배경과의 시각적 분리도가 낮습니다. `outlined`: 테두리가 있는 카드로, 배경과의 시각적 분리도가 가장 높습니다.
`clickable`	`clickable`	`boolean`	`false`
클릭 가능 여부를 설정합니다. `true`이면 카드에 마우스 호버 효과와 클릭 리플(ripple) 효과가 있습니다.
`disabled`	`disabled`	`boolean`	`false`
비활성화할지 여부를 설정합니다.
`href`	`href`	`string`	-
링크의 대상 URL입니다. 이 속성을 설정하면 컴포넌트 내부가 `<a>` 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
`download`	`download`	`string`	-
다운로드할 링크 대상을 지정합니다. 참고: `href` 속성이 지정된 경우에만 유효합니다.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다: `_blank`: 새 창에서 링크 열기 `_parent`: 부모 프레임에서 링크 열기 `_self`: 기본값. 현재 프레임에서 링크 열기 `_top`: 전체 창에서 링크 열기 참고: `href` 속성이 지정된 경우에만 유효합니다.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다: `alternate`: 현재 문서의 대체 버전 `author`: 현재 문서 또는 글의 작성자 `bookmark`: 가장 가까운 상위 섹션으로의 영구 링크 `external`: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음 `help`: 관련 도움말 문서로 링크 `license`: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨 `me`: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄 `next`: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임 `nofollow`: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음 `noreferrer`: `Referer` 헤더가 포함되지 않음. `noopener`와 유사하게 동작합니다. `opener`: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, `target` 속성 값이 `_blank`인 경우) 보조 브라우징 컨텍스트를 생성함 `prev`: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임 `search`: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공 `tag`: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공 참고: `href` 속성이 지정된 경우에만 사용 가능합니다.
`autofocus`	`autofocus`	`boolean`	`false`
페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
`tabindex`	`tabIndex`	`number`	-
Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.

메서드

이름	매개변수	반환값
`click`		`void`
마우스 클릭을 시뮬레이션합니다.
`focus`	`options: FocusOptions` (선택사항)	`void`
현재 요소에 포커스를 설정합니다. 객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다: `preventScroll`: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 `true`로 설정하십시오.
`blur`		`void`
현재 요소에서 포커스를 제거합니다.

이벤트

이름
`focus`
포커스를 얻었을 때 발생합니다.
`blur`
포커스를 잃었을 때 발생합니다.

Slots

이름
기본
카드의 콘텐츠

CSS 사용자 정의 속성

이름
`--shape-corner`
컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.

이전 장

ButtonIcon 아이콘 버튼

다음 장

Checkbox 체크박스