mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 11:32:52 +08:00
docs: Alert demo remove Space comp (#49515)
This commit is contained in:
Wanpan
GitHub
parent
b0bc32c962
commit
3bdef4f4dc
@ -1,13 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders components/alert/demo/action.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-success"
|
||||
data-show="true"
|
||||
@ -79,11 +73,8 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 1`] =
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -135,11 +126,8 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 1`] =
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -200,11 +188,8 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 1`] =
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -282,9 +267,8 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 1`] =
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/action.tsx extend context correctly 2`] = `
|
||||
@ -294,13 +278,7 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 2`] =
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/banner.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -334,11 +312,8 @@ exports[`renders components/alert/demo/banner.tsx extend context correctly 1`] =
|
||||
Warning text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -398,11 +373,8 @@ exports[`renders components/alert/demo/banner.tsx extend context correctly 1`] =
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -417,11 +389,8 @@ exports[`renders components/alert/demo/banner.tsx extend context correctly 1`] =
|
||||
Warning text without icon
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -456,9 +425,8 @@ exports[`renders components/alert/demo/banner.tsx extend context correctly 1`] =
|
||||
Error text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/banner.tsx extend context correctly 2`] = `[]`;
|
||||
@ -484,13 +452,7 @@ exports[`renders components/alert/demo/basic.tsx extend context correctly 1`] =
|
||||
exports[`renders components/alert/demo/basic.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/alert/demo/closable.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -531,11 +493,8 @@ exports[`renders components/alert/demo/closable.tsx extend context correctly 1`]
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -581,11 +540,8 @@ exports[`renders components/alert/demo/closable.tsx extend context correctly 1`]
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -632,21 +588,14 @@ exports[`renders components/alert/demo/closable.tsx extend context correctly 1`]
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/closable.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/alert/demo/custom-icon.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -661,11 +610,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
|
||||
showIcon = false
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-success"
|
||||
data-show="true"
|
||||
@ -699,11 +645,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
|
||||
Success Tips
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-info"
|
||||
data-show="true"
|
||||
@ -737,11 +680,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
|
||||
Informational Notes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning"
|
||||
data-show="true"
|
||||
@ -775,11 +715,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
|
||||
Warning
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error"
|
||||
data-show="true"
|
||||
@ -813,11 +750,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
|
||||
Error
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -856,11 +790,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
|
||||
Detailed description and advices about successful copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -899,11 +830,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
|
||||
Additional description and informations about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -942,11 +870,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
|
||||
This is a warning notice about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -985,21 +910,14 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
|
||||
This is an error message about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/custom-icon.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/alert/demo/description.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1019,11 +937,8 @@ exports[`renders components/alert/demo/description.tsx extend context correctly
|
||||
Success Description Success Description Success Description
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1043,11 +958,8 @@ exports[`renders components/alert/demo/description.tsx extend context correctly
|
||||
Info Description Info Description Info Description Info Description
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1067,11 +979,8 @@ exports[`renders components/alert/demo/description.tsx extend context correctly
|
||||
Warning Description Warning Description Warning Description Warning Description
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1091,9 +1000,8 @@ exports[`renders components/alert/demo/description.tsx extend context correctly
|
||||
Error Description Error Description Error Description Error Description
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/description.tsx extend context correctly 2`] = `[]`;
|
||||
@ -1112,13 +1020,7 @@ exports[`renders components/alert/demo/error-boundary.tsx extend context correct
|
||||
exports[`renders components/alert/demo/error-boundary.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-success"
|
||||
data-show="true"
|
||||
@ -1152,11 +1054,8 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
|
||||
Success Tips
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-info"
|
||||
data-show="true"
|
||||
@ -1190,11 +1089,8 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
|
||||
Informational Notes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning"
|
||||
data-show="true"
|
||||
@ -1254,11 +1150,8 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error"
|
||||
data-show="true"
|
||||
@ -1293,11 +1186,8 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
|
||||
Error
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1336,11 +1226,8 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
|
||||
Detailed description and advice about successful copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1379,11 +1266,8 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
|
||||
Additional description and information about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1448,11 +1332,8 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1492,21 +1373,14 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
|
||||
This is an error message about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/icon.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/alert/demo/smooth-closed.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1547,18 +1421,10 @@ exports[`renders components/alert/demo/smooth-closed.tsx extend context correctl
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<p>
|
||||
click the close button to see the effect
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</p>,
|
||||
<button
|
||||
aria-checked="true"
|
||||
class="ant-switch ant-switch-checked ant-switch-disabled"
|
||||
@ -1579,21 +1445,14 @@ exports[`renders components/alert/demo/smooth-closed.tsx extend context correctl
|
||||
class="ant-switch-inner-unchecked"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/smooth-closed.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/alert/demo/style.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1608,11 +1467,8 @@ exports[`renders components/alert/demo/style.tsx extend context correctly 1`] =
|
||||
Success Text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1627,11 +1483,8 @@ exports[`renders components/alert/demo/style.tsx extend context correctly 1`] =
|
||||
Info Text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1646,11 +1499,8 @@ exports[`renders components/alert/demo/style.tsx extend context correctly 1`] =
|
||||
Warning Text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1665,9 +1515,8 @@ exports[`renders components/alert/demo/style.tsx extend context correctly 1`] =
|
||||
Error Text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/style.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
@ -1,13 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders components/alert/demo/action.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-success"
|
||||
data-show="true"
|
||||
@ -79,11 +73,8 @@ exports[`renders components/alert/demo/action.tsx correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -135,11 +126,8 @@ exports[`renders components/alert/demo/action.tsx correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -200,11 +188,8 @@ exports[`renders components/alert/demo/action.tsx correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -282,19 +267,12 @@ exports[`renders components/alert/demo/action.tsx correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/banner.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -328,11 +306,8 @@ exports[`renders components/alert/demo/banner.tsx correctly 1`] = `
|
||||
Warning text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -392,11 +367,8 @@ exports[`renders components/alert/demo/banner.tsx correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -411,11 +383,8 @@ exports[`renders components/alert/demo/banner.tsx correctly 1`] = `
|
||||
Warning text without icon
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-banner"
|
||||
data-show="true"
|
||||
@ -450,9 +419,8 @@ exports[`renders components/alert/demo/banner.tsx correctly 1`] = `
|
||||
Error text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/basic.tsx correctly 1`] = `
|
||||
@ -474,13 +442,7 @@ exports[`renders components/alert/demo/basic.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/closable.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -521,11 +483,8 @@ exports[`renders components/alert/demo/closable.tsx correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -571,11 +530,8 @@ exports[`renders components/alert/demo/closable.tsx correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -622,19 +578,12 @@ exports[`renders components/alert/demo/closable.tsx correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -649,11 +598,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
|
||||
showIcon = false
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-success"
|
||||
data-show="true"
|
||||
@ -687,11 +633,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
|
||||
Success Tips
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-info"
|
||||
data-show="true"
|
||||
@ -725,11 +668,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
|
||||
Informational Notes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning"
|
||||
data-show="true"
|
||||
@ -763,11 +703,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
|
||||
Warning
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error"
|
||||
data-show="true"
|
||||
@ -801,11 +738,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
|
||||
Error
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -844,11 +778,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
|
||||
Detailed description and advices about successful copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -887,11 +818,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
|
||||
Additional description and informations about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -930,11 +858,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
|
||||
This is a warning notice about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -973,19 +898,12 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
|
||||
This is an error message about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/description.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1005,11 +923,8 @@ exports[`renders components/alert/demo/description.tsx correctly 1`] = `
|
||||
Success Description Success Description Success Description
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1029,11 +944,8 @@ exports[`renders components/alert/demo/description.tsx correctly 1`] = `
|
||||
Info Description Info Description Info Description Info Description
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1053,11 +965,8 @@ exports[`renders components/alert/demo/description.tsx correctly 1`] = `
|
||||
Warning Description Warning Description Warning Description Warning Description
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1077,9 +986,8 @@ exports[`renders components/alert/demo/description.tsx correctly 1`] = `
|
||||
Error Description Error Description Error Description Error Description
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/error-boundary.tsx correctly 1`] = `
|
||||
@ -1094,13 +1002,7 @@ exports[`renders components/alert/demo/error-boundary.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-success"
|
||||
data-show="true"
|
||||
@ -1134,11 +1036,8 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
|
||||
Success Tips
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-info"
|
||||
data-show="true"
|
||||
@ -1172,11 +1071,8 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
|
||||
Informational Notes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning"
|
||||
data-show="true"
|
||||
@ -1236,11 +1132,8 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error"
|
||||
data-show="true"
|
||||
@ -1275,11 +1168,8 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
|
||||
Error
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1318,11 +1208,8 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
|
||||
Detailed description and advice about successful copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1361,11 +1248,8 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
|
||||
Additional description and information about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1430,11 +1314,8 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description"
|
||||
data-show="true"
|
||||
@ -1474,19 +1355,12 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
|
||||
This is an error message about copywriting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/smooth-closed.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1527,18 +1401,10 @@ exports[`renders components/alert/demo/smooth-closed.tsx correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<p>
|
||||
click the close button to see the effect
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</p>,
|
||||
<button
|
||||
aria-checked="true"
|
||||
class="ant-switch ant-switch-checked ant-switch-disabled"
|
||||
@ -1559,19 +1425,12 @@ exports[`renders components/alert/demo/smooth-closed.tsx correctly 1`] = `
|
||||
class="ant-switch-inner-unchecked"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/alert/demo/style.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1586,11 +1445,8 @@ exports[`renders components/alert/demo/style.tsx correctly 1`] = `
|
||||
Success Text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1605,11 +1461,8 @@ exports[`renders components/alert/demo/style.tsx correctly 1`] = `
|
||||
Info Text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1624,11 +1477,8 @@ exports[`renders components/alert/demo/style.tsx correctly 1`] = `
|
||||
Warning Text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-no-icon"
|
||||
data-show="true"
|
||||
@ -1643,7 +1493,6 @@ exports[`renders components/alert/demo/style.tsx correctly 1`] = `
|
||||
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"
|
||||
@ -14,6 +14,7 @@ const App: React.FC = () => (
|
||||
}
|
||||
closable
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Error Text"
|
||||
showIcon
|
||||
@ -25,6 +26,7 @@ const App: React.FC = () => (
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Warning Text"
|
||||
type="warning"
|
||||
@ -37,6 +39,7 @@ const App: React.FC = () => (
|
||||
}
|
||||
closable
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
@ -53,7 +56,7 @@ const App: React.FC = () => (
|
||||
}
|
||||
closable
|
||||
/>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
import React from 'react';
|
||||
import { Alert, Space } from 'antd';
|
||||
import { Alert } 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,19 +1,20 @@
|
||||
import React from 'react';
|
||||
import { CloseSquareFilled } from '@ant-design/icons';
|
||||
import { Alert, Space } from 'antd';
|
||||
import { Alert } 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"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description Error Description Error Description"
|
||||
@ -21,6 +22,7 @@ const App: React.FC = () => (
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description Error Description Error Description"
|
||||
@ -31,7 +33,7 @@ const App: React.FC = () => (
|
||||
}}
|
||||
onClose={onClose}
|
||||
/>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,16 +1,21 @@
|
||||
import React from 'react';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
import { Alert, Space } from 'antd';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const icon = <SmileOutlined />;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<>
|
||||
<Alert icon={icon} message="showIcon = false" type="success" />
|
||||
<br />
|
||||
<Alert icon={icon} message="Success Tips" type="success" showIcon />
|
||||
<br />
|
||||
<Alert icon={icon} message="Informational Notes" type="info" showIcon />
|
||||
<br />
|
||||
<Alert icon={icon} message="Warning" type="warning" showIcon />
|
||||
<br />
|
||||
<Alert icon={icon} message="Error" type="error" showIcon />
|
||||
<br />
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Success Tips"
|
||||
@ -18,6 +23,7 @@ const App: React.FC = () => (
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Informational Notes"
|
||||
@ -25,6 +31,7 @@ const App: React.FC = () => (
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Warning"
|
||||
@ -32,6 +39,7 @@ const App: React.FC = () => (
|
||||
type="warning"
|
||||
showIcon
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Error"
|
||||
@ -39,7 +47,7 @@ const App: React.FC = () => (
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,29 +1,32 @@
|
||||
import React from 'react';
|
||||
import { Alert, Space } from 'antd';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<>
|
||||
<Alert
|
||||
message="Success Text"
|
||||
description="Success Description Success Description Success Description"
|
||||
type="success"
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
type="info"
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Warning Text"
|
||||
description="Warning Description Warning Description Warning Description Warning Description"
|
||||
type="warning"
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
/>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,24 +1,30 @@
|
||||
import React from 'react';
|
||||
import { Alert, Space } from 'antd';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<>
|
||||
<Alert message="Success Tips" type="success" showIcon />
|
||||
<br />
|
||||
<Alert message="Informational Notes" type="info" showIcon />
|
||||
<br />
|
||||
<Alert message="Warning" type="warning" showIcon closable />
|
||||
<br />
|
||||
<Alert message="Error" type="error" showIcon />
|
||||
<br />
|
||||
<Alert
|
||||
message="Success Tips"
|
||||
description="Detailed description and advice about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Informational Notes"
|
||||
description="Additional description and information about copywriting."
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
@ -26,13 +32,14 @@ const App: React.FC = () => (
|
||||
showIcon
|
||||
closable
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Alert, Space, Switch } from 'antd';
|
||||
import { Alert, Switch } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [visible, setVisible] = useState(true);
|
||||
@ -9,13 +9,13 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<>
|
||||
{visible && (
|
||||
<Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
|
||||
)}
|
||||
<p>click the close button to see the effect</p>
|
||||
<Switch onChange={setVisible} checked={visible} disabled={visible} />
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
import React from 'react';
|
||||
import { Alert, Space } from 'antd';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<>
|
||||
<Alert message="Success Text" type="success" />
|
||||
<br />
|
||||
<Alert message="Info Text" type="info" />
|
||||
<br />
|
||||
<Alert message="Warning Text" type="warning" />
|
||||
<br />
|
||||
<Alert message="Error Text" type="error" />
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user