zombieJ
6 years ago
committed by
GitHub
GitHub
85 changed files with 3961 additions and 691 deletions
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,31 @@ |
|||
import * as React from 'react'; |
|||
import Empty from '../empty'; |
|||
import { ConfigConsumer, ConfigConsumerProps } from './'; |
|||
import emptyImg from './empty.svg'; |
|||
|
|||
const renderEmpty = (componentName?: string): React.ReactNode => ( |
|||
<ConfigConsumer> |
|||
{({ getPrefixCls }: ConfigConsumerProps) => { |
|||
const prefix = getPrefixCls('empty'); |
|||
|
|||
switch (componentName) { |
|||
case 'Table': |
|||
case 'List': |
|||
return <Empty image={emptyImg} className={`${prefix}-normal`} />; |
|||
|
|||
case 'Select': |
|||
case 'TreeSelect': |
|||
case 'Cascader': |
|||
case 'Transfer': |
|||
return <Empty image={emptyImg} className={`${prefix}-small`} />; |
|||
|
|||
default: |
|||
return <Empty />; |
|||
} |
|||
}} |
|||
</ConfigConsumer> |
|||
); |
|||
|
|||
export type RenderEmptyHandler = typeof renderEmpty; |
|||
|
|||
export default renderEmpty; |
|||
@ -0,0 +1,504 @@ |
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
|||
|
|||
exports[`renders ./components/empty/demo/basic.md correctly 1`] = ` |
|||
<div |
|||
class="ant-empty" |
|||
> |
|||
<div |
|||
class="ant-empty-image" |
|||
> |
|||
<img |
|||
alt="No Data" |
|||
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTg0IiBoZWlnaHQ9IjE1MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0IDMxLjY3KSI+PGVsbGlwc2UgZmlsbC1vcGFjaXR5PSIuOCIgZmlsbD0iI0Y1RjVGNyIgY3g9IjY3Ljc5NyIgY3k9IjEwNi44OSIgcng9IjY3Ljc5NyIgcnk9IjEyLjY2OCIvPjxwYXRoIGQ9Ik0xMjIuMDM0IDY5LjY3NEw5OC4xMDkgNDAuMjI5Yy0xLjE0OC0xLjM4Ni0yLjgyNi0yLjIyNS00LjU5My0yLjIyNWgtNTEuNDRjLTEuNzY2IDAtMy40NDQuODM5LTQuNTkyIDIuMjI1TDEzLjU2IDY5LjY3NHYxNS4zODNoMTA4LjQ3NVY2OS42NzR6IiBmaWxsPSIjQUVCOEMyIi8+PHBhdGggZD0iTTEwMS41MzcgODYuMjE0TDgwLjYzIDYxLjEwMmMtMS4wMDEtMS4yMDctMi41MDctMS44NjctNC4wNDgtMS44NjdIMzEuNzI0Yy0xLjU0IDAtMy4wNDcuNjYtNC4wNDggMS44NjdMNi43NjkgODYuMjE0djEzLjc5Mmg5NC43NjhWODYuMjE0eiIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMuNTYpIi8+PHBhdGggZD0iTTMzLjgzIDBoNjcuOTMzYTQgNCAwIDAgMSA0IDR2OTMuMzQ0YTQgNCAwIDAgMS00IDRIMzMuODNhNCA0IDAgMCAxLTQtNFY0YTQgNCAwIDAgMSA0LTR6IiBmaWxsPSIjRjVGNUY3Ii8+PHBhdGggZD0iTTQyLjY3OCA5Ljk1M2g1MC4yMzdhMiAyIDAgMCAxIDIgMlYzNi45MWEyIDIgMCAwIDEtMiAySDQyLjY3OGEyIDIgMCAwIDEtMi0yVjExLjk1M2EyIDIgMCAwIDEgMi0yek00Mi45NCA0OS43NjdoNDkuNzEzYTIuMjYyIDIuMjYyIDAgMSAxIDAgNC41MjRINDIuOTRhMi4yNjIgMi4yNjIgMCAwIDEgMC00LjUyNHpNNDIuOTQgNjEuNTNoNDkuNzEzYTIuMjYyIDIuMjYyIDAgMSAxIDAgNC41MjVINDIuOTRhMi4yNjIgMi4yNjIgMCAwIDEgMC00LjUyNXpNMTIxLjgxMyAxMDUuMDMyYy0uNzc1IDMuMDcxLTMuNDk3IDUuMzYtNi43MzUgNS4zNkgyMC41MTVjLTMuMjM4IDAtNS45Ni0yLjI5LTYuNzM0LTUuMzZhNy4zMDkgNy4zMDkgMCAwIDEtLjIyMi0xLjc5VjY5LjY3NWgyNi4zMThjMi45MDcgMCA1LjI1IDIuNDQ4IDUuMjUgNS40MnYuMDRjMCAyLjk3MSAyLjM3IDUuMzcgNS4yNzcgNS4zN2gzNC43ODVjMi45MDcgMCA1LjI3Ny0yLjQyMSA1LjI3Ny01LjM5M1Y3NS4xYzAtMi45NzIgMi4zNDMtNS40MjYgNS4yNS01LjQyNmgyNi4zMTh2MzMuNTY5YzAgLjYxNy0uMDc3IDEuMjE2LS4yMjEgMS43ODl6IiBmaWxsPSIjRENFMEU2Ii8+PC9nPjxwYXRoIGQ9Ik0xNDkuMTIxIDMzLjI5MmwtNi44MyAyLjY1YTEgMSAwIDAgMS0xLjMxNy0xLjIzbDEuOTM3LTYuMjA3Yy0yLjU4OS0yLjk0NC00LjEwOS02LjUzNC00LjEwOS0xMC40MDhDMTM4LjgwMiA4LjEwMiAxNDguOTIgMCAxNjEuNDAyIDAgMTczLjg4MSAwIDE4NCA4LjEwMiAxODQgMTguMDk3YzAgOS45OTUtMTAuMTE4IDE4LjA5Ny0yMi41OTkgMTguMDk3LTQuNTI4IDAtOC43NDQtMS4wNjYtMTIuMjgtMi45MDJ6IiBmaWxsPSIjRENFMEU2Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQ5LjY1IDE1LjM4MykiIGZpbGw9IiNGRkYiPjxlbGxpcHNlIGN4PSIyMC42NTQiIGN5PSIzLjE2NyIgcng9IjIuODQ5IiByeT0iMi44MTUiLz48cGF0aCBkPSJNNS42OTggNS42M0gwTDIuODk4LjcwNHpNOS4yNTkuNzA0aDQuOTg1VjUuNjNIOS4yNTl6Ii8+PC9nPjwvZz48L3N2Zz4=" |
|||
/> |
|||
</div> |
|||
<p |
|||
class="ant-empty-description" |
|||
> |
|||
No Data |
|||
</p> |
|||
</div> |
|||
`; |
|||
|
|||
exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = ` |
|||
<div> |
|||
<button |
|||
aria-checked="false" |
|||
class="ant-switch" |
|||
role="switch" |
|||
type="button" |
|||
> |
|||
<span |
|||
class="ant-switch-inner" |
|||
> |
|||
default |
|||
</span> |
|||
</button> |
|||
<div |
|||
class="ant-divider ant-divider-horizontal" |
|||
/> |
|||
<div |
|||
class="config-provider" |
|||
> |
|||
<h3> |
|||
Select |
|||
</h3> |
|||
<div |
|||
class="ant-select ant-select-enabled" |
|||
style="width:200px" |
|||
> |
|||
<div |
|||
aria-autocomplete="list" |
|||
aria-controls="test-uuid" |
|||
aria-expanded="false" |
|||
aria-haspopup="true" |
|||
class="ant-select-selection |
|||
ant-select-selection--single" |
|||
role="combobox" |
|||
tabindex="0" |
|||
> |
|||
<div |
|||
class="ant-select-selection__rendered" |
|||
/> |
|||
<span |
|||
class="ant-select-arrow" |
|||
style="user-select:none;-webkit-user-select:none" |
|||
unselectable="on" |
|||
> |
|||
<i |
|||
class="anticon anticon-down ant-select-arrow-icon" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
class="" |
|||
data-icon="down" |
|||
fill="currentColor" |
|||
height="1em" |
|||
viewBox="64 64 896 896" |
|||
width="1em" |
|||
> |
|||
<path |
|||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" |
|||
/> |
|||
</svg> |
|||
</i> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<h3> |
|||
TreeSelect |
|||
</h3> |
|||
<span |
|||
aria-haspopup="listbox" |
|||
class="ant-select ant-select-enabled" |
|||
role="combobox" |
|||
style="width:200px" |
|||
tabindex="0" |
|||
> |
|||
<span |
|||
class="ant-select-selection ant-select-selection--single" |
|||
> |
|||
<span |
|||
class="ant-select-selection__rendered" |
|||
> |
|||
<span |
|||
class="ant-select-selection__placeholder" |
|||
/> |
|||
</span> |
|||
<span |
|||
class="ant-select-arrow" |
|||
style="outline:none" |
|||
> |
|||
<i |
|||
class="anticon anticon-down ant-select-arrow-icon" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
class="" |
|||
data-icon="down" |
|||
fill="currentColor" |
|||
height="1em" |
|||
viewBox="64 64 896 896" |
|||
width="1em" |
|||
> |
|||
<path |
|||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" |
|||
/> |
|||
</svg> |
|||
</i> |
|||
</span> |
|||
</span> |
|||
</span> |
|||
<h3> |
|||
Cascader |
|||
</h3> |
|||
<span |
|||
class="ant-cascader-picker ant-cascader-picker-show-search" |
|||
style="width:200px" |
|||
tabindex="0" |
|||
> |
|||
<span |
|||
class="ant-cascader-picker-label" |
|||
/> |
|||
<input |
|||
autocomplete="off" |
|||
class="ant-input ant-cascader-input " |
|||
placeholder="Please select" |
|||
type="text" |
|||
value="" |
|||
/> |
|||
<i |
|||
class="anticon anticon-down ant-cascader-picker-arrow" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
class="" |
|||
data-icon="down" |
|||
fill="currentColor" |
|||
height="1em" |
|||
viewBox="64 64 896 896" |
|||
width="1em" |
|||
> |
|||
<path |
|||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" |
|||
/> |
|||
</svg> |
|||
</i> |
|||
</span> |
|||
<h3> |
|||
Transfer |
|||
</h3> |
|||
<div |
|||
class="ant-transfer" |
|||
> |
|||
<div |
|||
class="ant-transfer-list" |
|||
> |
|||
<div |
|||
class="ant-transfer-list-header" |
|||
> |
|||
<label |
|||
class="ant-checkbox-wrapper" |
|||
> |
|||
<span |
|||
class="ant-checkbox" |
|||
> |
|||
<input |
|||
class="ant-checkbox-input" |
|||
type="checkbox" |
|||
/> |
|||
<span |
|||
class="ant-checkbox-inner" |
|||
/> |
|||
</span> |
|||
</label> |
|||
<span |
|||
class="ant-transfer-list-header-selected" |
|||
> |
|||
<span> |
|||
0 item |
|||
</span> |
|||
<span |
|||
class="ant-transfer-list-header-title" |
|||
/> |
|||
</span> |
|||
</div> |
|||
<div |
|||
class="ant-transfer-list-body" |
|||
> |
|||
<ul |
|||
class="ant-transfer-list-content" |
|||
/> |
|||
<div |
|||
class="ant-transfer-list-body-not-found" |
|||
> |
|||
<div |
|||
class="ant-empty ant-empty-small" |
|||
> |
|||
<div |
|||
class="ant-empty-image" |
|||
> |
|||
<img |
|||
alt="No Data" |
|||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI0MXB4IiB2aWV3Qm94PSIwIDAgNjQgNDEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDxnIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NzIuMDAwMDAwLCAtMTMzNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY0LjAwMDAwMCwgMTExNC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnICB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MC4wMDAwMDAsIDc4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjguMDAwMDAwLCAxNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnID4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlICBmaWxsPSIjRjVGNUY1IiBjeD0iMzIiIGN5PSIzMyIgcng9IjMyIiByeT0iNyI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5LjAwMDAwMCwgMC4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTQ2LDEyLjc2MDU2MDQgTDM1Ljg1NDMwNDcsMS4yNTczOTYzMyBDMzUuMzY3NDQxNCwwLjQ3MzgyNjYwNSAzNC42NTU4Nzg5LDAgMzMuOTA2NzYxNywwIEwxMi4wOTMyMzgzLDAgQzExLjM0NDEyMTEsMCAxMC42MzI1NTg2LDAuNDczOTUwMjU1IDEwLjE0NTY5NTMsMS4yNTczOTYzMyBMMi42MTQ3OTcyN2UtMTIsMTIuNzYwNTYwNCBMMCwyMiBMNDYsMjIgTDQ2LDEyLjc2MDU2MDQgWiIgID48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMyLjYxMzI4MTMsMTUuOTMxNSBDMzIuNjEzMjgxMywxNC4zMjU4NTExIDMzLjYwNjk1MzEsMTMuMDAwMjM0IDM0LjgzOTY5OTIsMTMgTDQ2LDEzIEw0NiwzMS4xMzcxMjc3IEM0NiwzMy4yNTg5NTc0IDQ0LjY3OTM4NjcsMzUgNDMuMDUwNDI5NywzNSBMMi45NDk1NzAzMSwzNSBDMS4zMjA1MjM0NCwzNSAwLDMzLjI1ODg0MDQgMCwzMS4xMzcxMjc3IEwwLDEzIEwxMS4xNjAzMDA4LDEzIEMxMi4zOTMwNDY5LDEzIDEzLjM4NjcxODgsMTQuMzIyODA4NSAxMy4zODY3MTg4LDE1LjkyODQ1NzQgTDEzLjM4NjcxODgsMTUuOTQ5NjM4MyBDMTMuMzg2NzE4OCwxNy41NTUyODcyIDE0LjM5MTcxMDksMTguODUxMTgwOSAxNS42MjQ0NTcsMTguODUxMTgwOSBMMzAuMzc1NTQzLDE4Ljg1MTE4MDkgQzMxLjYwODI4OTEsMTguODUxMTgwOSAzMi42MTMyODEzLDE3LjU0MzM1MTEgMzIuNjEzMjgxMywxNS45Mzc3MDIxIEwzMi42MTMyODEzLDE1LjkzMTUgWiIgIGZpbGw9IiNGQUZBRkEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" |
|||
/> |
|||
</div> |
|||
<p |
|||
class="ant-empty-description" |
|||
> |
|||
No Data |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="ant-transfer-operation" |
|||
> |
|||
<button |
|||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" |
|||
disabled="" |
|||
type="button" |
|||
> |
|||
<i |
|||
class="anticon anticon-right" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
class="" |
|||
data-icon="right" |
|||
fill="currentColor" |
|||
height="1em" |
|||
viewBox="64 64 896 896" |
|||
width="1em" |
|||
> |
|||
<path |
|||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z" |
|||
/> |
|||
</svg> |
|||
</i> |
|||
</button> |
|||
<button |
|||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" |
|||
disabled="" |
|||
type="button" |
|||
> |
|||
<i |
|||
class="anticon anticon-left" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
class="" |
|||
data-icon="left" |
|||
fill="currentColor" |
|||
height="1em" |
|||
viewBox="64 64 896 896" |
|||
width="1em" |
|||
> |
|||
<path |
|||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" |
|||
/> |
|||
</svg> |
|||
</i> |
|||
</button> |
|||
</div> |
|||
<div |
|||
class="ant-transfer-list" |
|||
> |
|||
<div |
|||
class="ant-transfer-list-header" |
|||
> |
|||
<label |
|||
class="ant-checkbox-wrapper" |
|||
> |
|||
<span |
|||
class="ant-checkbox" |
|||
> |
|||
<input |
|||
class="ant-checkbox-input" |
|||
type="checkbox" |
|||
/> |
|||
<span |
|||
class="ant-checkbox-inner" |
|||
/> |
|||
</span> |
|||
</label> |
|||
<span |
|||
class="ant-transfer-list-header-selected" |
|||
> |
|||
<span> |
|||
0 item |
|||
</span> |
|||
<span |
|||
class="ant-transfer-list-header-title" |
|||
/> |
|||
</span> |
|||
</div> |
|||
<div |
|||
class="ant-transfer-list-body" |
|||
> |
|||
<ul |
|||
class="ant-transfer-list-content" |
|||
/> |
|||
<div |
|||
class="ant-transfer-list-body-not-found" |
|||
> |
|||
<div |
|||
class="ant-empty ant-empty-small" |
|||
> |
|||
<div |
|||
class="ant-empty-image" |
|||
> |
|||
<img |
|||
alt="No Data" |
|||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI0MXB4IiB2aWV3Qm94PSIwIDAgNjQgNDEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDxnIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NzIuMDAwMDAwLCAtMTMzNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY0LjAwMDAwMCwgMTExNC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnICB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MC4wMDAwMDAsIDc4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjguMDAwMDAwLCAxNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnID4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlICBmaWxsPSIjRjVGNUY1IiBjeD0iMzIiIGN5PSIzMyIgcng9IjMyIiByeT0iNyI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5LjAwMDAwMCwgMC4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTQ2LDEyLjc2MDU2MDQgTDM1Ljg1NDMwNDcsMS4yNTczOTYzMyBDMzUuMzY3NDQxNCwwLjQ3MzgyNjYwNSAzNC42NTU4Nzg5LDAgMzMuOTA2NzYxNywwIEwxMi4wOTMyMzgzLDAgQzExLjM0NDEyMTEsMCAxMC42MzI1NTg2LDAuNDczOTUwMjU1IDEwLjE0NTY5NTMsMS4yNTczOTYzMyBMMi42MTQ3OTcyN2UtMTIsMTIuNzYwNTYwNCBMMCwyMiBMNDYsMjIgTDQ2LDEyLjc2MDU2MDQgWiIgID48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMyLjYxMzI4MTMsMTUuOTMxNSBDMzIuNjEzMjgxMywxNC4zMjU4NTExIDMzLjYwNjk1MzEsMTMuMDAwMjM0IDM0LjgzOTY5OTIsMTMgTDQ2LDEzIEw0NiwzMS4xMzcxMjc3IEM0NiwzMy4yNTg5NTc0IDQ0LjY3OTM4NjcsMzUgNDMuMDUwNDI5NywzNSBMMi45NDk1NzAzMSwzNSBDMS4zMjA1MjM0NCwzNSAwLDMzLjI1ODg0MDQgMCwzMS4xMzcxMjc3IEwwLDEzIEwxMS4xNjAzMDA4LDEzIEMxMi4zOTMwNDY5LDEzIDEzLjM4NjcxODgsMTQuMzIyODA4NSAxMy4zODY3MTg4LDE1LjkyODQ1NzQgTDEzLjM4NjcxODgsMTUuOTQ5NjM4MyBDMTMuMzg2NzE4OCwxNy41NTUyODcyIDE0LjM5MTcxMDksMTguODUxMTgwOSAxNS42MjQ0NTcsMTguODUxMTgwOSBMMzAuMzc1NTQzLDE4Ljg1MTE4MDkgQzMxLjYwODI4OTEsMTguODUxMTgwOSAzMi42MTMyODEzLDE3LjU0MzM1MTEgMzIuNjEzMjgxMywxNS45Mzc3MDIxIEwzMi42MTMyODEzLDE1LjkzMTUgWiIgIGZpbGw9IiNGQUZBRkEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" |
|||
/> |
|||
</div> |
|||
<p |
|||
class="ant-empty-description" |
|||
> |
|||
No Data |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<h3> |
|||
Table |
|||
</h3> |
|||
<div |
|||
class="ant-table-wrapper" |
|||
style="margin-top:8px" |
|||
> |
|||
<div |
|||
class="ant-spin-nested-loading" |
|||
> |
|||
<div |
|||
class="ant-spin-container" |
|||
> |
|||
<div |
|||
class="ant-table ant-table-default ant-table-empty ant-table-scroll-position-left" |
|||
> |
|||
<div |
|||
class="ant-table-content" |
|||
> |
|||
<div |
|||
class="ant-table-body" |
|||
> |
|||
<table |
|||
class="" |
|||
> |
|||
<colgroup> |
|||
<col /> |
|||
<col /> |
|||
</colgroup> |
|||
<thead |
|||
class="ant-table-thead" |
|||
> |
|||
<tr> |
|||
<th |
|||
class="" |
|||
> |
|||
<div> |
|||
Name |
|||
</div> |
|||
</th> |
|||
<th |
|||
class="" |
|||
> |
|||
<div> |
|||
Age |
|||
</div> |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody |
|||
class="ant-table-tbody" |
|||
/> |
|||
</table> |
|||
</div> |
|||
<div |
|||
class="ant-table-placeholder" |
|||
> |
|||
<div |
|||
class="ant-empty ant-empty-normal" |
|||
> |
|||
<div |
|||
class="ant-empty-image" |
|||
> |
|||
<img |
|||
alt="No Data" |
|||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI0MXB4IiB2aWV3Qm94PSIwIDAgNjQgNDEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDxnIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NzIuMDAwMDAwLCAtMTMzNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY0LjAwMDAwMCwgMTExNC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnICB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MC4wMDAwMDAsIDc4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjguMDAwMDAwLCAxNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnID4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlICBmaWxsPSIjRjVGNUY1IiBjeD0iMzIiIGN5PSIzMyIgcng9IjMyIiByeT0iNyI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5LjAwMDAwMCwgMC4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTQ2LDEyLjc2MDU2MDQgTDM1Ljg1NDMwNDcsMS4yNTczOTYzMyBDMzUuMzY3NDQxNCwwLjQ3MzgyNjYwNSAzNC42NTU4Nzg5LDAgMzMuOTA2NzYxNywwIEwxMi4wOTMyMzgzLDAgQzExLjM0NDEyMTEsMCAxMC42MzI1NTg2LDAuNDczOTUwMjU1IDEwLjE0NTY5NTMsMS4yNTczOTYzMyBMMi42MTQ3OTcyN2UtMTIsMTIuNzYwNTYwNCBMMCwyMiBMNDYsMjIgTDQ2LDEyLjc2MDU2MDQgWiIgID48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMyLjYxMzI4MTMsMTUuOTMxNSBDMzIuNjEzMjgxMywxNC4zMjU4NTExIDMzLjYwNjk1MzEsMTMuMDAwMjM0IDM0LjgzOTY5OTIsMTMgTDQ2LDEzIEw0NiwzMS4xMzcxMjc3IEM0NiwzMy4yNTg5NTc0IDQ0LjY3OTM4NjcsMzUgNDMuMDUwNDI5NywzNSBMMi45NDk1NzAzMSwzNSBDMS4zMjA1MjM0NCwzNSAwLDMzLjI1ODg0MDQgMCwzMS4xMzcxMjc3IEwwLDEzIEwxMS4xNjAzMDA4LDEzIEMxMi4zOTMwNDY5LDEzIDEzLjM4NjcxODgsMTQuMzIyODA4NSAxMy4zODY3MTg4LDE1LjkyODQ1NzQgTDEzLjM4NjcxODgsMTUuOTQ5NjM4MyBDMTMuMzg2NzE4OCwxNy41NTUyODcyIDE0LjM5MTcxMDksMTguODUxMTgwOSAxNS42MjQ0NTcsMTguODUxMTgwOSBMMzAuMzc1NTQzLDE4Ljg1MTE4MDkgQzMxLjYwODI4OTEsMTguODUxMTgwOSAzMi42MTMyODEzLDE3LjU0MzM1MTEgMzIuNjEzMjgxMywxNS45Mzc3MDIxIEwzMi42MTMyODEzLDE1LjkzMTUgWiIgIGZpbGw9IiNGQUZBRkEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" |
|||
/> |
|||
</div> |
|||
<p |
|||
class="ant-empty-description" |
|||
> |
|||
No Data |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<h3> |
|||
List |
|||
</h3> |
|||
<div |
|||
class="ant-list ant-list-split" |
|||
> |
|||
<div |
|||
class="ant-spin-nested-loading" |
|||
> |
|||
<div |
|||
class="ant-spin-container" |
|||
> |
|||
<div |
|||
class="ant-list-empty-text" |
|||
> |
|||
<div |
|||
class="ant-empty ant-empty-normal" |
|||
> |
|||
<div |
|||
class="ant-empty-image" |
|||
> |
|||
<img |
|||
alt="No Data" |
|||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI0MXB4IiB2aWV3Qm94PSIwIDAgNjQgNDEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDxnIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NzIuMDAwMDAwLCAtMTMzNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY0LjAwMDAwMCwgMTExNC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnICB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MC4wMDAwMDAsIDc4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjguMDAwMDAwLCAxNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnID4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlICBmaWxsPSIjRjVGNUY1IiBjeD0iMzIiIGN5PSIzMyIgcng9IjMyIiByeT0iNyI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5LjAwMDAwMCwgMC4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTQ2LDEyLjc2MDU2MDQgTDM1Ljg1NDMwNDcsMS4yNTczOTYzMyBDMzUuMzY3NDQxNCwwLjQ3MzgyNjYwNSAzNC42NTU4Nzg5LDAgMzMuOTA2NzYxNywwIEwxMi4wOTMyMzgzLDAgQzExLjM0NDEyMTEsMCAxMC42MzI1NTg2LDAuNDczOTUwMjU1IDEwLjE0NTY5NTMsMS4yNTczOTYzMyBMMi42MTQ3OTcyN2UtMTIsMTIuNzYwNTYwNCBMMCwyMiBMNDYsMjIgTDQ2LDEyLjc2MDU2MDQgWiIgID48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMyLjYxMzI4MTMsMTUuOTMxNSBDMzIuNjEzMjgxMywxNC4zMjU4NTExIDMzLjYwNjk1MzEsMTMuMDAwMjM0IDM0LjgzOTY5OTIsMTMgTDQ2LDEzIEw0NiwzMS4xMzcxMjc3IEM0NiwzMy4yNTg5NTc0IDQ0LjY3OTM4NjcsMzUgNDMuMDUwNDI5NywzNSBMMi45NDk1NzAzMSwzNSBDMS4zMjA1MjM0NCwzNSAwLDMzLjI1ODg0MDQgMCwzMS4xMzcxMjc3IEwwLDEzIEwxMS4xNjAzMDA4LDEzIEMxMi4zOTMwNDY5LDEzIDEzLjM4NjcxODgsMTQuMzIyODA4NSAxMy4zODY3MTg4LDE1LjkyODQ1NzQgTDEzLjM4NjcxODgsMTUuOTQ5NjM4MyBDMTMuMzg2NzE4OCwxNy41NTUyODcyIDE0LjM5MTcxMDksMTguODUxMTgwOSAxNS42MjQ0NTcsMTguODUxMTgwOSBMMzAuMzc1NTQzLDE4Ljg1MTE4MDkgQzMxLjYwODI4OTEsMTguODUxMTgwOSAzMi42MTMyODEzLDE3LjU0MzM1MTEgMzIuNjEzMjgxMywxNS45Mzc3MDIxIEwzMi42MTMyODEzLDE1LjkzMTUgWiIgIGZpbGw9IiNGQUZBRkEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" |
|||
/> |
|||
</div> |
|||
<p |
|||
class="ant-empty-description" |
|||
> |
|||
No Data |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`; |
|||
|
|||
exports[`renders ./components/empty/demo/customize.md correctly 1`] = ` |
|||
<div |
|||
class="ant-empty" |
|||
> |
|||
<div |
|||
class="ant-empty-image" |
|||
> |
|||
<img |
|||
alt="empty" |
|||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" |
|||
/> |
|||
</div> |
|||
<p |
|||
class="ant-empty-description" |
|||
> |
|||
<span> |
|||
Customize |
|||
<a |
|||
href="#API" |
|||
> |
|||
Description |
|||
</a> |
|||
</span> |
|||
</p> |
|||
<div |
|||
class="ant-empty-footer" |
|||
> |
|||
<button |
|||
class="ant-btn ant-btn-primary" |
|||
type="button" |
|||
> |
|||
<span> |
|||
立即创建 |
|||
</span> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
`; |
|||
@ -0,0 +1,3 @@ |
|||
import demoTest from '../../../tests/shared/demoTest'; |
|||
|
|||
demoTest('empty'); |
|||
@ -0,0 +1,23 @@ |
|||
--- |
|||
order: 0 |
|||
title: |
|||
zh-CN: 基本 |
|||
en-US: Basic |
|||
--- |
|||
|
|||
## zh-CN |
|||
|
|||
简单的展示。 |
|||
|
|||
## en-US |
|||
|
|||
Simplest Usage. |
|||
|
|||
```jsx |
|||
import { Empty } from 'antd'; |
|||
|
|||
ReactDOM.render( |
|||
<Empty />, |
|||
mountNode |
|||
); |
|||
``` |
|||
@ -0,0 +1,101 @@ |
|||
--- |
|||
order: 3 |
|||
title: |
|||
zh-CN: 全局化配置 |
|||
en-US: ConfigProvider |
|||
--- |
|||
|
|||
## zh-CN |
|||
|
|||
自定义全局组件的 Empty 样式。 |
|||
|
|||
## en-US |
|||
|
|||
Use ConfigProvider set global Empty style. |
|||
|
|||
```jsx |
|||
import { |
|||
ConfigProvider, Switch, Divider, Icon, |
|||
TreeSelect, Select, Cascader, |
|||
Transfer, |
|||
Table, List, |
|||
} from 'antd'; |
|||
|
|||
const customizeRenderEmpty = () => ( |
|||
<div style={{ textAlign: 'center' }}> |
|||
<Icon type="smile" style={{ fontSize: 20 }} /> |
|||
<p>Data Not Found</p> |
|||
</div> |
|||
); |
|||
|
|||
const style = { width: 200 }; |
|||
|
|||
class Demo extends React.Component { |
|||
state = { |
|||
customize: false, |
|||
}; |
|||
|
|||
render() { |
|||
const { customize } = this.state; |
|||
return ( |
|||
<div> |
|||
<Switch |
|||
unCheckedChildren="default" |
|||
checkedChildren="customize" |
|||
checked={customize} |
|||
onChange={(val) => { |
|||
this.setState({ customize: val }); |
|||
}} |
|||
/> |
|||
|
|||
<Divider /> |
|||
|
|||
<ConfigProvider renderEmpty={customize && customizeRenderEmpty}> |
|||
<div className="config-provider"> |
|||
<h3>Select</h3> |
|||
<Select style={style} /> |
|||
|
|||
<h3>TreeSelect</h3> |
|||
<TreeSelect style={style} treeData={[]} /> |
|||
|
|||
<h3>Cascader</h3> |
|||
<Cascader style={style} options={[]} showSearch /> |
|||
|
|||
<h3>Transfer</h3> |
|||
<Transfer /> |
|||
|
|||
<h3>Table</h3> |
|||
<Table |
|||
style={{ marginTop: 8 }} |
|||
columns={[ |
|||
{ |
|||
title: 'Name', |
|||
dataIndex: 'name', |
|||
key: 'name', |
|||
}, |
|||
{ |
|||
title: 'Age', |
|||
dataIndex: 'age', |
|||
key: 'age', |
|||
}, |
|||
]} |
|||
/> |
|||
|
|||
<h3>List</h3> |
|||
<List /> |
|||
</div> |
|||
</ConfigProvider> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
ReactDOM.render(<Demo />, mountNode); |
|||
``` |
|||
|
|||
<style> |
|||
.code-box-demo .config-provider h3 { |
|||
font-size: inherit; |
|||
margin: 16px 0 8px 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,32 @@ |
|||
--- |
|||
order: 2 |
|||
title: |
|||
zh-CN: 自定义 |
|||
en-US: Customize |
|||
--- |
|||
|
|||
## zh-CN |
|||
|
|||
自定义图片、描述、附属内容。 |
|||
|
|||
## en-US |
|||
|
|||
Customize image, description and extra content. |
|||
|
|||
```jsx |
|||
import { Empty, Button } from 'antd'; |
|||
|
|||
ReactDOM.render( |
|||
<Empty |
|||
image="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" |
|||
description={ |
|||
<span> |
|||
Customize <a href="#API">Description</a> |
|||
</span> |
|||
} |
|||
> |
|||
<Button type="primary">立即创建</Button> |
|||
</Empty>, |
|||
mountNode |
|||
); |
|||
``` |
|||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,25 @@ |
|||
--- |
|||
category: Components |
|||
type: Data Display |
|||
title: Empty |
|||
cols: 1 |
|||
--- |
|||
|
|||
Empty state placeholder. |
|||
|
|||
## When To Use |
|||
|
|||
When there is no data provided, display for friendly tips. |
|||
|
|||
## API |
|||
|
|||
```jsx |
|||
<Empty> |
|||
<Button>Create</Button> |
|||
</Empty> |
|||
``` |
|||
|
|||
| Property | Description | Type | Default | |
|||
| -------- | ----------- | ---- | ------- | |
|||
| description | Customize description | string \| ReactNode | - | |
|||
| image | Customize image. Will tread as image url when string provided | string \| ReactNode | false | |
|||
@ -0,0 +1,57 @@ |
|||
import * as React from 'react'; |
|||
import classNames from 'classnames'; |
|||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; |
|||
import LocaleReceiver from '../locale-provider/LocaleReceiver'; |
|||
|
|||
import emptyImg from './empty.svg'; |
|||
|
|||
export interface TransferLocale { |
|||
description: string; |
|||
} |
|||
export interface EmptyProps { |
|||
prefixCls?: string; |
|||
className?: string; |
|||
style?: React.CSSProperties; |
|||
image?: string; |
|||
description?: React.ReactNode; |
|||
children?: React.ReactNode; |
|||
} |
|||
|
|||
const Empty: React.SFC<EmptyProps> = (props: EmptyProps) => ( |
|||
<ConfigConsumer> |
|||
{({ getPrefixCls }: ConfigConsumerProps) => { |
|||
const { className, image, description, children, ...restProps } = props; |
|||
const prefixCls = getPrefixCls('empty', props.prefixCls); |
|||
|
|||
return ( |
|||
<LocaleReceiver componentName="Empty"> |
|||
{(locale: TransferLocale) => { |
|||
const des = description || locale.description; |
|||
const alt = typeof des === 'string' ? des : 'empty'; |
|||
|
|||
let imageNode: React.ReactNode = null; |
|||
if (!image) { |
|||
imageNode = <img alt={alt} src={emptyImg} />; |
|||
} else if (typeof image === 'string') { |
|||
imageNode = <img alt={alt} src={image} />; |
|||
} else { |
|||
imageNode = image; |
|||
} |
|||
|
|||
return ( |
|||
<div className={classNames(prefixCls, className)} {...restProps}> |
|||
<div className={`${prefixCls}-image`}>{imageNode}</div> |
|||
|
|||
<p className={`${prefixCls}-description`}>{des}</p> |
|||
|
|||
{children && <div className={`${prefixCls}-footer`}>{children}</div>} |
|||
</div> |
|||
); |
|||
}} |
|||
</LocaleReceiver> |
|||
); |
|||
}} |
|||
</ConfigConsumer> |
|||
); |
|||
|
|||
export default Empty; |
|||
@ -0,0 +1,26 @@ |
|||
--- |
|||
category: Components |
|||
subtitle: 空状态 |
|||
type: 数据展示 |
|||
title: Empty |
|||
cols: 1 |
|||
--- |
|||
|
|||
空状态时的展示占位图。 |
|||
|
|||
## 何时使用 |
|||
|
|||
当目前没有数据时，用于显式的用户提示。 |
|||
|
|||
## API |
|||
|
|||
```jsx |
|||
<Empty> |
|||
<Button>创建</Button> |
|||
</Empty> |
|||
``` |
|||
|
|||
| 参数 | 说明 | 类型 | 默认值 | |
|||
| --- | --- | --- | --- | |
|||
| description | 自定义描述内容 | string \| ReactNode | - | |
|||
| image | 设置显示图片，为 string 时表示自定义图片地址 | string \| ReactNode | false | |
|||
@ -0,0 +1,45 @@ |
|||
@import '../../style/themes/default'; |
|||
@import '../../style/mixins/index'; |
|||
|
|||
@empty-prefix-cls: ~'@{ant-prefix}-empty'; |
|||
|
|||
.@{empty-prefix-cls} { |
|||
text-align: center; |
|||
font-size: @empty-font-size; |
|||
line-height: 22px; |
|||
margin: 0 8px; |
|||
|
|||
&-image { |
|||
margin-bottom: 8px; |
|||
height: 100px; |
|||
|
|||
img { |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
&-description { |
|||
margin: 0; |
|||
} |
|||
|
|||
&-footer { |
|||
margin-top: 16px; |
|||
} |
|||
|
|||
// antd internal empty style |
|||
&-small { |
|||
margin: 8px 0; |
|||
|
|||
.@{empty-prefix-cls}-image { |
|||
height: 35px; |
|||
} |
|||
} |
|||
|
|||
&-normal { |
|||
margin: 32px 0; |
|||
|
|||
.@{empty-prefix-cls}-image { |
|||
height: 40px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,2 @@ |
|||
import '../../style/index.less'; |
|||
import './index.less'; |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue