{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/empty","result":{"data":{"current":{"frontmatter":{"title":"Empty","order":71,"brief":"Placeholder component when the page is empty.","icon":"doc-empty"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic usage"},{"url":"#custom-content","title":"Custom content"},{"url":"#different-layout","title":"Different layout"},{"url":"#placeholder-illustration-under-construction","title":"Placeholder illustration (under construction)"}]},{"url":"#api-reference","title":"API reference"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-token","title":"Design Token"},{"url":"#faq","title":"FAQ"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"en-US\",\n  \"order\": 71,\n  \"category\": \"Show\",\n  \"title\": \"Empty\",\n  \"subTitle\": \"Empty\",\n  \"icon\": \"doc-empty\",\n  \"dir\": \"column\",\n  \"brief\": \"Placeholder component when the page is empty.\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Empty } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"By setting a placeholder image with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"image\"), \", you can manually import the corresponding illustration from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@douyinfe/semi-illustrations\"), \" (the default width and height of the illustration is 200x200), or you can import a custom illustration.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"A series of dark mode illustrations are added, and the illustrations that need to be used in dark mode can be passed in through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"darkModeImage\"), \" to better adapt to the dark mode.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Empty } from '@douyinfe/semi-ui';\\nimport { IllustrationConstruction, IllustrationConstructionDark } from '@douyinfe/semi-illustrations';\\n\\n() => (\\n    <Empty\\n        image={<IllustrationConstruction style={{ width: 150, height: 150 }} />}\\n        darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />}\\n        title={'Function under construction'}\\n        description=\\\"The current function is not yet open, so stay tuned.\\\"\\n    />\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom content\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Custom description content can be achieved through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"children\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Empty, Button } from '@douyinfe/semi-ui';\\nimport { IllustrationNoContent, IllustrationNoContentDark } from '@douyinfe/semi-illustrations';\\n\\n() => (\\n    <Empty\\n        image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}\\n        darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}\\n        title=\\\"Empty status header\\\"\\n        description=\\\"Start creating your first dashboard!\\\"\\n    >\\n        <div>\\n            <Button style={{ padding: '6px 24px', marginRight: 12 }} type=\\\"primary\\\">\\n                Secondary button\\n            </Button>\\n            <Button style={{ padding: '6px 24px' }} theme=\\\"solid\\\" type=\\\"primary\\\">\\n                Level 1 button\\n            </Button>\\n        </div>\\n    </Empty>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"It is not necessary to use pictures.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Empty, Typography } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Empty\\n        title=\\\"No matching filter results found yet\\\"\\n        description={\\n            <span>\\n                <Typography.Text>Try</Typography.Text>\\n                <Typography.Text link>Reset filter</Typography.Text>\\n            </span>\\n        }\\n    />\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Different layout\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Two types of layouts are supported: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"vertical\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"horizontal\"), \". The default is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"vertical\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Empty, Button } from '@douyinfe/semi-ui';\\nimport { IllustrationSuccess, IllustrationSuccessDark } from '@douyinfe/semi-illustrations';\\n\\n() => (\\n    <Empty\\n        title={'Created successfully'}\\n        image={<IllustrationSuccess style={{ width: 150, height: 150 }} />}\\n        darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />}\\n        layout=\\\"horizontal\\\"\\n        description=\\\"This is a very long description text. This layout is recommended when the text is too long. This is a very long description text. This layout is recommended when the text is too long. This is a very long description text. This layout is recommended when the text is too long.\\\"\\n        style={{ width: 800, margin: '0 auto' }}\\n    >\\n        <Button type=\\\"primary\\\" theme=\\\"solid\\\" style={{ padding: '6px 24px' }}>\\n            Start operation\\n        </Button>\\n    </Empty>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Placeholder illustration (under construction)\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Currently the following illustrations are supported in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@douyinfe/semi-illustrations\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Empty } from '@douyinfe/semi-ui';\\nimport { IllustrationConstruction, IllustrationSuccess, IllustrationFailure, IllustrationNoAccess, IllustrationNoContent, IllustrationNotFound, IllustrationNoResult } from '@douyinfe/semi-illustrations';\\n\\n/* The following is available after version 1.13.0 */\\nimport { IllustrationIdle, IllustrationIdleDark, IllustrationConstructionDark, IllustrationSuccessDark, IllustrationFailureDark, IllustrationNoAccessDark, IllustrationNoContentDark, IllustrationNotFoundDark, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';\\n\\n() => {\\n    const emptyStyle = {\\n        padding: 30,\\n    };\\n    return (\\n        <div style={{ display: 'flex', flexWrap: 'wrap' }}>\\n            <Empty\\n                image={<IllustrationSuccess style={{ width: 150, height: 150 }} />}\\n                darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />}\\n                description={'Created successfully'}\\n                style={emptyStyle}\\n            />\\n            <Empty\\n                image={<IllustrationFailure style={{ width: 150, height: 150 }} />}\\n                darkModeImage={<IllustrationFailureDark style={{ width: 150, height: 150 }} />}\\n                description={'Failed to load'}\\n                style={emptyStyle}\\n            />\\n            <Empty\\n                image={<IllustrationNoAccess style={{ width: 150, height: 150 }} />}\\n                darkModeImage={<IllustrationNoAccessDark style={{ width: 150, height: 150 }} />}\\n                description={'Permission denied'}\\n                style={emptyStyle}\\n            />\\n            <Empty\\n                image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}\\n                darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}\\n                description={'No content, please add'}\\n                style={emptyStyle}\\n            />\\n            <Empty\\n                image={<IllustrationNotFound style={{ width: 150, height: 150 }} />}\\n                darkModeImage={<IllustrationNotFoundDark style={{ width: 150, height: 150 }} />}\\n                description={'Page 404'}\\n                style={emptyStyle} />\\n            <Empty\\n                image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}\\n                darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}\\n                description={'No search results'}\\n                style={emptyStyle} />\\n            <Empty\\n                image={<IllustrationConstruction style={{ width: 150, height: 150 }} />}\\n                darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />}\\n                description={'under construction'}\\n                style={emptyStyle} />\\n            <Empty\\n                image={<IllustrationIdle style={{ width: 150, height: 150 }} />}\\n                darkModeImage={<IllustrationIdleDark style={{ width: 150, height: 150 }} />}\\n                description={'Wandering Quartet'}\\n                style={emptyStyle} />\\n        </div>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API reference\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Property\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"class name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"darkModeImage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The placeholder image after the dark mode is turned on, in response to the change of the theme-mode property of document.body\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"description\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Content description\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"image\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Placeholder image\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode \", \"|\", \" { id?: string; viewBox?: string; url?: string;}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"imageStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Placeholder image style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"layout\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Layout mode, support \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"horizontal\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"aria-hidden for Empty illustrations is true\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Content Guidelines\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Title\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The title should be concise and easy to understand\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Text\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The specific reasons for displaying the empty state can be displayed, and the subsequent operation behavior can also be displayed to help the user eliminate the empty state\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Don't repeat the content on the title\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Try to keep the body text within 1-2 sentences\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Action button\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Button copy needs to be clear and easy to understand\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Use the verb + noun format\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Token\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/show/empty","next":{"fields":{"slug":"zh-CN/show/empty"},"id":"11d29e43-43c5-578f-a483-54ad2461ea01","frontmatter":{"title":"Empty 空状态","localeCode":"zh-CN","icon":"doc-empty","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/dropdown"},"id":"568ab16e-356c-5130-8d4d-d1b4127c4579","frontmatter":{"title":"Dropdown 下拉框","localeCode":"zh-CN","icon":"doc-dropdown","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}