Installation
bash
npx axis-cli add attachment-card --agenticInteractive Demo
📄
analysis-report.pdf
3.1 MB
File Types
🖼️
photo.png
239.3 KB
📄
report.pdf
1.2 MB
💻
index.tsx
4.1 KB
📦
project.zip
14.9 MB
📎
data.bin
869.1 KB
States
Complete
🖼️
done.png
488.3 KB
Uploading
📄
uploading.pdf
1.9 MB45%
Error
📦
failed.zip
47.7 MB업로드 실패
Usage
tsx
import { AttachmentCard } from '@axis-ds/agentic-ui'
export function Example() {
return (
<div className="space-y-2">
<AttachmentCard
type="image"
name="screenshot.png"
size={245000}
status="complete"
onRemove={() => console.log('삭제')}
/>
<AttachmentCard
type="document"
name="report.pdf"
size={1250000}
status="uploading"
progress={65}
/>
</div>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
typeRequired | "image" | "document" | "code" | "archive" | "other" | - | 파일 유형 |
nameRequired | string | - | 파일 이름 |
size | number | - | 파일 크기 (bytes) |
url | string | - | 파일 URL |
thumbnail | string | - | 이미지 썸네일 URL |
status | "uploading" | "complete" | "error" | "complete" | 파일 상태 |
progress | number | - | 업로드 진행률 (0-100) |
onRemove | () => void | - | 삭제 콜백 |
className | string | - | 추가 CSS 클래스 |
typeRequiredType:
"image" | "document" | "code" | "archive" | "other"파일 유형
nameRequiredType:
string파일 이름
sizeType:
numberDefault:
-파일 크기 (bytes)
urlType:
stringDefault:
-파일 URL
thumbnailType:
stringDefault:
-이미지 썸네일 URL
statusType:
"uploading" | "complete" | "error"Default:
"complete"파일 상태
progressType:
numberDefault:
-업로드 진행률 (0-100)
onRemoveType:
() => voidDefault:
-삭제 콜백
classNameType:
stringDefault:
-추가 CSS 클래스