feat(ui): add empty component

DevCloudFE · Dec 30, 2021 · 3305f22 · 3305f22
1 parent bcd697d
commit 3305f22
Show file tree

Hide file tree

Showing 19 changed files with 297 additions and 14 deletions.
diff --git a/packages/ui/src/components/anchor/Anchor.tsx b/packages/ui/src/components/anchor/Anchor.tsx
@@ -28,16 +28,19 @@ export interface DAnchorProps extends React.HTMLAttributes<HTMLUListElement> {
   dDistance?: number;
   dPage?: DElementSelector;
   dScrollBehavior?: 'instant' | 'smooth';
-  dIndicator?: React.ReactNode;
+  dIndicator?: React.ReactNode | symbol;
   onHrefChange?: (href: string | null) => void;
 }
 
-export function DAnchor(props: DAnchorProps) {
+const DOT_INDICATOR = Symbol('dot');
+const LINE_INDICATOR = Symbol('line');
+
+export const DAnchor = (props: DAnchorProps) => {
   const {
     dDistance = 0,
     dPage,
     dScrollBehavior = 'instant',
-    dIndicator = 'dot',
+    dIndicator = DOT_INDICATOR,
     onHrefChange,
     className,
     children,
@@ -188,9 +191,9 @@ export function DAnchor(props: DAnchorProps) {
     <DAnchorContext.Provider value={contextValue}>
       <ul {...restProps} ref={anchorRef} className={getClassName(className, `${dPrefix}anchor`)}>
         <div className={`${dPrefix}anchor__indicator`}>
-          {dIndicator === 'dot' ? (
+          {dIndicator === DOT_INDICATOR ? (
             <span className={`${dPrefix}anchor__dot-indicator`} style={dotStyle}></span>
-          ) : dIndicator === 'line' ? (
+          ) : dIndicator === LINE_INDICATOR ? (
             <span className={`${dPrefix}anchor__line-indicator`} style={dotStyle}></span>
           ) : (
             dIndicator
@@ -200,4 +203,6 @@ export function DAnchor(props: DAnchorProps) {
       </ul>
     </DAnchorContext.Provider>
   );
-}
+};
+DAnchor.DOT_INDICATOR = DOT_INDICATOR;
+DAnchor.LINE_INDICATOR = LINE_INDICATOR;
diff --git a/packages/ui/src/components/anchor/README.md b/packages/ui/src/components/anchor/README.md
@@ -21,7 +21,7 @@ Extend `React.HTMLAttributes<HTMLUListElement>`.
 | dDistance | Distance from page to anchor | number | 0 |
 | dPage | Set scrolling page, default is `window` view | [DElementSelector](/components/Interface#DElementSelector) | - |
 | dScrollBehavior | Custom scrolling behavior | 'instant' \| 'smooth' | 'instant' |
-| dIndicator | Custom indicator, pre-defined indicators of `'dot'` and `'line'` patterns | React.ReactNode | 'dot' |
+| dIndicator | Custom indicator, pre-defined indicators of `DOT` and `LINE` patterns | React.ReactNode \| symbol | DOT |
 | onHrefChange | Anchor point change callback | `(href: string \| null) => void` | - |
 <!-- prettier-ignore-end -->
 

diff --git a/packages/ui/src/components/anchor/README.zh-Hant.md b/packages/ui/src/components/anchor/README.zh-Hant.md
@@ -20,7 +20,7 @@ title: 锚点
 | dDistance | 页面到锚点的距离 | number | 0 |
 | dPage | 设置滚动的页面，默认为 `window` 视图 | [DElementSelector](/components/Interface#DElementSelector) | - |
 | dScrollBehavior | 自定义滚动行为 | 'instant' \| 'smooth' | 'instant' |
-| dIndicator | 自定义指示器，预定义了 `'dot'` 以及 `'line'` 形态的指示器 | React.ReactNode | 'dot' |
+| dIndicator | 自定义指示器，预定义了 `DOT` 以及 `LINE` 形态的指示器 | React.ReactNode \| symbol | DOT |
 | onHrefChange | 锚点改变的回调 | `(href: string \| null) => void` | - |
 <!-- prettier-ignore-end -->
 

diff --git a/packages/ui/src/components/anchor/demos/2.Indicator.md b/packages/ui/src/components/anchor/demos/2.Indicator.md
@@ -17,7 +17,7 @@ import { DAnchor, DAnchorLink } from '@react-devui/ui';
 
 export default function Demo() {
   return (
-    <DAnchor dPage=".app-main" dIndicator="line">
+    <DAnchor dPage=".app-main" dIndicator={DAnchor.LINE_INDICATOR}>
       <DAnchorLink href="#title">Anchor</DAnchorLink>
       <DAnchorLink dLevel={1} href="#Examples">
         Examples

diff --git a/packages/ui/src/components/dropdown/DropdownGroup.tsx b/packages/ui/src/components/dropdown/DropdownGroup.tsx
@@ -46,7 +46,7 @@ export function DDropdownGroup(props: DDropdownGroupProps) {
         <span
           className={`${dPrefix}dropdown-group__empty`}
           style={{
-            paddingLeft: style?.paddingLeft,
+            paddingLeft: 12 + (__level + 1) * 16,
           }}
         >
           {t('No Data')}

diff --git a/packages/ui/src/components/empty/Empty.tsx b/packages/ui/src/components/empty/Empty.tsx
@@ -0,0 +1,112 @@
+import { isUndefined } from 'lodash';
+import { useMemo } from 'react';
+
+import { usePrefixConfig, useComponentConfig, useTranslation } from '../../hooks';
+import { getClassName } from '../../utils';
+import { DIcon } from '../icon';
+
+export interface DEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+  dIcon?: React.ReactNode;
+}
+
+export function DEmpty(props: DEmptyProps) {
+  const { dIcon, className, children, ...restProps } = useComponentConfig(DEmpty.name, props);
+
+  //#region Context
+  const dPrefix = usePrefixConfig();
+  //#endregion
+
+  const [t] = useTranslation('Common');
+
+  const descriptionNode = useMemo(() => <div className={`${dPrefix}empty__description`}>{t('No Data')}</div>, [dPrefix, t]);
+
+  return (
+    <div {...restProps} className={getClassName(className, `${dPrefix}empty`)}>
+      {isUndefined(dIcon) ? (
+        <DIcon viewBox="0 -20 1442 1024" dSize={[140, 104]}>
+          <path
+            d="M159.816113 858.429296c0 88.496676 253.605859 160.263211 566.430648 160.263211s566.416225-71.766535 566.416225-160.263211c0-88.511099-253.605859-160.277634-566.416225-160.277634-312.824789 0.014423-566.430648 71.766535-566.430648 160.277634z"
+            fill="#ffffff"
+            p-id="6794"
+          ></path>
+          <path
+            d="M1072.676056 750.101634L828.516958 965.632l-8.797747-416.695887 259.562366-154.739381-6.605521 355.904902z"
+            fill="#F5F9FF"
+            p-id="6795"
+          ></path>
+          <path
+            d="M820.815324 961.233127l-455.319437-133.754592V672.739155l383.82693 113.851493c25.311549-177.945239 46.19538-247.577239 61.584225-209.992113 15.41769 37.556282 18.720451 165.77262 9.908282 384.634592z"
+            fill="#E1E5EC"
+            p-id="6796"
+          ></path>
+          <path
+            d="M814.224225 542.316169l-122.072338-26.537465-7.701633-87.314028v-148.119437l382.745239 107.217127h13.19662l-266.167888 154.753803z"
+            fill="#D4DAE2"
+            p-id="6797"
+          ></path>
+          <path d="M692.137465 521.33138l-317.843831-88.424563 317.858253-154.753803z" fill="#F0F1F4" p-id="6798"></path>
+          <path d="M1176.056789 597.583324l-93.486874-191.213972v165.801465z" fill="#E1E5EC" p-id="6799"></path>
+          <path
+            d="M691.041352 526.840789c-3.302761 0-5.494986-2.206648-5.494986-5.538254V289.215099c0-3.317183 2.192225-5.538254 5.494986-5.538254 3.317183 0 5.509408 2.22107 5.509409 5.538254v232.116281c-0.014423 3.302761-2.22107 5.509408-5.509409 5.509409z"
+            fill="#ACB5C3"
+            p-id="6800"
+          ></path>
+          <path
+            d="M814.224225 555.570479h-1.096112l-446.52169-114.947606c-2.206648-1.096113-4.398873-2.206648-4.398874-4.413296 0-2.22107 1.096113-4.427718 3.302761-5.538253l324.434929-155.835493c1.096113-1.110535 2.206648-1.110535 3.302761 0l388.254648 108.313239a8.610254 8.610254 0 0 1 4.384451 4.427719 8.466028 8.466028 0 0 1-2.192226 5.523831l-266.167887 161.388169c-1.096113 0-2.22107 1.08169-3.302761 1.08169z m-430.036732-122.663662l428.926197 110.53431 252.971268-153.628845-373.933071-104.996057-307.964394 148.090592z"
+            fill="#ACB5C3"
+            p-id="6801"
+          ></path>
+          <path
+            d="M828.516958 973.376901h-2.192226c-2.206648-1.096113-3.317183-2.206648-3.317183-4.427718l-14.27831-418.888113c0-2.22107 1.096113-4.427718 2.192226-4.427718l266.167887-161.388169c2.192225-1.096113 3.302761-1.096113 5.494986 0 2.206648 1.124958 3.317183 3.317183 3.317183 4.442141v363.620958c0 1.110535-1.110535 3.317183-2.206648 4.427718L831.819718 973.376901h-3.30276z m-8.797747-421.109183l13.182197 403.427155 240.885184-206.674929v-351.477183L819.719211 552.253296z"
+            fill="#ACB5C3"
+            p-id="6802"
+          ></path>
+          <path
+            d="M828.516958 973.376901h-1.096113l-460.828845-134.836281c-2.206648-1.110535-4.413296-3.317183-4.413296-5.523831v-161.388169c0-3.317183 2.206648-5.523831 5.509409-5.523831s5.509408 2.206648 5.509408 5.538253v158.042141l449.824451 132.629634v-1.110535c0-3.317183 2.192225-5.523831 5.494986-5.523831 3.317183 0 5.509408 2.206648 5.509408 5.523831v7.730479c0 2.22107-1.096113 3.317183-2.206648 4.427718h-3.30276v0.014422z"
+            fill="#ACB5C3"
+            p-id="6803"
+          ></path>
+          <path d="M741.635606 785.46569l-459.732733-141.470648 85.78524-208.896 446.536112 114.947606z" fill="#FFFFFF" p-id="6804"></path>
+          <path
+            d="M741.635606 791.003944h-1.096113l-460.843268-141.485071c-1.096113 0-2.192225-1.096113-3.30276-3.317183a3.374873 3.374873 0 0 1 0-4.413296l85.785239-208.896c1.110535-2.22107 3.317183-4.427718 6.605521-3.317183l446.536113 114.947606c1.110535 0 2.206648 1.110535 3.317183 2.22107a3.374873 3.374873 0 0 1 0 4.413296l-72.603042 236.544c0 2.192225-2.192225 3.302761-4.398873 3.302761zM288.508394 640.692282l449.824451 138.167887 69.285859-225.481915-436.627831-111.630423-82.482479 198.944451zM1173.864563 608.630986h-1.096112l-93.501296-26.537465c-2.192225-1.096113-4.398873-3.317183-4.398873-5.523831V387.576789c0-2.206648 2.206648-4.427718 4.398873-5.538254 2.206648-1.096113 5.509408 1.110535 6.605521 3.317183l93.486873 195.64169v22.109747c0 2.22107-1.096113 3.317183-2.192225 4.427718-1.110535 1.096113-2.206648 1.096113-3.317183 1.096113z m-87.977464-36.460169l82.468056 24.316394v-11.047662L1085.872676 413.018141v159.152676z m17.595493-269.701409c-41.81093 0-80.290254-15.47538-86.895775-18.792563l2.206648-5.523831c8.797746 4.427718 87.977465 36.474592 146.258929 2.206648-15.388845-8.855437-27.489352-19.903099-32.984338-36.474592v-1.110535c-5.509408-24.316394 2.192225-38.681239 8.797747-47.522253 9.908282-12.143775 27.503775-18.792563 46.19538-17.682028 14.27831 0 25.297127 4.427718 30.792113 12.158197 4.398873 5.523831 5.494986 12.143775 4.398873 20.999211-3.317183 22.109746-23.104901 51.949972-47.291493 68.521465 17.595493 7.744901 38.508169 11.047662 53.897014 11.047662 53.897014-2.206648 104.476845-54.15662 120.976225-124.899155l5.509409 1.110535c-17.595493 74.059718-70.381972 127.105803-126.485634 129.326873-16.49938 1.110535-39.604282-3.317183-59.392-13.268732-19.802141 15.47538-43.988732 19.903099-65.997521 19.903098z m34.08045-58.584338c5.509408 15.47538 17.595493 26.523042 32.998761 34.267944l1.096112-1.110535c23.104901-15.47538 42.907042-44.219493 46.195381-66.314817 1.096113-7.730479 0-13.268732-3.317183-17.682028-4.398873-5.538254-15.388845-9.951549-26.39324-9.951549-13.19662 0-30.792113 3.317183-41.796507 16.585915-6.605521 6.634366-13.19662 19.903099-7.716056 42.012845l-1.067268 2.192225z"
+            fill="#ACB5C3"
+            p-id="6805"
+          ></path>
+          <path
+            d="M1399.317634 15.085972c-7.701634-11.033239-61.584225 1.110535-85.770817 37.585127-6.605521 11.047662-14.307155 45.315606-8.797747 37.585126 14.292732-20.999211 40.671549-8.855437 60.488113-25.426929 16.484958-14.364845 40.685972-40.887887 34.080451-49.743324z"
+            fill="#F0F1F4"
+            p-id="6806"
+          ></path>
+          <path
+            d="M1304.74907 93.573408h-2.206647c-5.494986-3.317183 5.509408-35.364056 8.812169-41.998422C1330.046197 22.830873 1367.458254 9.562141 1386.149859 8.466028c7.687211 0 12.086085 2.22107 14.292733 5.538254 9.908282 14.364845-32.998761 53.046085-34.094874 53.046084-9.908282 8.855437-20.912676 9.951549-31.888225 11.047662-10.989972 2.22107-22.008789 3.317183-28.585465 13.268733 1.08169 1.096113-0.028845 2.206648-1.124958 2.206647zM1387.231549 12.879324c-18.691606 0-52.786479 13.268732-70.381972 39.806197-4.413296 6.634366-7.701634 22.095324-9.893859 29.825803 8.797746-8.855437 18.691606-9.951549 28.585465-11.047662 9.893859-1.110535 19.802141-3.317183 28.585465-9.951549 18.706028-16.571493 37.397634-39.777352 32.99876-45.315606-1.110535-2.206648-4.384451-3.317183-9.893859-3.317183z"
+            fill="#94A0B2"
+            p-id="6807"
+          ></path>
+          <path
+            d="M1332.238423 65.939831l-4.398874-3.317183C1347.627268 37.181296 1370.717746 17.307042 1419.134197 4.009465c4.398873-1.096113 6.591099-2.206648 7.672789-2.206648 2.206648-1.110535 2.206648-1.110535 8.812169-1.110535l1.096113 5.538253c-5.494986 1.096113-5.494986 1.096113-7.701634 1.096113-1.096113 0-3.302761 1.110535-7.687211 2.22107-47.291493 12.17262-70.381972 30.965183-89.088 56.37769z"
+            fill="#94A0B2"
+            p-id="6808"
+          ></path>
+          <path
+            d="M324.795493 863.953127c-1.110535 11.047662-47.305915 24.330817-80.290254 8.855436-10.989972-4.427718-29.681577-25.42693-23.104901-22.109746 19.802141 7.730479 34.094873-9.951549 56.103662-7.744902 17.595493 3.317183 47.27707 12.17262 47.27707 20.999212z"
+            fill="#F0F1F4"
+            p-id="6809"
+          ></path>
+          <path
+            d="M278.600113 882.74569a94.756056 94.756056 0 0 1-35.190986-6.634366c-7.687211-3.317183-28.585465-19.903099-25.282704-25.412507 0 0 1.096113-3.317183 5.494985-1.110535 9.908282 4.427718 17.595493 1.110535 27.503775-2.206648 8.797746-3.317183 17.595493-6.634366 28.599887-4.427719 9.879437 1.096113 49.469296 9.951549 49.469296 23.220282 0 3.317183-2.192225 6.634366-7.672789 8.826592-9.922704 3.317183-25.325972 7.744901-42.921464 7.744901z m-52.786479-27.619155c4.398873 5.523831 13.182197 12.143775 18.691605 15.460958 25.282704 11.047662 58.295887 6.634366 71.492507-2.206648 3.302761-2.206648 4.398873-3.317183 4.398874-4.427718 0-5.523831-23.090479-14.364845-45.084845-17.682028-9.908282-1.110535-17.595493 2.206648-25.297127 4.427718-6.605521 3.317183-14.292732 6.634366-24.201014 4.427718z"
+            fill="#94A0B2"
+            p-id="6810"
+          ></path>
+          <path
+            d="M341.294873 866.174197c-20.898254-5.538254-38.493746-3.317183-53.882591-2.22107-15.403268 1.110535-27.489352 2.22107-40.700395-2.206648l2.192226-5.538254c11.004394 4.427718 24.215437 3.317183 38.508169 2.221071 16.484958-1.110535 34.094873-3.317183 54.993126 2.206648l-1.110535 5.538253z"
+            fill="#94A0B2"
+            p-id="6811"
+          ></path>
+        </DIcon>
+      ) : (
+        dIcon
+      )}
+      {isUndefined(children) ? descriptionNode : children}
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/empty/README.md b/packages/ui/src/components/empty/README.md
@@ -0,0 +1,22 @@
+---
+group: Data Display
+title: Empty
+---
+
+Empty state.
+
+## When To Use
+
+Display when the data is empty.
+
+## API
+
+### DEmptyProps
+
+Extend `React.HTMLAttributes<HTMLDivElement>`.
+
+<!-- prettier-ignore-start -->
+| Property | Description | Type | Default | 
+| --- | --- | --- | --- | 
+| dIcon | Custom icon | React.ReactNode | - |
+<!-- prettier-ignore-end -->
diff --git a/packages/ui/src/components/empty/README.zh-Hant.md b/packages/ui/src/components/empty/README.zh-Hant.md
@@ -0,0 +1,21 @@
+---
+title: 空状态
+---
+
+空状态。
+
+## 何时使用
+
+数据为空时的显示。
+
+## API
+
+### DEmptyProps
+
+继承 `React.HTMLAttributes<HTMLDivElement>`。
+
+<!-- prettier-ignore-start -->
+| 参数 | 说明 | 类型 | 默认值 | 
+| --- | --- | --- | --- | 
+| dIcon | 自定义图标 | React.ReactNode | - |
+<!-- prettier-ignore-end -->
diff --git a/packages/ui/src/components/empty/demos/1.Basic.md b/packages/ui/src/components/empty/demos/1.Basic.md
@@ -0,0 +1,21 @@
+---
+title:
+  en-US: Basic
+  zh-Hant: 基本
+---
+
+# en-US
+
+The simplest usage.
+
+# zh-Hant
+
+最简单的用法。
+
+```tsx
+import { DEmpty } from '@react-devui/ui';
+
+export default function Demo() {
+  return <DEmpty></DEmpty>;
+}
+```
diff --git a/packages/ui/src/components/empty/demos/2.CustomIcon.md b/packages/ui/src/components/empty/demos/2.CustomIcon.md
@@ -0,0 +1,32 @@
+---
+title:
+  en-US: Custom icon
+  zh-Hant: 自定义图标
+---
+
+# en-US
+
+The simplest usage.
+
+# zh-Hant
+
+通过 `dIcon` 自定义图标。
+
+```tsx
+import { DEmpty, DIcon } from '@react-devui/ui';
+
+export default function Demo() {
+  return (
+    <DEmpty
+      dIcon={
+        <DIcon viewBox="0 0 1669 1024" dSize={[100, 64]}>
+          <path
+            d="M1395.776577 634.695495L1216.807207 341.333333c-3.69009-6.457658-10.147748-10.147748-17.527928-10.147747H452.958559c-6.457658 0-13.837838 3.69009-17.527928 10.147747L256.461261 634.695495v362.551352c0 10.147748 6.457658 17.527928 17.527928 17.527928h1107.94955c10.147748 0 17.527928-6.457658 17.527928-17.527928V641.153153c-3.69009 0-3.69009-2.767568-3.69009-6.457658zM464.028829 369.009009h725.102703l162.363963 255.538739H950.198198c-10.147748 0-17.527928 6.457658-17.527928 17.527928 0 59.041441-47.971171 107.012613-107.012612 107.012612-59.041441 0-107.012613-47.971171-107.012613-107.012612 0-10.147748-6.457658-17.527928-17.527928-17.527928H301.664865L464.028829 369.009009z m897.614414 614.4h-1070.126126V662.371171h393.917117c10.147748 69.189189 69.189189 128.230631 141.145946 128.230631s134.688288-55.351351 141.145946-128.230631h393.917117v321.037838zM170.666667 814.587387V793.369369c0-3.69009-3.69009-10.147748-10.147748-10.147747-3.69009 0-10.147748 3.69009-10.147748 10.147747v20.295496h-17.527928c-3.69009 0-10.147748 3.69009-10.147748 10.147748 0 6.457658 3.69009 10.147748 10.147748 10.147747h20.295496v20.295496c0 3.69009 3.69009 10.147748 10.147747 10.147748 3.69009 0 10.147748-3.69009 10.147748-10.147748v-20.295496H193.72973c3.69009 0 10.147748-3.69009 10.147747-10.147747 0-6.457658-3.69009-10.147748-10.147747-10.147748h-23.063063z m1294.299099-393.917117h31.365766c6.457658 0 13.837838 6.457658 13.837837 13.837838 0 6.457658-6.457658 13.837838-13.837837 13.837838h-31.365766V479.711712c0 6.457658-6.457658 13.837838-13.837838 13.837838s-13.837838-6.457658-13.837838-13.837838v-31.365766h-31.365766c-6.457658 0-13.837838-6.457658-13.837838-13.837838 0-6.457658 6.457658-13.837838 13.837838-13.837838h31.365766v-31.365765c0-6.457658 6.457658-13.837838 13.837838-13.837838s13.837838 6.457658 13.837838 13.837838v31.365765z m107.012612 127.308108h17.527928c3.69009 0 10.147748 3.69009 10.147748 10.147748s-3.69009 10.147748-10.147748 10.147748h-17.527928v17.527928c0 3.69009-3.69009 10.147748-10.147747 10.147748-3.69009 0-10.147748-3.69009-10.147748-6.457658V571.963964h-17.527928c-3.69009 0-10.147748-3.69009-10.147748-10.147748s3.69009-10.147748 10.147748-10.147748h17.527928v-20.295495c0-3.69009 3.69009-10.147748 10.147748-10.147748 3.69009 0 10.147748 3.69009 10.147747 10.147748v16.605405zM194.652252 396.684685v-31.365766c0-6.457658-6.457658-13.837838-13.837838-13.837838-6.457658 0-13.837838 6.457658-13.837837 13.837838v27.675676h-31.365766c-6.457658 0-13.837838 6.457658-13.837838 13.837837 0 6.457658 6.457658 13.837838 13.837838 13.837838h27.675675v34.133334c0 6.457658 6.457658 13.837838 13.837838 13.837837 6.457658 0 13.837838-6.457658 13.837838-13.837837v-27.675676h27.675676c6.457658 0 13.837838-6.457658 13.837838-13.837838s-6.457658-13.837838-13.837838-13.837838c7.38018-2.767568-23.985586-2.767568-23.985586-2.767567zM63.654054 690.046847c-31.365766 0-59.041441-27.675676-59.041441-59.041442 0-31.365766 27.675676-59.041441 59.041441-59.041441s59.041441 27.675676 59.041441 59.041441c-0.922523 35.055856-28.598198 59.041441-59.041441 59.041442z m0-27.675676c17.527928 0 27.675676-13.837838 27.675676-27.675676 0-17.527928-13.837838-27.675676-27.675676-27.675675-17.527928 0-27.675676 13.837838-27.675676 27.675675-3.69009 13.837838 10.147748 27.675676 27.675676 27.675676z m1573.823423-166.054054c-13.837838 0-27.675676-10.147748-27.675675-27.675676 0-13.837838 10.147748-27.675676 27.675675-27.675675 13.837838 0 27.675676 10.147748 27.675676 27.675675s-10.147748 27.675676-27.675676 27.675676z m0-10.147748c6.457658 0 13.837838-6.457658 13.837838-13.837837s-6.457658-13.837838-13.837838-13.837838-13.837838 6.457658-13.837837 13.837838 7.38018 13.837838 13.837837 13.837837zM460.338739 68.266667c10.147748-10.147748 23.985586-10.147748 34.133333 0l86.717117 86.717117c10.147748 10.147748 10.147748 23.985586 0 34.133333s-23.985586 10.147748-34.133333 0l-86.717117-86.717117c-10.147748-10.147748-10.147748-23.985586 0-34.133333zM826.58018 9.225225c13.837838 0 23.985586 10.147748 23.985586 23.985586v120.85045c0 13.837838-10.147748 23.985586-23.985586 23.985586S802.594595 167.899099 802.594595 154.061261V33.210811C801.672072 23.063063 812.742342 9.225225 826.58018 9.225225z m362.551352 55.351352c10.147748 10.147748 10.147748 23.985586 0 34.133333l-83.027027 79.336937c-10.147748 10.147748-23.985586 10.147748-34.133334 0s-10.147748-23.985586 0-34.133333l83.027027-83.027028c9.225225-6.457658 26.753153-6.457658 34.133334 3.690091z"
+            p-id="11553"
+          ></path>
+        </DIcon>
+      }
+    ></DEmpty>
+  );
+}
+```
diff --git a/packages/ui/src/components/empty/demos/3.CustomContent.md b/packages/ui/src/components/empty/demos/3.CustomContent.md
@@ -0,0 +1,26 @@
+---
+title:
+  en-US: Custom content
+  zh-Hant: 自定义内容
+---
+
+# en-US
+
+Custom display content.
+
+# zh-Hant
+
+自定义显示内容。
+
+```tsx
+import { DEmpty, DButton } from '@react-devui/ui';
+
+export default function Demo() {
+  return (
+    <DEmpty>
+      <p>Custom display content.</p>
+      <DButton>Button</DButton>
+    </DEmpty>
+  );
+}
+```