| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
variant | 'button' | 'drag' | 'list' | 'picture-card' | 'avatar' | button | 업로드 UI 유형 |
size | 'sm' | 'md' | 'lg' | md | upload_sm · upload_lg |
disabled | boolean | false | 비활성 (is-disabled) |
fit | boolean | false | 콘텐츠 너비 (upload_fit) |
multiple | boolean | false | 다중 파일 선택 |
accept | string | — | input accept 속성 |
input-id | string | — | file input id |
hint | string | — | button·drag variant 힌트 텍스트 |
dragover | boolean | false | 드래그 오버 상태 (is-dragover) |
error | boolean | false | 오류 (is-error) |
ripple | boolean | true | 클릭 파장(ripple). true 시 자식 클릭 표면에 data-ripple · false 시 data-no-ripple으로 하위 전체 비활성 |
Upload
파일 선택·드래그 앤 드롭·업로드 목록·이미지 카드·아바타 업로드 UI를 제공합니다. upload_input은 시각적으로 숨기고 label.upload_trigger · label.upload_dropzone으로 트리거합니다. 버튼형 트리거는 button 대신 span.btn으로 스킨을 적용합니다. 파일 입력은 비제어 방식으로 동작하며 선택 결과는 change 이벤트에서 처리합니다.
버튼 업로드
label.upload_trigger 안에 span.btn으로 버튼 스킨을 적용합니다. button 요소는 label 안에 넣지 않습니다.
PNG, JPG · 최대 5MB
드래그 앤 드롭
upload_dropzone으로 클릭·드래그 영역을 만듭니다. multiple · accept 속성으로 파일 제한을 지정합니다.
파일 목록
upload_list · upload_item으로 업로드 진행·완료·오류 상태를 표시합니다. 진행률은 upload_progress-bar의 style="width: …" 또는 CSS 변수로 제어합니다.
- 프로젝트_제안서_v2.pdf
- 디자인_가이드.zip
- 대용량_영상.mp4
사진 카드
upload_cards 그리드에 미리보기 카드와 upload_card-trigger를 배치합니다. 호버 시 upload_card-actions 오버레이가 표시됩니다.
아바타 업로드
upload_avatar로 프로필 이미지 변경 UI를 구성합니다. Avatar 컴포넌트와 조합합니다.
폼 필드
form_field와 조합해 레이블·힌트·오류 메시지를 표시합니다.
제출 전 파일명을 확인해 주세요.
첨부파일은 필수입니다.
API · Props
API · Slots
| 슬롯 | 설명 |
|---|---|
trigger | 업로드 트리거 UI (button·drag·picture-card·avatar) |
hint | 힌트 텍스트 (hint prop 대체) |
default | 파일 목록 (list variant) |
cards | 이미지 카드 그리드 (picture-card) |
API · Events
| 이벤트 | 설명 |
|---|---|
change | 파일 선택 변경 시. 네이티브 input change 이벤트 전달 |
클래스 · 속성
Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
upload | 루트 |
upload_sm · upload_lg · upload_fit | 크기·너비 |
upload_trigger · upload_dropzone · upload_input | button·drag 트리거 |
upload_card · upload_cards · upload_avatar | picture-card·avatar |
upload_list · upload_item · upload_item-info | 목록 variant |
upload_hint · upload_progress | 힌트·진행률 |
is-dragover · is-error · is-disabled | 상태 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--upload-max-width | var(--input-max-width) | 최대 너비 |
--upload-dropzone-padding · --upload-dropzone-icon-size | — | 드롭존 |
--upload-card-size · --upload-list-gap | 6.5rem · var(--space-xs) | 카드·목록 |