mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
docs: improve component demo style (#38598)
* docs: delete redundant codes repetitive examples that can make it difficult for developers to read * chore: update snapshot * docs(badge): wrapping documents with `Space` * chore: update snapshot * chore(space): optimize documents easy to read * chore: update badge demo * chore: update demo * Revert "chore(space): optimize documents" This reverts commit 88a4378f16cede5b628f885a48a341d507fd53e3. * chore: update snapshots * chore(button): add debug demo * test(button): update snapshots * docs(button): example document beautify * test(button): update snapshots commit by af04705c8f * test(alert): update snapshots * chore: Reverse format
This commit is contained in:
Wuxh
GitHub
parent
9c670dfdf6
commit
34a277cdaa
@ -1,7 +1,14 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/alert/demo/action.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success"
|
||||
data-show="true"
|
||||
@ -72,7 +79,12 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -123,7 +135,12 @@ Array [
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -183,7 +200,11 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -261,12 +282,20 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/banner.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -300,8 +329,12 @@ Array [
|
||||
Warning text
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -360,8 +393,12 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
<br />,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -376,8 +413,11 @@ Array [
|
||||
Warning text without icon
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -411,8 +451,9 @@ Array [
|
||||
Error text
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/basic.tsx extend context correctly 1`] = `
|
||||
@ -434,7 +475,14 @@ exports[`renders ./components/alert/demo/basic.tsx extend context correctly 1`]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/closable.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -474,7 +522,11 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -519,8 +571,9 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/close-text.tsx extend context correctly 1`] = `
|
||||
@ -553,7 +606,14 @@ exports[`renders ./components/alert/demo/close-text.tsx extend context correctly
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/custom-icon.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -568,7 +628,12 @@ Array [
|
||||
showIcon = false
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success"
|
||||
data-show="true"
|
||||
@ -602,7 +667,12 @@ Array [
|
||||
Success Tips
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-info"
|
||||
data-show="true"
|
||||
@ -636,7 +706,12 @@ Array [
|
||||
Informational Notes
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning"
|
||||
data-show="true"
|
||||
@ -670,7 +745,12 @@ Array [
|
||||
Warning
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error"
|
||||
data-show="true"
|
||||
@ -704,7 +784,12 @@ Array [
|
||||
Error
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -743,7 +828,12 @@ Array [
|
||||
Detailed description and advices about successful copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -782,7 +872,12 @@ Array [
|
||||
Additional description and informations about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -821,7 +916,11 @@ Array [
|
||||
This is a warning notice about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -860,12 +959,20 @@ Array [
|
||||
This is an error message about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/description.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -885,7 +992,12 @@ Array [
|
||||
Success Description Success Description Success Description
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -905,7 +1017,12 @@ Array [
|
||||
Info Description Info Description Info Description Info Description
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -925,7 +1042,11 @@ Array [
|
||||
Warning Description Warning Description Warning Description Warning Description
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -945,8 +1066,9 @@ Array [
|
||||
Error Description Error Description Error Description Error Description
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/error-boundary.tsx extend context correctly 1`] = `
|
||||
@ -961,7 +1083,14 @@ exports[`renders ./components/alert/demo/error-boundary.tsx extend context corre
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/icon.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success"
|
||||
data-show="true"
|
||||
@ -995,7 +1124,12 @@ Array [
|
||||
Success Tips
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-info"
|
||||
data-show="true"
|
||||
@ -1029,7 +1163,12 @@ Array [
|
||||
Informational Notes
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning"
|
||||
data-show="true"
|
||||
@ -1088,7 +1227,12 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error"
|
||||
data-show="true"
|
||||
@ -1122,7 +1266,12 @@ Array [
|
||||
Error
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1161,7 +1310,12 @@ Array [
|
||||
Detailed description and advice about successful copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1200,7 +1354,12 @@ Array [
|
||||
Additional description and information about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1264,7 +1423,11 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1303,12 +1466,20 @@ Array [
|
||||
This is an error message about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/smooth-closed.tsx extend context correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1349,14 +1520,52 @@ exports[`renders ./components/alert/demo/smooth-closed.tsx extend context correc
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<p>
|
||||
placeholder text here
|
||||
click the close button to see the effect
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
aria-checked="true"
|
||||
class="ant-switch ant-switch-checked ant-switch-disabled"
|
||||
disabled=""
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-switch-inner-checked"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner-unchecked"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/style.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1371,7 +1580,12 @@ Array [
|
||||
Success Text
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1386,7 +1600,12 @@ Array [
|
||||
Info Text
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1401,7 +1620,11 @@ Array [
|
||||
Warning Text
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1416,6 +1639,7 @@ Array [
|
||||
Error Text
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,7 +1,14 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/alert/demo/action.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success"
|
||||
data-show="true"
|
||||
@ -72,7 +79,12 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -123,7 +135,12 @@ Array [
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -183,7 +200,11 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -261,12 +282,20 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/banner.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -300,8 +329,12 @@ Array [
|
||||
Warning text
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -360,8 +393,12 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
<br />,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -376,8 +413,11 @@ Array [
|
||||
Warning text without icon
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -411,8 +451,9 @@ Array [
|
||||
Error text
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/basic.tsx correctly 1`] = `
|
||||
@ -434,7 +475,14 @@ exports[`renders ./components/alert/demo/basic.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/closable.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -474,7 +522,11 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -519,8 +571,9 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/close-text.tsx correctly 1`] = `
|
||||
@ -553,7 +606,14 @@ exports[`renders ./components/alert/demo/close-text.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/custom-icon.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -568,7 +628,12 @@ Array [
|
||||
showIcon = false
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success"
|
||||
data-show="true"
|
||||
@ -602,7 +667,12 @@ Array [
|
||||
Success Tips
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-info"
|
||||
data-show="true"
|
||||
@ -636,7 +706,12 @@ Array [
|
||||
Informational Notes
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning"
|
||||
data-show="true"
|
||||
@ -670,7 +745,12 @@ Array [
|
||||
Warning
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error"
|
||||
data-show="true"
|
||||
@ -704,7 +784,12 @@ Array [
|
||||
Error
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -743,7 +828,12 @@ Array [
|
||||
Detailed description and advices about successful copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -782,7 +872,12 @@ Array [
|
||||
Additional description and informations about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -821,7 +916,11 @@ Array [
|
||||
This is a warning notice about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -860,12 +959,20 @@ Array [
|
||||
This is an error message about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/description.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -885,7 +992,12 @@ Array [
|
||||
Success Description Success Description Success Description
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -905,7 +1017,12 @@ Array [
|
||||
Info Description Info Description Info Description Info Description
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -925,7 +1042,11 @@ Array [
|
||||
Warning Description Warning Description Warning Description Warning Description
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -945,8 +1066,9 @@ Array [
|
||||
Error Description Error Description Error Description Error Description
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/error-boundary.tsx correctly 1`] = `
|
||||
@ -961,7 +1083,14 @@ exports[`renders ./components/alert/demo/error-boundary.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/icon.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success"
|
||||
data-show="true"
|
||||
@ -995,7 +1124,12 @@ Array [
|
||||
Success Tips
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-info"
|
||||
data-show="true"
|
||||
@ -1029,7 +1163,12 @@ Array [
|
||||
Informational Notes
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning"
|
||||
data-show="true"
|
||||
@ -1088,7 +1227,12 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error"
|
||||
data-show="true"
|
||||
@ -1122,7 +1266,12 @@ Array [
|
||||
Error
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1161,7 +1310,12 @@ Array [
|
||||
Detailed description and advice about successful copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1200,7 +1354,12 @@ Array [
|
||||
Additional description and information about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1264,7 +1423,11 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1303,12 +1466,20 @@ Array [
|
||||
This is an error message about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/smooth-closed.tsx correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1349,14 +1520,52 @@ exports[`renders ./components/alert/demo/smooth-closed.tsx correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<p>
|
||||
placeholder text here
|
||||
click the close button to see the effect
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
aria-checked="true"
|
||||
class="ant-switch ant-switch-checked ant-switch-disabled"
|
||||
disabled=""
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-switch-inner-checked"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner-unchecked"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/style.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1371,7 +1580,12 @@ Array [
|
||||
Success Text
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1386,7 +1600,12 @@ Array [
|
||||
Info Text
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1401,7 +1620,11 @@ Array [
|
||||
Warning Text
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1416,6 +1639,7 @@ Array [
|
||||
Error Text
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import { Alert, Button, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert
|
||||
message="Success Tips"
|
||||
type="success"
|
||||
@ -53,7 +53,7 @@ const App: React.FC = () => (
|
||||
}
|
||||
closable
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,20 +1,17 @@
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
import { Alert, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert message="Warning text" banner />
|
||||
<br />
|
||||
<Alert
|
||||
message="Very long warning text warning text text text text text text text"
|
||||
banner
|
||||
closable
|
||||
/>
|
||||
<br />
|
||||
<Alert showIcon={false} message="Warning text without icon" banner />
|
||||
<br />
|
||||
<Alert type="error" message="Error text" banner />
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
import { Alert, Space } from 'antd';
|
||||
|
||||
const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
||||
console.log(e, 'I was closed.');
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert
|
||||
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
|
||||
type="warning"
|
||||
@ -20,7 +20,7 @@ const App: React.FC = () => (
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
import { Alert } from 'antd';
|
||||
import { Alert, Space } from 'antd';
|
||||
|
||||
const icon = <SmileOutlined />;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert icon={icon} message="showIcon = false" type="success" />
|
||||
<Alert icon={icon} message="Success Tips" type="success" showIcon />
|
||||
<Alert icon={icon} message="Informational Notes" type="info" showIcon />
|
||||
@ -39,7 +39,7 @@ const App: React.FC = () => (
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
import { Alert, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert
|
||||
message="Success Text"
|
||||
description="Success Description Success Description Success Description"
|
||||
@ -23,7 +23,7 @@ const App: React.FC = () => (
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
import { Alert, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert message="Success Tips" type="success" showIcon />
|
||||
<Alert message="Informational Notes" type="info" showIcon />
|
||||
<Alert message="Warning" type="warning" showIcon closable />
|
||||
@ -32,7 +32,7 @@ const App: React.FC = () => (
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Alert } from 'antd';
|
||||
import { Alert, Switch, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [visible, setVisible] = useState(true);
|
||||
@ -9,12 +9,13 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{visible ? (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
{visible && (
|
||||
<Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
|
||||
) : null}
|
||||
<p>placeholder text here</p>
|
||||
</div>
|
||||
)}
|
||||
<p>click the close button to see the effect</p>
|
||||
<Switch onChange={setVisible} checked={visible} disabled={visible} />
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
import { Alert, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert message="Success Text" type="success" />
|
||||
<Alert message="Info Text" type="info" />
|
||||
<Alert message="Warning Text" type="warning" />
|
||||
<Alert message="Error Text" type="error" />
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/badge/demo/basic.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -29,7 +35,12 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -48,7 +59,11 @@ Array [
|
||||
>
|
||||
0
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -83,12 +98,26 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/change.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -116,12 +145,16 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -145,7 +178,7 @@ Array [
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -175,7 +208,7 @@ Array [
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -198,11 +231,20 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>,
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -218,7 +260,11 @@ Array [
|
||||
class="ant-scroll-number ant-badge-dot"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
aria-checked="true"
|
||||
class="ant-switch ant-switch-checked"
|
||||
@ -238,8 +284,11 @@ Array [
|
||||
class="ant-switch-inner-unchecked"
|
||||
/>
|
||||
</span>
|
||||
</button>,
|
||||
]
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/colorful.tsx extend context correctly 1`] = `
|
||||
@ -567,15 +616,19 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="flex-wrap:wrap;margin-bottom:-16px"
|
||||
>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
pink
|
||||
</div>
|
||||
@ -606,15 +659,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
red
|
||||
</div>
|
||||
@ -645,15 +699,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
yellow
|
||||
</div>
|
||||
@ -684,15 +739,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
orange
|
||||
</div>
|
||||
@ -723,15 +779,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
cyan
|
||||
</div>
|
||||
@ -762,15 +819,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
green
|
||||
</div>
|
||||
@ -801,15 +859,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
blue
|
||||
</div>
|
||||
@ -840,15 +899,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
purple
|
||||
</div>
|
||||
@ -879,15 +939,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
geekblue
|
||||
</div>
|
||||
@ -918,15 +979,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
magenta
|
||||
</div>
|
||||
@ -957,15 +1019,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
volcano
|
||||
</div>
|
||||
@ -996,15 +1059,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
gold
|
||||
</div>
|
||||
@ -1035,15 +1099,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
lime
|
||||
</div>
|
||||
@ -1074,12 +1139,18 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/dot.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1107,7 +1178,11 @@ Array [
|
||||
class="ant-scroll-number ant-badge-dot"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1120,8 +1195,9 @@ Array [
|
||||
class="ant-scroll-number ant-badge-dot"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/link.tsx extend context correctly 1`] = `
|
||||
@ -1160,7 +1236,13 @@ exports[`renders ./components/badge/demo/link.tsx extend context correctly 1`] =
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/mix.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1188,7 +1270,12 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1216,7 +1303,12 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1244,7 +1336,12 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1273,7 +1370,12 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
@ -1289,7 +1391,12 @@ Array [
|
||||
class="ant-scroll-number ant-badge-dot ant-badge-status-success"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
@ -1305,7 +1412,12 @@ Array [
|
||||
class="ant-scroll-number ant-badge-dot ant-badge-status-warning"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
@ -1321,7 +1433,11 @@ Array [
|
||||
class="ant-scroll-number ant-badge-dot ant-badge-status-blue"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
@ -1338,8 +1454,9 @@ Array [
|
||||
data-show="true"
|
||||
style="background:#fa541c"
|
||||
/>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/no-wrapper.tsx extend context correctly 1`] = `
|
||||
@ -1490,7 +1607,13 @@ exports[`renders ./components/badge/demo/offset.tsx extend context correctly 1`]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/overflow.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1528,7 +1651,12 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1547,7 +1675,12 @@ Array [
|
||||
>
|
||||
99+
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1566,7 +1699,11 @@ Array [
|
||||
>
|
||||
10+
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1585,8 +1722,9 @@ Array [
|
||||
>
|
||||
999+
|
||||
</sup>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/ribbbon.tsx extend context correctly 1`] = `
|
||||
@ -2062,7 +2200,13 @@ exports[`renders ./components/badge/demo/ribbon-debug.tsx extend context correct
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/size.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -2090,7 +2234,11 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -2118,8 +2266,9 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/status.tsx extend context correctly 1`] = `
|
||||
@ -2280,7 +2429,13 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/title.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -2308,7 +2463,11 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -2346,6 +2505,7 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/badge/demo/basic.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -29,7 +35,12 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -48,7 +59,11 @@ Array [
|
||||
>
|
||||
0
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -83,12 +98,26 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/change.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -116,12 +145,16 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-btn-group"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -145,7 +178,7 @@ Array [
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -175,7 +208,7 @@ Array [
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -198,11 +231,20 @@ Array [
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>,
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -218,7 +260,11 @@ Array [
|
||||
class="ant-scroll-number ant-badge-dot"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
aria-checked="true"
|
||||
class="ant-switch ant-switch-checked"
|
||||
@ -238,8 +284,11 @@ Array [
|
||||
class="ant-switch-inner-unchecked"
|
||||
/>
|
||||
</span>
|
||||
</button>,
|
||||
]
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/colorful.tsx correctly 1`] = `
|
||||
@ -567,15 +616,19 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="flex-wrap:wrap;margin-bottom:-16px"
|
||||
>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
pink
|
||||
</div>
|
||||
@ -606,15 +659,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
red
|
||||
</div>
|
||||
@ -645,15 +699,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
yellow
|
||||
</div>
|
||||
@ -684,15 +739,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
orange
|
||||
</div>
|
||||
@ -723,15 +779,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
cyan
|
||||
</div>
|
||||
@ -762,15 +819,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
green
|
||||
</div>
|
||||
@ -801,15 +859,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
blue
|
||||
</div>
|
||||
@ -840,15 +899,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
purple
|
||||
</div>
|
||||
@ -879,15 +939,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
geekblue
|
||||
</div>
|
||||
@ -918,15 +979,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
magenta
|
||||
</div>
|
||||
@ -957,15 +1019,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
volcano
|
||||
</div>
|
||||
@ -996,15 +1059,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px;padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
gold
|
||||
</div>
|
||||
@ -1035,15 +1099,16 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
class="ant-space-item"
|
||||
style="padding-bottom:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
|
||||
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
|
||||
>
|
||||
lime
|
||||
</div>
|
||||
@ -1074,12 +1139,18 @@ Array [
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/dot.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1107,7 +1178,11 @@ Array [
|
||||
class="ant-scroll-number ant-badge-dot"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1120,8 +1195,9 @@ Array [
|
||||
class="ant-scroll-number ant-badge-dot"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/link.tsx correctly 1`] = `
|
||||
@ -1160,7 +1236,13 @@ exports[`renders ./components/badge/demo/link.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/mix.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1188,7 +1270,12 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1216,7 +1303,12 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1244,7 +1336,12 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1273,7 +1370,12 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
@ -1289,7 +1391,12 @@ Array [
|
||||
class="ant-scroll-number ant-badge-dot ant-badge-status-success"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
@ -1305,7 +1412,12 @@ Array [
|
||||
class="ant-scroll-number ant-badge-dot ant-badge-status-warning"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
@ -1321,7 +1433,11 @@ Array [
|
||||
class="ant-scroll-number ant-badge-dot ant-badge-status-blue"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
@ -1338,8 +1454,9 @@ Array [
|
||||
data-show="true"
|
||||
style="background:#fa541c"
|
||||
/>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/no-wrapper.tsx correctly 1`] = `
|
||||
@ -1490,7 +1607,13 @@ exports[`renders ./components/badge/demo/offset.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/overflow.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1528,7 +1651,12 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1547,7 +1675,12 @@ Array [
|
||||
>
|
||||
99+
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1566,7 +1699,11 @@ Array [
|
||||
>
|
||||
10+
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -1585,8 +1722,9 @@ Array [
|
||||
>
|
||||
999+
|
||||
</sup>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/ribbbon.tsx correctly 1`] = `
|
||||
@ -2062,7 +2200,13 @@ exports[`renders ./components/badge/demo/ribbon-debug.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/size.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -2090,7 +2234,11 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -2118,8 +2266,9 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/status.tsx correctly 1`] = `
|
||||
@ -2280,7 +2429,13 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/title.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -2308,7 +2463,11 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -2346,6 +2505,7 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { ClockCircleOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import { Avatar, Badge, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space size="middle">
|
||||
<Badge count={5}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
@ -13,7 +13,7 @@ const App: React.FC = () => (
|
||||
<Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Badge, Button, Divider, Switch } from 'antd';
|
||||
import { Avatar, Badge, Button, Switch, Space } from 'antd';
|
||||
|
||||
const ButtonGroup = Button.Group;
|
||||
|
||||
@ -30,27 +30,24 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Space direction="vertical">
|
||||
<Space size="large">
|
||||
<Badge count={count}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<ButtonGroup>
|
||||
<Button onClick={decline}>
|
||||
<MinusOutlined />
|
||||
</Button>
|
||||
<Button onClick={increase}>
|
||||
<PlusOutlined />
|
||||
</Button>
|
||||
<Button onClick={random}>
|
||||
<QuestionOutlined />
|
||||
</Button>
|
||||
<Button onClick={decline} icon={<MinusOutlined />} />
|
||||
<Button onClick={increase} icon={<PlusOutlined />} />
|
||||
<Button onClick={random} icon={<QuestionOutlined />} />
|
||||
</ButtonGroup>
|
||||
<Divider />
|
||||
</Space>
|
||||
<Space size="large">
|
||||
<Badge dot={show}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Switch onChange={onChange} checked={show} />
|
||||
</>
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Badge } from 'antd';
|
||||
import { Badge, Space } from 'antd';
|
||||
|
||||
const colors = [
|
||||
'pink',
|
||||
@ -18,10 +18,9 @@ const colors = [
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
{colors.map(color => (
|
||||
<div key={color} style={{ display: 'inline-block', verticalAlign: 'middle' }}>
|
||||
<Badge color={color} count={44}>
|
||||
<Space wrap size={['large', 'middle']}>
|
||||
{colors.map((color) => (
|
||||
<Badge color={color} count={44} key={color}>
|
||||
<div
|
||||
style={{
|
||||
width: 90,
|
||||
@ -29,15 +28,13 @@ const App: React.FC = () => (
|
||||
lineHeight: '90px',
|
||||
background: '#ccc',
|
||||
textAlign: 'center',
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
{color}
|
||||
</div>
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import React from 'react';
|
||||
import { NotificationOutlined } from '@ant-design/icons';
|
||||
import { Badge } from 'antd';
|
||||
import { Badge, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space>
|
||||
<Badge dot>
|
||||
<NotificationOutlined style={{ fontSize: 16 }} />
|
||||
</Badge>
|
||||
<Badge dot>
|
||||
<a href="#">Link something</a>
|
||||
</Badge>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import { Avatar, Badge, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space size="middle">
|
||||
<Badge count={5} status="success">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
@ -27,7 +27,7 @@ const App: React.FC = () => (
|
||||
<Badge dot color="#fa541c">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import { Avatar, Badge, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space size="large">
|
||||
<Badge count={99}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
@ -15,7 +15,7 @@ const App: React.FC = () => (
|
||||
<Badge count={1000} overflowCount={999}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import { Avatar, Badge, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space size="middle">
|
||||
<Badge size="default" count={5}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge size="small" count={5}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import { Avatar, Badge, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space size="large">
|
||||
<Badge count={5} title="Custom hover text">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={-5} title="Negative">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,15 +1,14 @@
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { Button, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space wrap>
|
||||
<Button type="primary">Primary Button</Button>
|
||||
<Button>Default Button</Button>
|
||||
<Button type="dashed">Dashed Button</Button>
|
||||
<br />
|
||||
<Button type="text">Text Button</Button>
|
||||
<Button type="link">Link Button</Button>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { Button, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Button type="primary" block>
|
||||
Primary
|
||||
</Button>
|
||||
@ -13,7 +13,7 @@ const App: React.FC = () => (
|
||||
<Button type="link" block>
|
||||
Link
|
||||
</Button>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import React from 'react';
|
||||
import { PoweroffOutlined } from '@ant-design/icons';
|
||||
import { Button } from 'antd';
|
||||
import { Button, Space } from 'antd';
|
||||
|
||||
const Text1 = () => '部署';
|
||||
const Text2 = () => <span>部署</span>;
|
||||
const Text3 = () => 'Submit';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<Space wrap>
|
||||
<Button loading>部署</Button>
|
||||
<Button loading>
|
||||
<Text1 />
|
||||
@ -22,7 +22,7 @@ const App = () => (
|
||||
<Text1 />
|
||||
</Button>
|
||||
<Button loading>按钮</Button>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { Button, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space wrap>
|
||||
<Button type="primary" danger>
|
||||
Primary
|
||||
</Button>
|
||||
@ -16,7 +16,7 @@ const App: React.FC = () => (
|
||||
<Button type="link" danger>
|
||||
Link
|
||||
</Button>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
7
components/button/demo/debug-icon.md
Normal file
7
components/button/demo/debug-icon.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
调试使用
|
||||
|
||||
## en-US
|
||||
|
||||
Debug usage
|
||||
55
components/button/demo/debug-icon.tsx
Normal file
55
components/button/demo/debug-icon.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import React, { useState } from 'react';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { Button, Tooltip, ConfigProvider, Radio, Divider, Space } from 'antd';
|
||||
import type { SizeType } from 'antd/es/config-provider/SizeContext';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [size, setSize] = useState<SizeType>('large');
|
||||
|
||||
return (
|
||||
<>
|
||||
<Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
|
||||
<Radio.Button value="large">Large</Radio.Button>
|
||||
<Radio.Button value="default">Default</Radio.Button>
|
||||
<Radio.Button value="small">Small</Radio.Button>
|
||||
</Radio.Group>
|
||||
<Divider orientation="left" plain>
|
||||
Preview
|
||||
</Divider>
|
||||
<ConfigProvider componentSize={size}>
|
||||
<Space direction="vertical">
|
||||
<Space wrap>
|
||||
<Tooltip title="search">
|
||||
<Button type="primary" shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button type="primary" shape="circle">
|
||||
A
|
||||
</Button>
|
||||
<Button type="primary" icon={<SearchOutlined />}>
|
||||
Search
|
||||
</Button>
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button icon={<SearchOutlined />}>Search</Button>
|
||||
</Space>
|
||||
<Space wrap>
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button icon={<SearchOutlined />}>Search</Button>
|
||||
<Tooltip title="search">
|
||||
<Button type="dashed" shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button type="dashed" icon={<SearchOutlined />}>
|
||||
Search
|
||||
</Button>
|
||||
<Button icon={<SearchOutlined />} href="https://www.google.com" />
|
||||
</Space>
|
||||
</Space>
|
||||
</ConfigProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -5,10 +5,3 @@
|
||||
## en-US
|
||||
|
||||
To mark a button as disabled, add the `disabled` property to the `Button`.
|
||||
|
||||
```css
|
||||
.site-button-ghost-wrapper {
|
||||
padding: 8px 8px 0 8px;
|
||||
background: rgb(190, 200, 200);
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,56 +1,65 @@
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { Button, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical">
|
||||
<Space>
|
||||
<Button type="primary">Primary</Button>
|
||||
<Button type="primary" disabled>
|
||||
Primary(disabled)
|
||||
</Button>
|
||||
<br />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button>Default</Button>
|
||||
<Button disabled>Default(disabled)</Button>
|
||||
<br />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button type="dashed">Dashed</Button>
|
||||
<Button type="dashed" disabled>
|
||||
Dashed(disabled)
|
||||
</Button>
|
||||
<br />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button type="text">Text</Button>
|
||||
<Button type="text" disabled>
|
||||
Text(disabled)
|
||||
</Button>
|
||||
<br />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button type="link">Link</Button>
|
||||
<Button type="link" disabled>
|
||||
Link(disabled)
|
||||
</Button>
|
||||
<br />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button danger>Danger Default</Button>
|
||||
<Button danger disabled>
|
||||
Danger Default(disabled)
|
||||
</Button>
|
||||
<br />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button danger type="text">
|
||||
Danger Text
|
||||
</Button>
|
||||
<Button danger type="text" disabled>
|
||||
Danger Text(disabled)
|
||||
</Button>
|
||||
<br />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button type="link" danger>
|
||||
Danger Link
|
||||
</Button>
|
||||
<Button type="link" danger disabled>
|
||||
Danger Link(disabled)
|
||||
</Button>
|
||||
<div className="site-button-ghost-wrapper">
|
||||
</Space>
|
||||
<Space className="site-button-ghost-wrapper">
|
||||
<Button ghost>Ghost</Button>
|
||||
<Button ghost disabled>
|
||||
Ghost(disabled)
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -5,10 +5,3 @@
|
||||
## en-US
|
||||
|
||||
`ghost` property will make button's background transparent, it is commonly used in colored background.
|
||||
|
||||
```css
|
||||
.site-button-ghost-wrapper {
|
||||
padding: 26px 16px 16px;
|
||||
background: rgb(190, 200, 200);
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { Button, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div className="site-button-ghost-wrapper">
|
||||
<Space className="site-button-ghost-wrapper" wrap>
|
||||
<Button type="primary" ghost>
|
||||
Primary
|
||||
</Button>
|
||||
@ -13,7 +13,7 @@ const App: React.FC = () => (
|
||||
<Button type="primary" danger ghost>
|
||||
Danger
|
||||
</Button>
|
||||
</div>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import React from 'react';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { Button, Tooltip } from 'antd';
|
||||
import { Button, Tooltip, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical">
|
||||
<Space wrap>
|
||||
<Tooltip title="search">
|
||||
<Button type="primary" shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
@ -17,7 +18,8 @@ const App: React.FC = () => (
|
||||
<Button shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button icon={<SearchOutlined />}>Search</Button>
|
||||
<br />
|
||||
</Space>
|
||||
<Space wrap>
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
@ -29,38 +31,8 @@ const App: React.FC = () => (
|
||||
Search
|
||||
</Button>
|
||||
<Button icon={<SearchOutlined />} href="https://www.google.com" />
|
||||
<br />
|
||||
<br />
|
||||
<Tooltip title="search">
|
||||
<Button type="primary" shape="circle" icon={<SearchOutlined />} size="large" />
|
||||
</Tooltip>
|
||||
<Button type="primary" shape="circle" size="large">
|
||||
A
|
||||
</Button>
|
||||
<Button type="primary" icon={<SearchOutlined />} size="large">
|
||||
Search
|
||||
</Button>
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<SearchOutlined />} size="large" />
|
||||
</Tooltip>
|
||||
<Button icon={<SearchOutlined />} size="large">
|
||||
Search
|
||||
</Button>
|
||||
<br />
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<SearchOutlined />} size="large" />
|
||||
</Tooltip>
|
||||
<Button icon={<SearchOutlined />} size="large">
|
||||
Search
|
||||
</Button>
|
||||
<Tooltip title="search">
|
||||
<Button type="dashed" shape="circle" icon={<SearchOutlined />} size="large" />
|
||||
</Tooltip>
|
||||
<Button type="dashed" icon={<SearchOutlined />} size="large">
|
||||
Search
|
||||
</Button>
|
||||
<Button icon={<SearchOutlined />} size="large" href="https://www.google.com" />
|
||||
</>
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -6,14 +6,14 @@ const App: React.FC = () => {
|
||||
const [loadings, setLoadings] = useState<boolean[]>([]);
|
||||
|
||||
const enterLoading = (index: number) => {
|
||||
setLoadings(prevLoadings => {
|
||||
setLoadings((prevLoadings) => {
|
||||
const newLoadings = [...prevLoadings];
|
||||
newLoadings[index] = true;
|
||||
return newLoadings;
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
setLoadings(prevLoadings => {
|
||||
setLoadings((prevLoadings) => {
|
||||
const newLoadings = [...prevLoadings];
|
||||
newLoadings[index] = false;
|
||||
return newLoadings;
|
||||
@ -22,8 +22,8 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Space style={{ width: '100%' }}>
|
||||
<Space direction="vertical">
|
||||
<Space wrap>
|
||||
<Button type="primary" loading>
|
||||
Loading
|
||||
</Button>
|
||||
@ -33,7 +33,7 @@ const App: React.FC = () => {
|
||||
<Button type="primary" icon={<PoweroffOutlined />} loading />
|
||||
</Space>
|
||||
|
||||
<Space style={{ width: '100%' }}>
|
||||
<Space wrap>
|
||||
<Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
|
||||
Click me!
|
||||
</Button>
|
||||
@ -52,7 +52,7 @@ const App: React.FC = () => {
|
||||
onClick={() => enterLoading(2)}
|
||||
/>
|
||||
</Space>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Button, Dropdown } from 'antd';
|
||||
import { Button, Dropdown, Space } from 'antd';
|
||||
|
||||
const onMenuClick: MenuProps['onClick'] = e => {
|
||||
const onMenuClick: MenuProps['onClick'] = (e) => {
|
||||
console.log('click', e);
|
||||
};
|
||||
|
||||
@ -22,11 +22,11 @@ const items = [
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical">
|
||||
<Button type="primary">primary</Button>
|
||||
<Button>secondary</Button>
|
||||
<Dropdown.Button menu={{ items, onClick: onMenuClick }}>Actions</Dropdown.Button>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,20 +1,23 @@
|
||||
import React, { useState } from 'react';
|
||||
import { DownloadOutlined } from '@ant-design/icons';
|
||||
import { Button, Radio } from 'antd';
|
||||
import { Button, Radio, Space, Divider } from 'antd';
|
||||
import type { SizeType } from 'antd/es/config-provider/SizeContext';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [size, setSize] = useState<SizeType>('large');
|
||||
const [size, setSize] = useState<SizeType>('large'); // default is 'middle'
|
||||
|
||||
return (
|
||||
<>
|
||||
<Radio.Group value={size} onChange={e => setSize(e.target.value)}>
|
||||
<Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
|
||||
<Radio.Button value="large">Large</Radio.Button>
|
||||
<Radio.Button value="default">Default</Radio.Button>
|
||||
<Radio.Button value="small">Small</Radio.Button>
|
||||
</Radio.Group>
|
||||
<br />
|
||||
<br />
|
||||
<Divider orientation="left" plain>
|
||||
Preview
|
||||
</Divider>
|
||||
<Space direction="vertical">
|
||||
<Space wrap>
|
||||
<Button type="primary" size={size}>
|
||||
Primary
|
||||
</Button>
|
||||
@ -22,11 +25,11 @@ const App: React.FC = () => {
|
||||
<Button type="dashed" size={size}>
|
||||
Dashed
|
||||
</Button>
|
||||
<br />
|
||||
</Space>
|
||||
<Button type="link" size={size}>
|
||||
Link
|
||||
</Button>
|
||||
<br />
|
||||
<Space wrap>
|
||||
<Button type="primary" icon={<DownloadOutlined />} size={size} />
|
||||
<Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
|
||||
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
|
||||
@ -36,6 +39,8 @@ const App: React.FC = () => {
|
||||
<Button type="primary" icon={<DownloadOutlined />} size={size}>
|
||||
Download
|
||||
</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -34,6 +34,7 @@ And 4 other properties additionally.
|
||||
|
||||
<code src="./demo/basic.tsx">Type</code>
|
||||
<code src="./demo/icon.tsx">Icon</code>
|
||||
<code src="./demo/debug-icon.tsx" debug>Debug Icon</code>
|
||||
<code src="./demo/size.tsx">Size</code>
|
||||
<code src="./demo/disabled.tsx">Disabled</code>
|
||||
<code src="./demo/loading.tsx">Loading</code>
|
||||
@ -75,14 +76,11 @@ Following the Ant Design specification, we will add one space between if Button
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="Button with two Chinese characters" />
|
||||
|
||||
<style>
|
||||
[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn-rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
.site-button-ghost-wrapper {
|
||||
padding: 16px;
|
||||
background: rgb(190, 200, 200);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .site-button-ghost-wrapper {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
@ -37,6 +37,7 @@ group:
|
||||
|
||||
<code src="./demo/basic.tsx">按钮类型</code>
|
||||
<code src="./demo/icon.tsx">图标按钮</code>
|
||||
<code src="./demo/debug-icon.tsx" debug>调试图标按钮</code>
|
||||
<code src="./demo/size.tsx">按钮尺寸</code>
|
||||
<code src="./demo/disabled.tsx">不可用状态</code>
|
||||
<code src="./demo/loading.tsx">加载中状态</code>
|
||||
@ -80,14 +81,11 @@ group:
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="移除两个汉字之间的空格" />
|
||||
|
||||
<style>
|
||||
[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn-rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
.site-button-ghost-wrapper {
|
||||
padding: 8px;
|
||||
background: rgb(190, 200, 200);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .site-button-ghost-wrapper {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user