analysis-report.pdf
문서3.1 MB
npx @axis-ds/cli add attachment-card --agenticimport { 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>
)
}analysis-report.pdf
photo.png
report.pdf
index.tsx
project.zip
data.bin
Complete
done.png
Uploading
uploading.pdf
Error
failed.zip
| 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 클래스 |
typeRequired"image" | "document" | "code" | "archive" | "other"파일 유형
nameRequiredstring파일 이름
sizenumber-파일 크기 (bytes)
urlstring-파일 URL
thumbnailstring-이미지 썸네일 URL
status"uploading" | "complete" | "error""complete"파일 상태
progressnumber-업로드 진행률 (0-100)
onRemove() => void-삭제 콜백
classNamestring-추가 CSS 클래스
카드는 role="article"로 마크업되고, 업로드 진행은 role="progressbar" + aria-valuenow / aria-valuemin / aria-valuemax로 전달됩니다.
| Key | Action |
|---|---|
| Tab | 카드 내 액션(삭제 등)으로 이동합니다. |
| Enter / Space | 포커스된 액션을 실행합니다. |