Chip칩

칩 컴포넌트는 사용자 정보 입력, 선택, 콘텐츠 필터링 또는 관련 작업 실행을 보조할 때 사용합니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/chip.js';

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

import type { Chip } from 'mdui/components/chip.js';

사용 예시:

Chip

<mdui-chip>Chip</mdui-chip>

예시

형태

variant 속성을 사용해 칩의 형태를 설정합니다. 칩은 4가지 형태가 있으며 용도에 따라 선택할 수 있습니다:

assist: 현재 컨텍스트와 관련된 보조 작업을 표시할 때 사용합니다. 예를 들어 주문 페이지에서 공유, 즐겨찾기 등의 기능을 제공합니다.
filter: 콘텐츠를 필터링할 때 사용합니다. 예를 들어 검색 결과 페이지에서 검색 결과를 필터링합니다.
input: 사용자가 입력한 정보 조각을 나타내는 데 사용됩니다. 예를 들어 Gmail의 "받는 사람" 필드의 연락처입니다.
suggestion: 사용자 작업을 간소화하기 위해 동적으로 생성된 추천 정보를 제공할 때 사용합니다. 예를 들어 채팅 앱에서 사용자가 보낼 수 있는 메시지를 추측하여 선택할 수 있도록 제공합니다.

Assist

Filter

Input

Suggestion

<mdui-chip variant="assist">Assist</mdui-chip>
<mdui-chip variant="filter">Filter</mdui-chip>
<mdui-chip variant="input">Input</mdui-chip>
<mdui-chip variant="suggestion">Suggestion</mdui-chip>

소스

그림자

elevated 속성을 추가하면 칩에 그림자가 생깁니다.

Chip

<mdui-chip elevated>Chip</mdui-chip>

소스

아이콘

icon, end-icon 속성을 추가하면 각각 칩 왼쪽, 오른쪽에 Material Icons 아이콘을 추가할 수 있습니다. icon, end-icon 슬롯을 통해 칩 왼쪽, 오른쪽에 요소를 추가할 수도 있습니다.

Icon

End Icon

Slot

<mdui-chip icon="search">Icon</mdui-chip>
<mdui-chip end-icon="arrow_forward">End Icon</mdui-chip>
<mdui-chip>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-chip>

소스

링크

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

Link

<mdui-chip href="https://www.mdui.org" target="_blank">Link</mdui-chip>

소스

비활성화 및 로딩 중 상태

disabled 속성을 추가하면 칩을 비활성화할 수 있습니다. loading 속성을 추가하면 칩에 로딩 중 상태를 추가할 수 있습니다.

Disabled

Loading & Disabled

<mdui-chip disabled>Disabled</mdui-chip>
<mdui-chip loading>Loading</mdui-chip>
<mdui-chip loading disabled>Loading & Disabled</mdui-chip>

소스

선택 가능

selectable 속성을 추가하면 칩을 선택할 수 있습니다.

Chip

<mdui-chip selectable>Chip</mdui-chip>

소스

selected-icon 속성을 사용해 선택 상태의 Material Icons 아이콘 이름을 지정할 수 있습니다. selected-icon 슬롯을 통해 선택 상태의 아이콘 요소를 지정할 수도 있습니다.

Chip

<mdui-chip selectable selected-icon="favorite">Chip</mdui-chip>
<mdui-chip selectable>
  Chip
  <mdui-icon slot="selected-icon" name="favorite"></mdui-icon>
</mdui-chip>

소스

칩이 선택되면 selected 속성이 true로 변경됩니다. selected 속성을 추가하여 칩이 기본적으로 선택된 상태가 되도록 할 수도 있습니다.

Chip

<mdui-chip selectable selected>Chip</mdui-chip>

소스

삭제 가능

deletable 속성을 추가하면 칩 오른쪽에 삭제 아이콘이 나타납니다. 이 아이콘을 클릭하면 delete 이벤트가 트리거됩니다. delete-icon 속성으로 삭제 아이콘의 Material Icons 아이콘 이름을 지정하거나 delete-icon 슬롯을 통해 삭제 아이콘의 요소를 지정할 수 있습니다.

Chip

<mdui-chip deletable>Chip</mdui-chip>
<mdui-chip deletable delete-icon="backspace">Chip</mdui-chip>
<mdui-chip deletable>
  Chip
  <mdui-icon slot="delete-icon" name="backspace"></mdui-icon>
</mdui-chip>

소스

API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`variant`	`variant`	`'assist' \| 'filter' \| 'input' \| 'suggestion'`	`'assist'`
칩의 모양입니다. 사용 가능한 값은 다음과 같습니다: `assist`: 현재 컨텍스트와 관련된 보조 작업(예: 주문 페이지에서 공유, 즐겨찾기 등)을 표시하는 데 사용됩니다. `filter`: 콘텐츠를 필터링하는 데 사용됩니다(예: 검색 결과 페이지에서 검색 결과 필터링). `input`: 사용자가 입력한 정보 조각을 나타내는 데 사용됩니다(예: Gmail의 "받는 사람" 필드에 있는 연락처). `suggestion`: 사용자 작업을 간소화하기 위해 동적으로 생성된 추천 정보를 제공하는 데 사용됩니다(예: 채팅 앱에서 사용자가 보낼 메시지 예측).
`elevated`	`elevated`	`boolean`	`false`
그림자를 표시할지 여부를 설정합니다.
`selectable`	`selectable`	`boolean`	`false`
선택 가능 여부를 설정합니다.
`selected`	`selected`	`boolean`	`false`
선택됨 여부를 설정합니다.
`deletable`	`deletable`	`boolean`	`false`
삭제 가능 여부를 설정합니다. `true`이면 칩 오른쪽에 삭제 아이콘이 표시됩니다.
`icon`	`icon`	`string`	-
왼쪽의 Material Icons 아이콘 이름입니다. `slot="icon"`을 통해서도 설정할 수 있습니다.
`selected-icon`	`selectedIcon`	`string`	-
선택됨 상태일 때 왼쪽의 Material Icons 아이콘 이름입니다. `slot="selected-icon"`을 통해서도 설정할 수 있습니다.
`end-icon`	`endIcon`	`string`	-
오른쪽의 Material Icons 아이콘 이름입니다. `slot="end-icon"`을 통해서도 설정할 수 있습니다.
`delete-icon`	`deleteIcon`	`string`	-
삭제 가능할 때 오른쪽 삭제 아이콘의 Material Icons 아이콘 이름입니다. `slot="delete-icon"`을 통해서도 설정할 수 있습니다.
`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 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
`disabled`	`disabled`	`boolean`	`false`
비활성화할지 여부를 설정합니다.
`loading`	`loading`	`boolean`	`false`
로딩할지 여부를 설정합니다.
`name`	`name`	`string`	`''`
버튼의 이름이며, 폼 데이터와 함께 제출됩니다. 참고: `href` 속성이 지정되지 않은 경우에만 유효합니다.
`value`	`value`	`string`	`''`
버튼의 초기값이며, 폼 데이터와 함께 제출됩니다. 참고: `href` 속성이 지정되지 않은 경우에만 유효합니다.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
버튼의 유형입니다. 기본 유형은 `button`입니다. 사용 가능한 유형은 다음과 같습니다: `submit`: 버튼을 클릭하면 폼 데이터를 서버로 제출합니다. `reset`: 버튼을 클릭하면 폼의 모든 필드를 초기값으로 재설정합니다. `button`: 이 유형의 버튼은 기본 동작이 없습니다. 참고: `href` 속성이 지정되지 않은 경우에만 유효합니다.
`form`	`form`	`string`	-
연결된 `<form>` 요소입니다. 이 속성 값은 동일한 페이지에 있는 `<form>` 요소의 `id`여야 합니다. 이 속성을 지정하지 않으면 이 요소는 `<form>` 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 `<form>` 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다. 참고: `href` 속성이 지정되지 않은 경우에만 유효합니다.
`formaction`	`formAction`	`string`	-
폼을 제출할 URL을 지정합니다. 이 속성이 지정되면 `<form>` 요소의 `action` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
폼을 서버에 제출할 때의 콘텐츠 유형을 지정합니다. 사용 가능한 값은 다음과 같습니다: `application/x-www-form-urlencoded`: 이 속성을 지정하지 않았을 때의 기본값 `multipart/form-data`: 폼에 `<input type="file">` 요소가 포함된 경우 사용 `text/plain`: HTML5에서 새로 추가되었으며, 디버깅용입니다. 이 속성이 지정되면 `<form>` 요소의 `enctype` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
폼 제출 시 사용할 HTTP 메서드를 지정합니다. 사용 가능한 값은 다음과 같습니다: `post`: 폼 데이터가 폼 콘텐츠에 포함되어 서버로 전송됩니다. `get`: 폼 데이터가 `?` 구분자와 함께 폼 URI에 추가되어 서버로 전송됩니다. 폼에 부작용이 없고 ASCII 문자만 포함된 경우 이 메서드를 사용합니다. 이 속성이 설정되면 `<form>` 요소의 `method` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
이 속성을 설정하면 폼 제출 시 폼 유효성 검사를 수행하지 않습니다. 이 속성을 설정하면 `<form>` 요소의 `novalidate` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
폼 제출 후 수신된 응답이 표시될 위치를 지정합니다. 사용 가능한 값은 다음과 같습니다: `_self`: 기본값, 현재 프레임에서 열기 `_blank`: 새 창에서 열기 `_parent`: 부모 프레임에서 열기 `_top`: 전체 창에서 열기 이 속성을 설정하면 `<form>` 요소의 `target` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
	`validity`	`ValidityState`	-
폼 유효성 검사 상태 객체입니다. 자세한 내용은 `ValidityState`를 참조하십시오.
	`validationMessage`	`string`	-
폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.

메서드

이름	매개변수	반환값
`click`		`void`
마우스 클릭을 시뮬레이션합니다.
`focus`	`options: FocusOptions` (선택사항)	`void`
현재 요소에 포커스를 설정합니다. 객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다: `preventScroll`: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 `true`로 설정하십시오.
`blur`		`void`
현재 요소에서 포커스를 제거합니다.
`checkValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다.
`reportValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다. 유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
`setCustomValidity`	`message: string`	`void`
사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.

이벤트

이름
`focus`
포커스를 얻었을 때 발생합니다.
`blur`
포커스를 잃었을 때 발생합니다.
`invalid`
폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.
`change`
선택 상태가 변경될 때 발생합니다.
`delete`
삭제 아이콘을 클릭했을 때 발생합니다.

Slots

이름
기본
칩 텍스트
`icon`
왼쪽 요소
`end-icon`
오른쪽 요소
`selected-icon`
선택됨 상태의 왼쪽 요소
`delete-icon`
삭제 가능할 때 오른쪽 삭제 요소

CSS Parts

이름
`button`
내부의 `<button>` 또는 `<a>` 요소
`label`
칩 텍스트
`icon`
왼쪽 아이콘
`end-icon`
오른쪽 아이콘
`selected-icon`
선택됨 상태의 왼쪽 아이콘
`delete-icon`
삭제 가능할 때 오른쪽 삭제 아이콘
`loading`
로딩 중 상태의 `<mdui-circular-progress>` 요소

CSS 사용자 정의 속성

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

이전 장

Checkbox 체크박스

다음 장

CircularProgress 원형 프로그레스