Empty
Empty
출처: 문서
본문
데이터가 없을 때(빈 상태) 보여주는 플레이스홀더 힌트 컴포넌트예요. 목록이 비어 있을 때 "표시할 데이터가 없어요"라는 안내를 보여주고 싶을 때 사용해요.
기본 사용 (Basic usage)
기본 형태예요. description prop으로 안내 문구를 넣을 수 있어요.
커스텀 이미지 (Custom image)
image prop을 사용해 이미지 URL을 설정할 수 있어요.
이미지 크기 (Image size)
image-size prop을 사용해 이미지 크기를 제어할 수 있어요.
하단 내용 (Bottom content)
default 슬롯을 사용해 하단에 내용을 넣을 수 있어요. 버튼 같은 것을 추가하기 좋아요.
No Data
Button
커스텀 스타일 (Custom styles)
이제 Empty 컴포넌트에 커스텀 스타일을 설정할 수 있어요. css/scss 언어로 전역 또는 로컬 색상을 바꿀 수 있어요. 전역 색상 변수로는 --el-empty-fill-color-0, --el-empty-fill-color-1, --el-empty-fill-color-2, ..., --el-empty-fill-color-9를 제공해요. 이렇게 쓸 수 있어요: :root { --el-empty-fill-color-0: red; --el-empty-fill-color-1: blue; }. 다만 보통 스타일을 바꾸려면 모든 색상을 바꿔야 해요. 왜냐하면 이 색상들이 하나의 조합으로 구성되어 있기 때문이에요.
기본 변수 (Default Variables)
| Variable | Color |
|---|---|
| --el-empty-fill-color-0 | var(--el-color-white) |
| --el-empty-fill-color-1 | #fcfcfd |
| --el-empty-fill-color-2 | #f8f9fb |
| --el-empty-fill-color-3 | #f7f8fc |
| --el-empty-fill-color-4 | #eeeff3 |
| --el-empty-fill-color-5 | #edeef2 |
| --el-empty-fill-color-6 | #e9ebef |
| --el-empty-fill-color-7 | #e5e7e9 |
| --el-empty-fill-color-8 | #e0e3e9 |
| --el-empty-fill-color-9 | #d5d7de |
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| image | image URL of empty | string | '' |
| image-size | image size (width) of empty | number | — |
| description | description of empty | string | '' |
Slots
| Name | Description |
|---|---|
| default | content as bottom content |
| image | content as image |
| description | content as description |