diff --git a/components/anchor/__tests__/__snapshots__/demo.test.js.snap b/components/anchor/__tests__/__snapshots__/demo.test.js.snap
index 3b24a9342..46148ec28 100644
--- a/components/anchor/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/anchor/__tests__/__snapshots__/demo.test.js.snap
@@ -32,11 +32,11 @@ exports[`renders ./antdv-demo/docs/anchor/demo/basic.md correctly 1`] = `
 exports[`renders ./antdv-demo/docs/anchor/demo/customizeHighlight.md correctly 1`] = `
 <div class="ant-anchor-wrapper" style="max-height: 100vh;">
   <div class="ant-anchor fixed">
-    <div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
+    <div class="ant-anchor-ink"><span class="ant-anchor-ink-ball visible" style="top: -4.5px;"></span></div>
     <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-basic" title="Basic demo">Basic demo</a>
       <!---->
     </div>
-    <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-static" title="Static demo">Static demo</a>
+    <div class="ant-anchor-link ant-anchor-link-active"><a class="ant-anchor-link-title ant-anchor-link-title-active" href="#components-anchor-demo-static" title="Static demo">Static demo</a>
       <!---->
     </div>
     <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#API" title="API">API</a>
diff --git a/components/avatar/__tests__/__snapshots__/demo.test.js.snap b/components/avatar/__tests__/__snapshots__/demo.test.js.snap
index 5971a1df5..e38703cb0 100644
--- a/components/avatar/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/avatar/__tests__/__snapshots__/demo.test.js.snap
@@ -15,9 +15,9 @@ exports[`renders ./antdv-demo/docs/avatar/demo/basic.md correctly 1`] = `
 `;
 
 exports[`renders ./antdv-demo/docs/avatar/demo/dynamic.md correctly 1`] = `
-<div><span class="ant-avatar ant-avatar-lg ant-avatar-square" style="background-color: rgb(245, 106, 0); vertical-align: middle;"><span class="ant-avatar-string" style="opacity: 0;">U</span></span><button style="vertical-align: middle;" class="ant-btn ant-btn-sm" type="button">
+<div><span class="ant-avatar ant-avatar-lg ant-avatar-square" style="background-color: rgb(245, 106, 0); vertical-align: middle;"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><button style="vertical-align: middle;" class="ant-btn ant-btn-sm" type="button">
     <!----><span>改 变</span>
   </button></div>
 `;
 
-exports[`renders ./antdv-demo/docs/avatar/demo/type.md correctly 1`] = `<div><span class="ant-avatar ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span class="ant-avatar"><span class="ant-avatar-string" style="opacity: 0;">U</span></span><span class="ant-avatar"><span class="ant-avatar-string" style="opacity: 0;">USER</span></span><span class="ant-avatar ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span><span class="ant-avatar" style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"><span class="ant-avatar-string" style="opacity: 0;">U</span></span><span class="ant-avatar ant-avatar-icon" style="background-color: rgb(135, 208, 104);"><span role="img" aria-label="user" class="anticon anticon-user"><svg class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span></div>`;
+exports[`renders ./antdv-demo/docs/avatar/demo/type.md correctly 1`] = `<div><span class="ant-avatar ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span class="ant-avatar"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span class="ant-avatar"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">USER</span></span><span class="ant-avatar ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span><span class="ant-avatar" style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span class="ant-avatar ant-avatar-icon" style="background-color: rgb(135, 208, 104);"><span role="img" aria-label="user" class="anticon anticon-user"><svg class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span></div>`;
diff --git a/components/carousel/__tests__/__snapshots__/demo.test.js.snap b/components/carousel/__tests__/__snapshots__/demo.test.js.snap
index 92b958e1f..2b87d3a6f 100644
--- a/components/carousel/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/carousel/__tests__/__snapshots__/demo.test.js.snap
@@ -5,64 +5,64 @@ exports[`renders ./antdv-demo/docs/carousel/demo/autoplay.md correctly 1`] = `
   <div class="slick-slider slick-initialized">
     <!---->
     <div class="slick-list">
-      <div class="slick-track" style="width: 900%; left: -100%;">
-        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 11.11111111111111%;">
+      <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
+        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
@@ -87,64 +87,64 @@ exports[`renders ./antdv-demo/docs/carousel/demo/basic.md correctly 1`] = `
   <div class="slick-slider slick-initialized">
     <!---->
     <div class="slick-list">
-      <div class="slick-track" style="width: 900%; left: -100%;">
-        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 11.11111111111111%;">
+      <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
+        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
@@ -169,64 +169,64 @@ exports[`renders ./antdv-demo/docs/carousel/demo/customArrows.md correctly 1`] =
   <div class="slick-slider slick-initialized">
     <div class="custom-slick-arrow slick-arrow slick-prev" style="left: 10px; z-index: 1; display: block;"><span role="img" aria-label="left-circle" class="anticon anticon-left-circle"><svg class="" data-icon="left-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M603.3 327.5l-246 178a7.95 7.95 0 000 12.9l246 178c5.3 3.8 12.7 0 12.7-6.5V643c0-10.2-4.9-19.9-13.2-25.9L457.4 512l145.4-105.2c8.3-6 13.2-15.6 13.2-25.9V334c0-6.5-7.4-10.3-12.7-6.5z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span></div>
     <div class="slick-list">
-      <div class="slick-track" style="width: 900%; left: -100%;">
-        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 11.11111111111111%;">
+      <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
+        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
@@ -250,48 +250,48 @@ exports[`renders ./antdv-demo/docs/carousel/demo/customPaging.md correctly 1`] =
 <div class="ant-carousel">
   <div class="slick-slider slick-initialized"><button type="button" data-role="none" class="slick-arrow slick-prev" style="display: block;"> Previous</button>
     <div class="slick-list">
-      <div class="slick-track" style="width: 900%; left: -100%;">
-        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 11.11111111111111%;">
+      <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
+        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract04.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract01.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract02.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract03.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract04.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract01.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract02.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract03.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract04.jpg"></div>
           </div>
@@ -313,29 +313,29 @@ exports[`renders ./antdv-demo/docs/carousel/demo/fade.md correctly 1`] = `
   <div class="slick-slider slick-initialized">
     <!---->
     <div class="slick-list">
-      <div class="slick-track" style="width: 900%; left: -100%;">
-        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%; position: relative; left: 0px; opacity: 1; transition: opacity 500ms ease, visibility 500ms ease;">
+      <div class="slick-track" style="opacity: 1;">
+        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 0px; position: relative; left: 0px; opacity: 1; transition: opacity 500ms ease, visibility 500ms ease;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -11px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
+        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -22px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
+        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -33px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
+        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
@@ -361,64 +361,64 @@ exports[`renders ./antdv-demo/docs/carousel/demo/position.md correctly 1`] = `
   <div class="slick-slider slick-initialized">
     <!---->
     <div class="slick-list">
-      <div class="slick-track" style="width: 900%; left: -100%;">
-        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 11.11111111111111%;">
+      <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
+        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
index 1394b7394..5aa1225b8 100644
--- a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
@@ -2,24 +2,29 @@
 
 exports[`renders ./antdv-demo/docs/descriptions/demo/basic.md correctly 1`] = `
 <div class="ant-descriptions">
-  <div class="ant-descriptions-title">User Info</div>
+  <div class="ant-descriptions-header">
+    <div class="ant-descriptions-title">User Info</div>
+    <div class="ant-descriptions-extra">
+      <!---->
+    </div>
+  </div>
   <div class="ant-descriptions-view">
     <table>
       <tbody>
         <tr class="ant-descriptions-row">
-          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">UserName</span><span class="ant-descriptions-item-content"> Zhou Maomao </span></td>
+          <td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">UserName</span><span class="ant-descriptions-item-content"> Zhou Maomao </span></td>
         </tr>
         <tr class="ant-descriptions-row">
-          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Telephone</span><span class="ant-descriptions-item-content"> 1810000000 </span></td>
+          <td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Telephone</span><span class="ant-descriptions-item-content"> 1810000000 </span></td>
         </tr>
         <tr class="ant-descriptions-row">
-          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Live</span><span class="ant-descriptions-item-content"> Hangzhou, Zhejiang </span></td>
+          <td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Live</span><span class="ant-descriptions-item-content"> Hangzhou, Zhejiang </span></td>
         </tr>
         <tr class="ant-descriptions-row">
-          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Remark</span><span class="ant-descriptions-item-content"> empty </span></td>
+          <td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Remark</span><span class="ant-descriptions-item-content"> empty </span></td>
         </tr>
         <tr class="ant-descriptions-row">
-          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Address</span><span class="ant-descriptions-item-content"> No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China </span></td>
+          <td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Address</span><span class="ant-descriptions-item-content"> No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China </span></td>
         </tr>
       </tbody>
     </table>
@@ -29,48 +34,53 @@ exports[`renders ./antdv-demo/docs/descriptions/demo/basic.md correctly 1`] = `
 
 exports[`renders ./antdv-demo/docs/descriptions/demo/border.md correctly 1`] = `
 <div class="ant-descriptions ant-descriptions-bordered">
-  <div class="ant-descriptions-title">User Info</div>
+  <div class="ant-descriptions-header">
+    <div class="ant-descriptions-title">User Info</div>
+    <div class="ant-descriptions-extra">
+      <!---->
+    </div>
+  </div>
   <div class="ant-descriptions-view">
     <table>
       <tbody>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Product</th>
+          <th class="ant-descriptions-item-label" colspan="1">Product</th>
           <td class="ant-descriptions-item-content" colspan="1"> Cloud Database </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Billing Mode</th>
+          <th class="ant-descriptions-item-label" colspan="1">Billing Mode</th>
           <td class="ant-descriptions-item-content" colspan="1"> Prepaid </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Automatic Renewal</th>
+          <th class="ant-descriptions-item-label" colspan="1">Automatic Renewal</th>
           <td class="ant-descriptions-item-content" colspan="1"> YES </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Order time</th>
+          <th class="ant-descriptions-item-label" colspan="1">Order time</th>
           <td class="ant-descriptions-item-content" colspan="1"> 2018-04-24 18:00:00 </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Usage Time</th>
-          <td class="ant-descriptions-item-content" colspan="3"> 2019-04-24 18:00:00 </td>
+          <th class="ant-descriptions-item-label" colspan="1">Usage Time</th>
+          <td class="ant-descriptions-item-content" colspan="1"> 2019-04-24 18:00:00 </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Status</th>
-          <td class="ant-descriptions-item-content" colspan="5"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Running</span></span></td>
+          <th class="ant-descriptions-item-label" colspan="1">Status</th>
+          <td class="ant-descriptions-item-content" colspan="1"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Running</span></span></td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Negotiated Amount</th>
+          <th class="ant-descriptions-item-label" colspan="1">Negotiated Amount</th>
           <td class="ant-descriptions-item-content" colspan="1"> $80.00 </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Discount</th>
+          <th class="ant-descriptions-item-label" colspan="1">Discount</th>
           <td class="ant-descriptions-item-content" colspan="1"> $20.00 </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Official Receipts</th>
+          <th class="ant-descriptions-item-label" colspan="1">Official Receipts</th>
           <td class="ant-descriptions-item-content" colspan="1"> $60.00 </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Config Info</th>
+          <th class="ant-descriptions-item-label" colspan="1">Config Info</th>
           <td class="ant-descriptions-item-content" colspan="1"> Data disk type: MongoDB <br> Database version: 3.4 <br> Package: dds.mongo.mid <br> Storage space: 10 GB <br> Replication factor: 3 <br> Region: East China 1<br></td>
         </tr>
       </tbody>
@@ -81,36 +91,41 @@ exports[`renders ./antdv-demo/docs/descriptions/demo/border.md correctly 1`] = `
 
 exports[`renders ./antdv-demo/docs/descriptions/demo/responsive.md correctly 1`] = `
 <div class="ant-descriptions ant-descriptions-bordered">
-  <div class="ant-descriptions-title">Responsive Descriptions</div>
+  <div class="ant-descriptions-header">
+    <div class="ant-descriptions-title">Responsive Descriptions</div>
+    <div class="ant-descriptions-extra">
+      <!---->
+    </div>
+  </div>
   <div class="ant-descriptions-view">
     <table>
       <tbody>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Product</th>
+          <th class="ant-descriptions-item-label" colspan="1">Product</th>
           <td class="ant-descriptions-item-content" colspan="1"> Cloud Database </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</th>
+          <th class="ant-descriptions-item-label" colspan="1">Billing</th>
           <td class="ant-descriptions-item-content" colspan="1"> Prepaid </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Time</th>
+          <th class="ant-descriptions-item-label" colspan="1">Time</th>
           <td class="ant-descriptions-item-content" colspan="1"> 18:00:00 </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</th>
+          <th class="ant-descriptions-item-label" colspan="1">Amount</th>
           <td class="ant-descriptions-item-content" colspan="1"> $80.00 </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Discount</th>
+          <th class="ant-descriptions-item-label" colspan="1">Discount</th>
           <td class="ant-descriptions-item-content" colspan="1"> $20.00 </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Official</th>
+          <th class="ant-descriptions-item-label" colspan="1">Official</th>
           <td class="ant-descriptions-item-content" colspan="1"> $60.00 </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon">Config Info</th>
+          <th class="ant-descriptions-item-label" colspan="1">Config Info</th>
           <td class="ant-descriptions-item-content" colspan="1"> Data disk type: MongoDB <br> Database version: 3.4 <br> Package: dds.mongo.mid <br> Storage space: 10 GB <br> Replication factor: 3 <br> Region: East China 1 </td>
         </tr>
       </tbody>
@@ -123,36 +138,41 @@ exports[`renders ./antdv-demo/docs/descriptions/demo/size.md correctly 1`] = `
 <div>
   <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="default"><span class="ant-radio-inner"></span></span><span> default </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="middle"><span class="ant-radio-inner"></span></span><span> middle </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="small"><span class="ant-radio-inner"></span></span><span> small </span></label></div><br><br>
   <div class="ant-descriptions ant-descriptions-bordered">
-    <div class="ant-descriptions-title">Custom Size</div>
+    <div class="ant-descriptions-header">
+      <div class="ant-descriptions-title">Custom Size</div>
+      <div class="ant-descriptions-extra">
+        <!---->
+      </div>
+    </div>
     <div class="ant-descriptions-view">
       <table>
         <tbody>
           <tr class="ant-descriptions-row">
-            <th class="ant-descriptions-item-label ant-descriptions-item-colon">Product</th>
+            <th class="ant-descriptions-item-label" colspan="1">Product</th>
             <td class="ant-descriptions-item-content" colspan="1"> Cloud Database </td>
           </tr>
           <tr class="ant-descriptions-row">
-            <th class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</th>
+            <th class="ant-descriptions-item-label" colspan="1">Billing</th>
             <td class="ant-descriptions-item-content" colspan="1"> Prepaid </td>
           </tr>
           <tr class="ant-descriptions-row">
-            <th class="ant-descriptions-item-label ant-descriptions-item-colon">Time</th>
+            <th class="ant-descriptions-item-label" colspan="1">Time</th>
             <td class="ant-descriptions-item-content" colspan="1"> 18:00:00 </td>
           </tr>
           <tr class="ant-descriptions-row">
-            <th class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</th>
+            <th class="ant-descriptions-item-label" colspan="1">Amount</th>
             <td class="ant-descriptions-item-content" colspan="1"> $80.00 </td>
           </tr>
           <tr class="ant-descriptions-row">
-            <th class="ant-descriptions-item-label ant-descriptions-item-colon">Discount</th>
+            <th class="ant-descriptions-item-label" colspan="1">Discount</th>
             <td class="ant-descriptions-item-content" colspan="1"> $20.00 </td>
           </tr>
           <tr class="ant-descriptions-row">
-            <th class="ant-descriptions-item-label ant-descriptions-item-colon">Official</th>
+            <th class="ant-descriptions-item-label" colspan="1">Official</th>
             <td class="ant-descriptions-item-content" colspan="1"> $60.00 </td>
           </tr>
           <tr class="ant-descriptions-row">
-            <th class="ant-descriptions-item-label ant-descriptions-item-colon">Config Info</th>
+            <th class="ant-descriptions-item-label" colspan="1">Config Info</th>
             <td class="ant-descriptions-item-content" colspan="1"> Data disk type: MongoDB <br> Database version: 3.4 <br> Package: dds.mongo.mid <br> Storage space: 10 GB <br> Replication factor: 3 <br> Region: East China 1<br></td>
           </tr>
         </tbody>
@@ -160,27 +180,32 @@ exports[`renders ./antdv-demo/docs/descriptions/demo/size.md correctly 1`] = `
     </div>
   </div><br><br>
   <div class="ant-descriptions">
-    <div class="ant-descriptions-title">Custom Size</div>
+    <div class="ant-descriptions-header">
+      <div class="ant-descriptions-title">Custom Size</div>
+      <div class="ant-descriptions-extra">
+        <!---->
+      </div>
+    </div>
     <div class="ant-descriptions-view">
       <table>
         <tbody>
           <tr class="ant-descriptions-row">
-            <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Product</span><span class="ant-descriptions-item-content"> Cloud Database </span></td>
+            <td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content"> Cloud Database </span></td>
           </tr>
           <tr class="ant-descriptions-row">
-            <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</span><span class="ant-descriptions-item-content"> Prepaid </span></td>
+            <td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content"> Prepaid </span></td>
           </tr>
           <tr class="ant-descriptions-row">
-            <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Time</span><span class="ant-descriptions-item-content"> 18:00:00 </span></td>
+            <td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Time</span><span class="ant-descriptions-item-content"> 18:00:00 </span></td>
           </tr>
           <tr class="ant-descriptions-row">
-            <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</span><span class="ant-descriptions-item-content"> $80.00 </span></td>
+            <td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content"> $80.00 </span></td>
           </tr>
           <tr class="ant-descriptions-row">
-            <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Discount</span><span class="ant-descriptions-item-content"> $20.00 </span></td>
+            <td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Discount</span><span class="ant-descriptions-item-content"> $20.00 </span></td>
           </tr>
           <tr class="ant-descriptions-row">
-            <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Official</span><span class="ant-descriptions-item-content"> $60.00 </span></td>
+            <td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Official</span><span class="ant-descriptions-item-content"> $60.00 </span></td>
           </tr>
         </tbody>
       </table>
@@ -191,39 +216,64 @@ exports[`renders ./antdv-demo/docs/descriptions/demo/size.md correctly 1`] = `
 
 exports[`renders ./antdv-demo/docs/descriptions/demo/vertical.md correctly 1`] = `
 <div class="ant-descriptions">
-  <div class="ant-descriptions-title">User Info</div>
+  <div class="ant-descriptions-header">
+    <div class="ant-descriptions-title">User Info</div>
+    <div class="ant-descriptions-extra">
+      <!---->
+    </div>
+  </div>
   <div class="ant-descriptions-view">
     <table>
       <tbody>
         <tr class="ant-descriptions-row">
-          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">UserName</span></td>
+          <th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">UserName</span>
+            <!---->
+          </th>
         </tr>
         <tr class="ant-descriptions-row">
-          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content"> Zhou Maomao </span></td>
+          <td class="ant-descriptions-item" colspan="1">
+            <!----><span class="ant-descriptions-item-content"> Zhou Maomao </span>
+          </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Telephone</span></td>
+          <th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Telephone</span>
+            <!---->
+          </th>
         </tr>
         <tr class="ant-descriptions-row">
-          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content"> 1810000000 </span></td>
+          <td class="ant-descriptions-item" colspan="1">
+            <!----><span class="ant-descriptions-item-content"> 1810000000 </span>
+          </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Live</span></td>
+          <th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Live</span>
+            <!---->
+          </th>
         </tr>
         <tr class="ant-descriptions-row">
-          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content"> Hangzhou, Zhejiang </span></td>
+          <td class="ant-descriptions-item" colspan="1">
+            <!----><span class="ant-descriptions-item-content"> Hangzhou, Zhejiang </span>
+          </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <td colspan="2" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Address</span></td>
+          <th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Address</span>
+            <!---->
+          </th>
         </tr>
         <tr class="ant-descriptions-row">
-          <td colspan="2" class="ant-descriptions-item"><span class="ant-descriptions-item-content"> No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China </span></td>
+          <td class="ant-descriptions-item" colspan="1">
+            <!----><span class="ant-descriptions-item-content"> No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China </span>
+          </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Remark</span></td>
+          <th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Remark</span>
+            <!---->
+          </th>
         </tr>
         <tr class="ant-descriptions-row">
-          <td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content"> empty </span></td>
+          <td class="ant-descriptions-item" colspan="1">
+            <!----><span class="ant-descriptions-item-content"> empty </span>
+          </td>
         </tr>
       </tbody>
     </table>
@@ -233,66 +283,71 @@ exports[`renders ./antdv-demo/docs/descriptions/demo/vertical.md correctly 1`] =
 
 exports[`renders ./antdv-demo/docs/descriptions/demo/vertical-border.md correctly 1`] = `
 <div class="ant-descriptions ant-descriptions-bordered">
-  <div class="ant-descriptions-title">User Info</div>
+  <div class="ant-descriptions-header">
+    <div class="ant-descriptions-title">User Info</div>
+    <div class="ant-descriptions-extra">
+      <!---->
+    </div>
+  </div>
   <div class="ant-descriptions-view">
     <table>
       <tbody>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon" colspan="1">Product</th>
+          <th class="ant-descriptions-item-label" colspan="1">Product</th>
         </tr>
         <tr class="ant-descriptions-row">
           <td class="ant-descriptions-item-content" colspan="1"> Cloud Database </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon" colspan="1">Billing Mode</th>
+          <th class="ant-descriptions-item-label" colspan="1">Billing Mode</th>
         </tr>
         <tr class="ant-descriptions-row">
           <td class="ant-descriptions-item-content" colspan="1"> Prepaid </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon" colspan="1">Automatic Renewal</th>
+          <th class="ant-descriptions-item-label" colspan="1">Automatic Renewal</th>
         </tr>
         <tr class="ant-descriptions-row">
           <td class="ant-descriptions-item-content" colspan="1"> YES </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon" colspan="1">Order time</th>
+          <th class="ant-descriptions-item-label" colspan="1">Order time</th>
         </tr>
         <tr class="ant-descriptions-row">
           <td class="ant-descriptions-item-content" colspan="1"> 2018-04-24 18:00:00 </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon" colspan="3">Usage Time</th>
+          <th class="ant-descriptions-item-label" colspan="1">Usage Time</th>
         </tr>
         <tr class="ant-descriptions-row">
-          <td class="ant-descriptions-item-content" colspan="3"> 2019-04-24 18:00:00 </td>
+          <td class="ant-descriptions-item-content" colspan="1"> 2019-04-24 18:00:00 </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon" colspan="5">Status</th>
+          <th class="ant-descriptions-item-label" colspan="1">Status</th>
         </tr>
         <tr class="ant-descriptions-row">
-          <td class="ant-descriptions-item-content" colspan="5"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Running</span></span></td>
+          <td class="ant-descriptions-item-content" colspan="1"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Running</span></span></td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon" colspan="1">Negotiated Amount</th>
+          <th class="ant-descriptions-item-label" colspan="1">Negotiated Amount</th>
         </tr>
         <tr class="ant-descriptions-row">
           <td class="ant-descriptions-item-content" colspan="1"> $80.00 </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon" colspan="1">Discount</th>
+          <th class="ant-descriptions-item-label" colspan="1">Discount</th>
         </tr>
         <tr class="ant-descriptions-row">
           <td class="ant-descriptions-item-content" colspan="1"> $20.00 </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon" colspan="1">Official Receipts</th>
+          <th class="ant-descriptions-item-label" colspan="1">Official Receipts</th>
         </tr>
         <tr class="ant-descriptions-row">
           <td class="ant-descriptions-item-content" colspan="1"> $60.00 </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item-label ant-descriptions-item-colon" colspan="1">Config Info</th>
+          <th class="ant-descriptions-item-label" colspan="1">Config Info</th>
         </tr>
         <tr class="ant-descriptions-row">
           <td class="ant-descriptions-item-content" colspan="1"> Data disk type: MongoDB <br> Database version: 3.4 <br> Package: dds.mongo.mid <br> Storage space: 10 GB <br> Replication factor: 3 <br> Region: East China 1<br></td>
diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap
index 4ad41417c..6e21a515b 100644
--- a/components/layout/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/layout/__tests__/__snapshots__/demo.test.js.snap
@@ -9,8 +9,8 @@ exports[`renders ./antdv-demo/docs/layout/demo/basic.md correctly 1`] = `
   </section>
   <section class="ant-layout">
     <header class="ant-layout-header">Header</header>
-    <section class="ant-layout">
-      <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
+    <section class="ant-layout ant-layout-has-sider">
+      <aside class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px;">
         <div class="ant-layout-sider-children">Sider</div>
         <!---->
       </aside>
@@ -20,17 +20,17 @@ exports[`renders ./antdv-demo/docs/layout/demo/basic.md correctly 1`] = `
   </section>
   <section class="ant-layout">
     <header class="ant-layout-header">Header</header>
-    <section class="ant-layout">
+    <section class="ant-layout ant-layout-has-sider">
       <main class="ant-layout-content">Content</main>
-      <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
+      <aside class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px;">
         <div class="ant-layout-sider-children">Sider</div>
         <!---->
       </aside>
     </section>
     <footer class="ant-layout-footer">Footer</footer>
   </section>
-  <section class="ant-layout">
-    <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
+  <section class="ant-layout ant-layout-has-sider">
+    <aside class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px;">
       <div class="ant-layout-sider-children">Sider</div>
       <!---->
     </aside>
@@ -44,8 +44,8 @@ exports[`renders ./antdv-demo/docs/layout/demo/basic.md correctly 1`] = `
 `;
 
 exports[`renders ./antdv-demo/docs/layout/demo/custom-trigger.md correctly 1`] = `
-<section class="ant-layout" id="components-layout-demo-custom-trigger">
-  <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
+<section class="ant-layout ant-layout-has-sider" id="components-layout-demo-custom-trigger">
+  <aside class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px;">
     <div class="ant-layout-sider-children">
       <div class="logo"></div>
       <ul role="menu" class="ant-menu-dark ant-menu-root ant-menu ant-menu-inline">
@@ -66,8 +66,8 @@ exports[`renders ./antdv-demo/docs/layout/demo/custom-trigger.md correctly 1`] =
     <!---->
   </aside>
   <section class="ant-layout">
-    <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"><span tabindex="-1" role="img" aria-label="menu-fold" class="anticon anticon-menu-fold trigger"><svg class="" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path></svg></span></header>
-    <main class="ant-layout-content" style="margin: 24px 16px; padding: 24px; background: rgb(255, 255, 255); min-height: 280px;"> Content </main>
+    <header class="ant-layout-header" style="padding: 0px; background: rgb(255, 255, 255);"><span tabindex="-1" role="img" aria-label="menu-fold" class="anticon anticon-menu-fold trigger"><svg class="" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path></svg></span></header>
+    <main class="ant-layout-content" style="margin: 24px 16px; padding: 24px; min-height: 280px; background: rgb(255, 255, 255);"> Content </main>
   </section>
 </section>
 `;
@@ -124,8 +124,8 @@ exports[`renders ./antdv-demo/docs/layout/demo/fixed.md correctly 1`] = `
 `;
 
 exports[`renders ./antdv-demo/docs/layout/demo/fixed-sider.md correctly 1`] = `
-<section class="ant-layout" id="components-layout-demo-fixed-sider">
-  <aside class="ant-layout-sider ant-layout-sider-dark" style="overflow: auto; height: 100vh; position: fixed; left: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
+<section class="ant-layout ant-layout-has-sider" id="components-layout-demo-fixed-sider">
+  <aside class="ant-layout-sider ant-layout-sider-dark" style="overflow: auto; height: 100vh; position: fixed; left: 0px; max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px;">
     <div class="ant-layout-sider-children">
       <div class="logo"></div>
       <ul role="menu" class="ant-menu-dark ant-menu-root ant-menu ant-menu-inline">
@@ -166,7 +166,7 @@ exports[`renders ./antdv-demo/docs/layout/demo/fixed-sider.md correctly 1`] = `
     <!---->
   </aside>
   <section class="ant-layout" style="margin-left: 200px;">
-    <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></header>
+    <header class="ant-layout-header" style="padding: 0px; background: rgb(255, 255, 255);"></header>
     <main class="ant-layout-content" style="margin: 24px 16px 0px; overflow: initial;">
       <div style="padding: 24px; background: rgb(255, 255, 255); text-align: center;"> ... <br> Really <br>...<br>...<br>...<br> long <br>...<br>...<br>...<br>...<br>...<br>... <br>...<br>...<br>...<br>...<br>...<br>... <br>...<br>...<br>...<br>...<br>...<br>... <br>...<br>...<br>...<br>...<br>...<br>... <br>...<br>...<br>...<br>...<br>...<br>... <br>...<br>...<br>...<br>...<br>...<br>... <br>...<br>...<br>...<br>...<br>...<br> content </div>
     </main>
@@ -176,11 +176,11 @@ exports[`renders ./antdv-demo/docs/layout/demo/fixed-sider.md correctly 1`] = `
 `;
 
 exports[`renders ./antdv-demo/docs/layout/demo/responsive.md correctly 1`] = `
-<section class="ant-layout" id="components-layout-demo-responsive">
-  <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
+<section class="ant-layout ant-layout-has-sider" id="components-layout-demo-responsive">
+  <aside class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-collapsed ant-layout-sider-below ant-layout-sider-zero-width" style="max-width: 0px; min-width: 0px; width: 0px; flex: 0 0 0px;">
     <div class="ant-layout-sider-children">
       <div class="logo"></div>
-      <ul role="menu" class="ant-menu-dark ant-menu-root ant-menu ant-menu-inline">
+      <ul role="menu" class="ant-menu-dark ant-menu-inline-collapsed ant-menu-root ant-menu ant-menu-inline">
         <!---->
         <li role="menuitem" style="padding-left: 24px;" class="ant-menu-item"><span role="img" aria-label="user" class="anticon anticon-user"><svg class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span><span class="nav-text">nav 1</span>
           <!---->
@@ -198,11 +198,10 @@ exports[`renders ./antdv-demo/docs/layout/demo/responsive.md correctly 1`] = `
           <!---->
         </li>
       </ul>
-    </div>
-    <!---->
+    </div><span class="ant-layout-sider-zero-width-trigger ant-layout-sider-zero-width-trigger-left"><span role="img" aria-label="bars" class="anticon anticon-bars"><svg class="" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024" focusable="false"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></span>
   </aside>
   <section class="ant-layout">
-    <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></header>
+    <header class="ant-layout-header" style="padding: 0px; background: rgb(255, 255, 255);"></header>
     <main class="ant-layout-content" style="margin: 24px 16px 0px;">
       <div style="padding: 24px; background: rgb(255, 255, 255); min-height: 360px;"> content </div>
     </main>
@@ -212,8 +211,8 @@ exports[`renders ./antdv-demo/docs/layout/demo/responsive.md correctly 1`] = `
 `;
 
 exports[`renders ./antdv-demo/docs/layout/demo/side.md correctly 1`] = `
-<section class="ant-layout" id="components-layout-demo-side" style="min-height: 100vh;">
-  <aside class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-has-trigger" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
+<section class="ant-layout ant-layout-has-sider" id="components-layout-demo-side" style="min-height: 100vh;">
+  <aside class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-has-trigger" style="max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px;">
     <div class="ant-layout-sider-children">
       <div class="logo"></div>
       <ul role="menu" class="ant-menu-dark ant-menu-root ant-menu ant-menu-inline">
@@ -244,7 +243,7 @@ exports[`renders ./antdv-demo/docs/layout/demo/side.md correctly 1`] = `
     <div class="ant-layout-sider-trigger" style="width: 200px;"><span role="img" aria-label="left" class="anticon anticon-left"><svg class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 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"></path></svg></span></div>
   </aside>
   <section class="ant-layout">
-    <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></header>
+    <header class="ant-layout-header" style="padding: 0px; background: rgb(255, 255, 255);"></header>
     <main class="ant-layout-content" style="margin: 0px 16px;">
       <div class="ant-breadcrumb" style="margin: 16px 0px;"><span><span class="ant-breadcrumb-link">User</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">Bill</span><span class="ant-breadcrumb-separator">/</span></span></div>
       <div style="padding: 24px; background: rgb(255, 255, 255); min-height: 360px;"> Bill is a cat. </div>
@@ -350,8 +349,8 @@ exports[`renders ./antdv-demo/docs/layout/demo/top-side.md correctly 1`] = `
   </header>
   <main class="ant-layout-content" style="padding: 0px 50px;">
     <div class="ant-breadcrumb" style="margin: 16px 0px;"><span><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div>
-    <section class="ant-layout" style="padding: 24px 0px; background: rgb(255, 255, 255);">
-      <aside class="ant-layout-sider ant-layout-sider-dark" style="background: rgb(255, 255, 255); flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
+    <section class="ant-layout ant-layout-has-sider" style="padding: 24px 0px; background: rgb(255, 255, 255);">
+      <aside class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; background: rgb(255, 255, 255); flex: 0 0 200px;">
         <div class="ant-layout-sider-children">
           <ul role="menu" class="ant-menu-light ant-menu-root ant-menu ant-menu-inline" style="height: 100%;">
             <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected" role="menuitem">
@@ -440,8 +439,8 @@ exports[`renders ./antdv-demo/docs/layout/demo/top-side-2.md correctly 1`] = `
       </li>
     </ul>
   </header>
-  <section class="ant-layout">
-    <aside class="ant-layout-sider ant-layout-sider-dark" style="background: rgb(255, 255, 255); flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
+  <section class="ant-layout ant-layout-has-sider">
+    <aside class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; background: rgb(255, 255, 255); flex: 0 0 200px;">
       <div class="ant-layout-sider-children">
         <ul role="menu" class="ant-menu-light ant-menu-root ant-menu ant-menu-inline" style="height: 100%; border-right: 0;">
           <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected" role="menuitem">
@@ -482,7 +481,7 @@ exports[`renders ./antdv-demo/docs/layout/demo/top-side-2.md correctly 1`] = `
     </aside>
     <section class="ant-layout" style="padding: 0px 24px 24px;">
       <div class="ant-breadcrumb" style="margin: 16px 0px;"><span><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div>
-      <main class="ant-layout-content" style="background: rgb(255, 255, 255); padding: 24px; margin: 0px; min-height: 280px;"> Content </main>
+      <main class="ant-layout-content" style="padding: 24px; margin: 0px; min-height: 280px; background: rgb(255, 255, 255);"> Content </main>
     </section>
   </section>
 </section>
diff --git a/components/mentions/__tests__/__snapshots__/demo.test.js.snap b/components/mentions/__tests__/__snapshots__/demo.test.js.snap
index 71a0d6c93..2c28599f3 100644
--- a/components/mentions/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/mentions/__tests__/__snapshots__/demo.test.js.snap
@@ -7,7 +7,7 @@ exports[`renders ./antdv-demo/docs/mentions/demo/async.md correctly 1`] = `
 `;
 
 exports[`renders ./antdv-demo/docs/mentions/demo/basic.md correctly 1`] = `
-<div class="ant-mentions"><textarea autofocus="" rows="1"></textarea>
+<div class="ant-mentions ant-mentions-focused"><textarea autofocus="" rows="1"></textarea>
   <!---->
 </div>
 `;
diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
index b74299d1e..ca6946bbb 100644
--- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
@@ -119,7 +119,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/actions.md correctly 1`] = `
                   colspan="1"
                 >
                   <span
-                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                    class="ant-descriptions-item-label"
                   >
                     Created
                   </span>
@@ -136,7 +136,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/actions.md correctly 1`] = `
                   colspan="1"
                 >
                   <span
-                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                    class="ant-descriptions-item-label"
                   >
                     Association
                   </span>
@@ -155,7 +155,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/actions.md correctly 1`] = `
                   colspan="1"
                 >
                   <span
-                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                    class="ant-descriptions-item-label"
                   >
                     Creation Time
                   </span>
@@ -178,7 +178,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/actions.md correctly 1`] = `
                   colspan="1"
                 >
                   <span
-                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                    class="ant-descriptions-item-label"
                   >
                     Effective Time
                   </span>
@@ -195,7 +195,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/actions.md correctly 1`] = `
                   colspan="2"
                 >
                   <span
-                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                    class="ant-descriptions-item-label"
                   >
                     Remarks
                   </span>
@@ -700,7 +700,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/ghost.md correctly 1`] = `
                   colspan="1"
                 >
                   <span
-                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                    class="ant-descriptions-item-label"
                   >
                     Created
                   </span>
@@ -717,7 +717,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/ghost.md correctly 1`] = `
                   colspan="1"
                 >
                   <span
-                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                    class="ant-descriptions-item-label"
                   >
                     Association
                   </span>
@@ -736,7 +736,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/ghost.md correctly 1`] = `
                   colspan="1"
                 >
                   <span
-                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                    class="ant-descriptions-item-label"
                   >
                     Creation Time
                   </span>
@@ -759,7 +759,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/ghost.md correctly 1`] = `
                   colspan="1"
                 >
                   <span
-                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                    class="ant-descriptions-item-label"
                   >
                     Effective Time
                   </span>
@@ -776,7 +776,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/ghost.md correctly 1`] = `
                   colspan="2"
                 >
                   <span
-                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                    class="ant-descriptions-item-label"
                   >
                     Remarks
                   </span>
@@ -927,7 +927,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/responsive.md correctly 1`]
                       colspan="1"
                     >
                       <span
-                        class="ant-descriptions-item-label ant-descriptions-item-colon"
+                        class="ant-descriptions-item-label"
                       >
                         Created
                       </span>
@@ -944,7 +944,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/responsive.md correctly 1`]
                       colspan="1"
                     >
                       <span
-                        class="ant-descriptions-item-label ant-descriptions-item-colon"
+                        class="ant-descriptions-item-label"
                       >
                         Association
                       </span>
@@ -969,7 +969,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/responsive.md correctly 1`]
                       colspan="1"
                     >
                       <span
-                        class="ant-descriptions-item-label ant-descriptions-item-colon"
+                        class="ant-descriptions-item-label"
                       >
                         Creation Time
                       </span>
@@ -986,7 +986,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/responsive.md correctly 1`]
                       colspan="1"
                     >
                       <span
-                        class="ant-descriptions-item-label ant-descriptions-item-colon"
+                        class="ant-descriptions-item-label"
                       >
                         Effective Time
                       </span>
@@ -1009,7 +1009,7 @@ exports[`renders ./antdv-demo/docs/page-header/demo/responsive.md correctly 1`]
                       colspan="2"
                     >
                       <span
-                        class="ant-descriptions-item-label ant-descriptions-item-colon"
+                        class="ant-descriptions-item-label"
                       >
                         Remarks
                       </span>
diff --git a/components/space/__tests__/__snapshots__/demo.test.js.snap b/components/space/__tests__/__snapshots__/demo.test.js.snap
index b7424b7ba..7585693fb 100644
--- a/components/space/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/space/__tests__/__snapshots__/demo.test.js.snap
@@ -47,12 +47,14 @@ exports[`renders ./antdv-demo/docs/space/demo/base.md correctly 1`] = `
   <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
       <!----><span>Button</span>
     </button></div>
-  <div class="ant-space-item" style="margin-right: 8px;"><span class=""><div class="ant-upload ant-upload-select ant-upload-select-text"><!----></div><div class="ant-upload-list ant-upload-list-text"></div></span></div>
-  <div class="ant-space-item">
-    <!----><button class="ant-btn" type="button">
-      <!----><span>Confirm</span>
-    </button>
-  </div>
+  <div class="ant-space-item" style="margin-right: 8px;"><span class=""><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Click to Upload</span></button></span></div>
+  <div class="ant-upload-list ant-upload-list-text"></div></span>
+</div>
+<div class="ant-space-item">
+  <!----><button class="ant-btn" type="button">
+    <!----><span>Confirm</span>
+  </button>
+</div>
 </div>
 `;
 
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index f4e809e83..7513d2f30 100644
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -3,8 +3,12 @@
 exports[`renders ./antdv-demo/docs/table/demo/ajax.md correctly 1`] = `
 <div class="ant-table-wrapper">
   <div class="ant-spin-nested-loading">
-    <!---->
-    <div class="ant-spin-container">
+    <div>
+      <div class="ant-spin ant-spin-spinning ant-table-without-pagination ant-table-spin-holder"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
+        <!---->
+      </div>
+    </div>
+    <div class="ant-spin-container ant-spin-blur">
       <div class="ant-table ant-table-default ant-table-empty ant-table-scroll-position-left">
         <!---->
         <div class="ant-table-content">
diff --git a/components/upload/__tests__/__snapshots__/demo.test.js.snap b/components/upload/__tests__/__snapshots__/demo.test.js.snap
index 3a28b1773..9b55ec4be 100644
--- a/components/upload/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/upload/__tests__/__snapshots__/demo.test.js.snap
@@ -1,13 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./antdv-demo/docs/upload/demo/avatar.md correctly 1`] = `<span class="ant-upload-picture-card-wrapper avatar-uploader"><!----><div class="ant-upload ant-upload-select ant-upload-select-picture-card"><!----></div></span>`;
+exports[`renders ./antdv-demo/docs/upload/demo/avatar.md correctly 1`] = `
+<span class="ant-upload-picture-card-wrapper avatar-uploader"><!----><div class="ant-upload ant-upload-select ant-upload-select-picture-card"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><div><!-- todo --><span role="img" aria-label="plus" class="anticon anticon-plus"><svg class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span>
+<div class="ant-upload-text">Upload</div>
+</div></span></div></span>
+`;
 
-exports[`renders ./antdv-demo/docs/upload/demo/basic.md correctly 1`] = `<span class=""><div class="ant-upload ant-upload-select ant-upload-select-text"><!----></div><div class="ant-upload-list ant-upload-list-text"></div></span>`;
+exports[`renders ./antdv-demo/docs/upload/demo/basic.md correctly 1`] = `
+<span class=""><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept="" multiple=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Click to Upload</span></button></span></div>
+<div class="ant-upload-list ant-upload-list-text"></div></span>
+`;
 
 exports[`renders ./antdv-demo/docs/upload/demo/defaultFileList.md correctly 1`] = `
-<span class=""><div class="ant-upload ant-upload-select ant-upload-select-text"><!----></div><div class="ant-upload-list ant-upload-list-text"><div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"><div class="ant-upload-list-item-info"><span><span role="img" aria-label="paper-clip" class="anticon anticon-paper-clip"><svg class="" data-icon="paper-clip" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"></path></svg></span><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="xxx.png" href="http://www.baidu.com/xxx.png">xxx.png</a><span class="ant-upload-list-item-card-actions "><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
-<!---->
-<!---->
+<span class=""><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Upload</span></button></span></div>
+<div class="ant-upload-list ant-upload-list-text">
+  <div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"><div class="ant-upload-list-item-info"><span><span role="img" aria-label="paper-clip" class="anticon anticon-paper-clip"><svg class="" data-icon="paper-clip" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"></path></svg></span><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="xxx.png" href="http://www.baidu.com/xxx.png">xxx.png</a><span class="ant-upload-list-item-card-actions "><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
+  <!---->
+  <!---->
 </div></span></div>
 <div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"><div class="ant-upload-list-item-info"><span><span role="img" aria-label="paper-clip" class="anticon anticon-paper-clip"><svg class="" data-icon="paper-clip" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"></path></svg></span><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="yyy.png" href="http://www.baidu.com/yyy.png">yyy.png</a><span class="ant-upload-list-item-card-actions "><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
 <!---->
@@ -24,14 +33,25 @@ exports[`renders ./antdv-demo/docs/upload/demo/defaultFileList.md correctly 1`]
 </div></span>
 `;
 
-exports[`renders ./antdv-demo/docs/upload/demo/directory.md correctly 1`] = `<span class=""><div class="ant-upload ant-upload-select ant-upload-select-text"><!----></div><div class="ant-upload-list ant-upload-list-text"></div></span>`;
+exports[`renders ./antdv-demo/docs/upload/demo/directory.md correctly 1`] = `
+<span class=""><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept="" directory="directory" webkitdirectory="webkitdirectory"><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Upload Directory</span></button></span></div>
+<div class="ant-upload-list ant-upload-list-text"></div></span>
+`;
 
-exports[`renders ./antdv-demo/docs/upload/demo/drag.md correctly 1`] = `<span class=""><div class="ant-upload ant-upload-drag"><!----></div><div class="ant-upload-list ant-upload-list-text"></div></span>`;
+exports[`renders ./antdv-demo/docs/upload/demo/drag.md correctly 1`] = `
+<span class=""><div class="ant-upload ant-upload-drag"><span role="button" tabindex="0" class="ant-upload ant-upload-btn"><input type="file" style="display: none;" accept="" multiple=""><div class="ant-upload-drag-container"><p class="ant-upload-drag-icon"><span role="img" aria-label="inbox" class="anticon anticon-inbox"><svg class="" data-icon="inbox" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024" focusable="false"><path d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"></path></svg></span></p>
+<p class="ant-upload-text"> Click or drag file to this area to upload </p>
+<p class="ant-upload-hint"> Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files </p>
+</div></span></div>
+<div class="ant-upload-list ant-upload-list-text"></div></span>
+`;
 
 exports[`renders ./antdv-demo/docs/upload/demo/fileList.md correctly 1`] = `
-<span class=""><div class="ant-upload ant-upload-select ant-upload-select-text"><!----></div><div class="ant-upload-list ant-upload-list-text"><div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"><div class="ant-upload-list-item-info"><span><span role="img" aria-label="paper-clip" class="anticon anticon-paper-clip"><svg class="" data-icon="paper-clip" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"></path></svg></span><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="xxx.png" href="http://www.baidu.com/xxx.png">xxx.png</a><span class="ant-upload-list-item-card-actions "><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
-<!---->
-<!---->
+<span class=""><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept="" multiple=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Upload</span></button></span></div>
+<div class="ant-upload-list ant-upload-list-text">
+  <div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"><div class="ant-upload-list-item-info"><span><span role="img" aria-label="paper-clip" class="anticon anticon-paper-clip"><svg class="" data-icon="paper-clip" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"></path></svg></span><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="xxx.png" href="http://www.baidu.com/xxx.png">xxx.png</a><span class="ant-upload-list-item-card-actions "><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
+  <!---->
+  <!---->
 </div></span></div>
 </div></span>
 `;
@@ -64,25 +84,29 @@ exports[`renders ./antdv-demo/docs/upload/demo/picture-card.md correctly 1`] = `
   </div>
 </div>
 </div>
-<div class="ant-upload ant-upload-select ant-upload-select-picture-card">
-  <!---->
-</div></span>
+<div class="ant-upload ant-upload-select ant-upload-select-picture-card"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><div><span role="img" aria-label="plus" class="anticon anticon-plus"><svg class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span>
+  <div class="ant-upload-text">Upload</div>
+</div></span></div></span>
 <!---->
 </div>
 `;
 
 exports[`renders ./antdv-demo/docs/upload/demo/picture-style.md correctly 1`] = `
-<div><span class=""><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><div class="ant-upload-list ant-upload-list-picture"><div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="xxx.png" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="xxx.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">xxx.png</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
-<!---->
-<!---->
+<div><span class=""><div class="ant-upload ant-upload-select ant-upload-select-picture"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>upload</span></button></span></div>
+<div class="ant-upload-list ant-upload-list-picture">
+  <div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="xxx.png" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="xxx.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">xxx.png</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
+  <!---->
+  <!---->
 </div></span></div>
 <div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="yyy.png" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="yyy.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">yyy.png</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
 <!---->
 <!---->
 </div></span></div>
-</div></span><br><br><span class="upload-list-inline"><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><div class="ant-upload-list ant-upload-list-picture"><div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="xxx.png" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="xxx.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">xxx.png</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
-<!---->
-<!---->
+</div></span><br><br><span class="upload-list-inline"><div class="ant-upload ant-upload-select ant-upload-select-picture"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>upload</span></button></span></div>
+<div class="ant-upload-list ant-upload-list-picture">
+  <div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="xxx.png" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="xxx.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">xxx.png</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
+  <!---->
+  <!---->
 </div></span></div>
 <div class=""><span><div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"><div class="ant-upload-list-item-info"><span><a class="ant-upload-list-item-thumbnail" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="yyy.png" class="ant-upload-list-item-image"></a><a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="yyy.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">yyy.png</a><span class="ant-upload-list-item-card-actions picture"><!----><a title="Remove file"><span title="Remove file" tabindex="-1" role="img" aria-label="delete" class="anticon anticon-delete"><svg class="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
 <!---->
@@ -91,12 +115,19 @@ exports[`renders ./antdv-demo/docs/upload/demo/picture-style.md correctly 1`] =
 </div></span></div>
 `;
 
-exports[`renders ./antdv-demo/docs/upload/demo/preview-file.md correctly 1`] = `<div><span class=""><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><div class="ant-upload-list ant-upload-list-picture"></div></span></div>`;
+exports[`renders ./antdv-demo/docs/upload/demo/preview-file.md correctly 1`] = `
+<div><span class=""><div class="ant-upload ant-upload-select ant-upload-select-picture"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Upload</span></button></span></div>
+<div class="ant-upload-list ant-upload-list-picture"></div></span></div>
+`;
 
-exports[`renders ./antdv-demo/docs/upload/demo/transform-file.md correctly 1`] = `<div><span class=""><div class="ant-upload ant-upload-select ant-upload-select-text"><!----></div><div class="ant-upload-list ant-upload-list-text"></div></span></div>`;
+exports[`renders ./antdv-demo/docs/upload/demo/transform-file.md correctly 1`] = `
+<div><span class=""><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Upload</span></button></span></div>
+<div class="ant-upload-list ant-upload-list-text"></div></span></div>
+`;
 
 exports[`renders ./antdv-demo/docs/upload/demo/upload-manually.md correctly 1`] = `
-<div class="clearfix"><span class=""><div class="ant-upload ant-upload-select ant-upload-select-text"><!----></div><div class="ant-upload-list ant-upload-list-text"></div></span><button style="margin-top: 16px;" disabled="" class="ant-btn ant-btn-primary" type="button">
-    <!----><span>Start Upload</span>
-  </button></div>
+<div class="clearfix"><span class=""><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Select File</span></button></span></div>
+<div class="ant-upload-list ant-upload-list-text"></div></span><button style="margin-top: 16px;" disabled="" class="ant-btn ant-btn-primary" type="button">
+  <!----><span>Start Upload</span>
+</button></div>
 `;