mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-18 11:18:14 +08:00
demo: update Watermark demo (#46899)
* feat: CP support Table expandIcon * revert * demo: update demo
This commit is contained in:
lijianan
GitHub
parent
9e5d3e350f
commit
c157a3f9ea
@ -958,7 +958,10 @@ describe('ConfigProvider support style and className props', () => {
|
|||||||
it('Should Table className & style works', () => {
|
it('Should Table className & style works', () => {
|
||||||
const { container } = render(
|
const { container } = render(
|
||||||
<ConfigProvider table={{ className: 'cp-table', style: { backgroundColor: 'blue' } }}>
|
<ConfigProvider table={{ className: 'cp-table', style: { backgroundColor: 'blue' } }}>
|
||||||
<Table dataSource={[]} />
|
<Table
|
||||||
|
columns={[{ title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: true }]}
|
||||||
|
dataSource={[{ key: '1', name: 'Jim Green', age: 40, address: 'test', tags: ['loser'] }]}
|
||||||
|
/>
|
||||||
</ConfigProvider>,
|
</ConfigProvider>,
|
||||||
);
|
);
|
||||||
const element = container.querySelector<HTMLDivElement>('.ant-table-wrapper');
|
const element = container.querySelector<HTMLDivElement>('.ant-table-wrapper');
|
||||||
|
|||||||
@ -18,7 +18,7 @@ exports[`renders components/watermark/demo/basic.tsx extend context correctly 2`
|
|||||||
|
|
||||||
exports[`renders components/watermark/demo/custom.tsx extend context correctly 1`] = `
|
exports[`renders components/watermark/demo/custom.tsx extend context correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
style="display: flex;"
|
class="ant-flex ant-flex-gap-middle"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class=""
|
class=""
|
||||||
@ -44,7 +44,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
|||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<img
|
<img
|
||||||
alt="示例图片"
|
alt="img"
|
||||||
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
|
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
|
||||||
style="z-index: 10; width: 100%; max-width: 800px; position: relative;"
|
style="z-index: 10; width: 100%; max-width: 800px; position: relative;"
|
||||||
/>
|
/>
|
||||||
@ -54,7 +54,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
|||||||
</div>
|
</div>
|
||||||
<form
|
<form
|
||||||
class="ant-form ant-form-vertical"
|
class="ant-form ant-form-vertical"
|
||||||
style="width: 280px; flex-shrink: 0; border-left: 1px solid #eee; padding-left: 20px; margin-left: 20px;"
|
style="width: 280px; flex-shrink: 0; border-left: 1px solid #eee; padding-inline-start: 16px;"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item"
|
class="ant-form-item"
|
||||||
@ -758,103 +758,98 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
|||||||
class="ant-form-item-control-input-content"
|
class="ant-form-item-control-input-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-space ant-space-horizontal ant-space-align-baseline ant-space-gap-row-small ant-space-gap-col-small"
|
class="ant-flex ant-flex-gap-small"
|
||||||
style="display: flex;"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
class="ant-form-item"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-row ant-form-item-row"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-form-item-control"
|
class="ant-form-item-control-input"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input-content"
|
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
||||||
|
style="width: 100%;"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
class="ant-input-number-handler-wrap"
|
||||||
style="width: 100%;"
|
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="ant-input-number-handler-wrap"
|
aria-disabled="false"
|
||||||
|
aria-label="Increase Value"
|
||||||
|
class="ant-input-number-handler ant-input-number-handler-up"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-disabled="false"
|
aria-label="up"
|
||||||
aria-label="Increase Value"
|
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||||
class="ant-input-number-handler ant-input-number-handler-up"
|
role="img"
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="up"
|
aria-hidden="true"
|
||||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
data-icon="up"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||||
data-icon="up"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
</span>
|
||||||
aria-disabled="false"
|
<span
|
||||||
aria-label="Decrease Value"
|
aria-disabled="false"
|
||||||
class="ant-input-number-handler ant-input-number-handler-down"
|
aria-label="Decrease Value"
|
||||||
role="button"
|
class="ant-input-number-handler ant-input-number-handler-down"
|
||||||
unselectable="on"
|
role="button"
|
||||||
>
|
unselectable="on"
|
||||||
<span
|
|
||||||
aria-label="down"
|
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="down"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-input-number-input-wrap"
|
|
||||||
>
|
>
|
||||||
<input
|
<span
|
||||||
aria-valuenow="100"
|
aria-label="down"
|
||||||
autocomplete="off"
|
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||||
class="ant-input-number-input"
|
role="img"
|
||||||
id="gap_0"
|
>
|
||||||
placeholder="gapX"
|
<svg
|
||||||
role="spinbutton"
|
aria-hidden="true"
|
||||||
step="1"
|
data-icon="down"
|
||||||
value="100"
|
fill="currentColor"
|
||||||
/>
|
focusable="false"
|
||||||
</div>
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-input-number-input-wrap"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-valuenow="100"
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-input-number-input"
|
||||||
|
id="gap_0"
|
||||||
|
placeholder="gapX"
|
||||||
|
role="spinbutton"
|
||||||
|
step="1"
|
||||||
|
value="100"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -863,99 +858,95 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
class="ant-form-item"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-row ant-form-item-row"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-form-item-control"
|
class="ant-form-item-control-input"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input-content"
|
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
||||||
|
style="width: 100%;"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
class="ant-input-number-handler-wrap"
|
||||||
style="width: 100%;"
|
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="ant-input-number-handler-wrap"
|
aria-disabled="false"
|
||||||
|
aria-label="Increase Value"
|
||||||
|
class="ant-input-number-handler ant-input-number-handler-up"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-disabled="false"
|
aria-label="up"
|
||||||
aria-label="Increase Value"
|
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||||
class="ant-input-number-handler ant-input-number-handler-up"
|
role="img"
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="up"
|
aria-hidden="true"
|
||||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
data-icon="up"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||||
data-icon="up"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
</span>
|
||||||
aria-disabled="false"
|
<span
|
||||||
aria-label="Decrease Value"
|
aria-disabled="false"
|
||||||
class="ant-input-number-handler ant-input-number-handler-down"
|
aria-label="Decrease Value"
|
||||||
role="button"
|
class="ant-input-number-handler ant-input-number-handler-down"
|
||||||
unselectable="on"
|
role="button"
|
||||||
>
|
unselectable="on"
|
||||||
<span
|
|
||||||
aria-label="down"
|
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="down"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-input-number-input-wrap"
|
|
||||||
>
|
>
|
||||||
<input
|
<span
|
||||||
aria-valuenow="100"
|
aria-label="down"
|
||||||
autocomplete="off"
|
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||||
class="ant-input-number-input"
|
role="img"
|
||||||
id="gap_1"
|
>
|
||||||
placeholder="gapY"
|
<svg
|
||||||
role="spinbutton"
|
aria-hidden="true"
|
||||||
step="1"
|
data-icon="down"
|
||||||
value="100"
|
fill="currentColor"
|
||||||
/>
|
focusable="false"
|
||||||
</div>
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-input-number-input-wrap"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-valuenow="100"
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-input-number-input"
|
||||||
|
id="gap_1"
|
||||||
|
placeholder="gapY"
|
||||||
|
role="spinbutton"
|
||||||
|
step="1"
|
||||||
|
value="100"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -996,102 +987,97 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
|||||||
class="ant-form-item-control-input-content"
|
class="ant-form-item-control-input-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-space ant-space-horizontal ant-space-align-baseline ant-space-gap-row-small ant-space-gap-col-small"
|
class="ant-flex ant-flex-gap-small"
|
||||||
style="display: flex;"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
class="ant-form-item"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-row ant-form-item-row"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-form-item-control"
|
class="ant-form-item-control-input"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input-content"
|
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
||||||
|
style="width: 100%;"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
class="ant-input-number-handler-wrap"
|
||||||
style="width: 100%;"
|
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="ant-input-number-handler-wrap"
|
aria-disabled="false"
|
||||||
|
aria-label="Increase Value"
|
||||||
|
class="ant-input-number-handler ant-input-number-handler-up"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-disabled="false"
|
aria-label="up"
|
||||||
aria-label="Increase Value"
|
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||||
class="ant-input-number-handler ant-input-number-handler-up"
|
role="img"
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="up"
|
aria-hidden="true"
|
||||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
data-icon="up"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||||
data-icon="up"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
</span>
|
||||||
aria-disabled="false"
|
<span
|
||||||
aria-label="Decrease Value"
|
aria-disabled="false"
|
||||||
class="ant-input-number-handler ant-input-number-handler-down"
|
aria-label="Decrease Value"
|
||||||
role="button"
|
class="ant-input-number-handler ant-input-number-handler-down"
|
||||||
unselectable="on"
|
role="button"
|
||||||
>
|
unselectable="on"
|
||||||
<span
|
|
||||||
aria-label="down"
|
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="down"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-input-number-input-wrap"
|
|
||||||
>
|
>
|
||||||
<input
|
<span
|
||||||
autocomplete="off"
|
aria-label="down"
|
||||||
class="ant-input-number-input"
|
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||||
id="offset_0"
|
role="img"
|
||||||
placeholder="offsetLeft"
|
>
|
||||||
role="spinbutton"
|
<svg
|
||||||
step="1"
|
aria-hidden="true"
|
||||||
value=""
|
data-icon="down"
|
||||||
/>
|
fill="currentColor"
|
||||||
</div>
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-input-number-input-wrap"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-input-number-input"
|
||||||
|
id="offset_0"
|
||||||
|
placeholder="offsetLeft"
|
||||||
|
role="spinbutton"
|
||||||
|
step="1"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1100,98 +1086,94 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
class="ant-form-item"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-row ant-form-item-row"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-form-item-control"
|
class="ant-form-item-control-input"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input-content"
|
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
||||||
|
style="width: 100%;"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
class="ant-input-number-handler-wrap"
|
||||||
style="width: 100%;"
|
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="ant-input-number-handler-wrap"
|
aria-disabled="false"
|
||||||
|
aria-label="Increase Value"
|
||||||
|
class="ant-input-number-handler ant-input-number-handler-up"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-disabled="false"
|
aria-label="up"
|
||||||
aria-label="Increase Value"
|
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||||
class="ant-input-number-handler ant-input-number-handler-up"
|
role="img"
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="up"
|
aria-hidden="true"
|
||||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
data-icon="up"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||||
data-icon="up"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
</span>
|
||||||
aria-disabled="false"
|
<span
|
||||||
aria-label="Decrease Value"
|
aria-disabled="false"
|
||||||
class="ant-input-number-handler ant-input-number-handler-down"
|
aria-label="Decrease Value"
|
||||||
role="button"
|
class="ant-input-number-handler ant-input-number-handler-down"
|
||||||
unselectable="on"
|
role="button"
|
||||||
>
|
unselectable="on"
|
||||||
<span
|
|
||||||
aria-label="down"
|
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="down"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-input-number-input-wrap"
|
|
||||||
>
|
>
|
||||||
<input
|
<span
|
||||||
autocomplete="off"
|
aria-label="down"
|
||||||
class="ant-input-number-input"
|
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||||
id="offset_1"
|
role="img"
|
||||||
placeholder="offsetTop"
|
>
|
||||||
role="spinbutton"
|
<svg
|
||||||
step="1"
|
aria-hidden="true"
|
||||||
value=""
|
data-icon="down"
|
||||||
/>
|
fill="currentColor"
|
||||||
</div>
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-input-number-input-wrap"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-input-number-input"
|
||||||
|
id="offset_1"
|
||||||
|
placeholder="offsetTop"
|
||||||
|
role="spinbutton"
|
||||||
|
step="1"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1243,44 +1225,32 @@ exports[`renders components/watermark/demo/multi-line.tsx extend context correct
|
|||||||
exports[`renders components/watermark/demo/portal.tsx extend context correctly 1`] = `
|
exports[`renders components/watermark/demo/portal.tsx extend context correctly 1`] = `
|
||||||
Array [
|
Array [
|
||||||
<div
|
<div
|
||||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
class="ant-flex ant-flex-gap-middle"
|
||||||
>
|
>
|
||||||
<div
|
<button
|
||||||
class="ant-space-item"
|
class="ant-btn ant-btn-primary"
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
<button
|
<span>
|
||||||
class="ant-btn ant-btn-default"
|
Show in Modal
|
||||||
type="button"
|
</span>
|
||||||
>
|
</button>
|
||||||
<span>
|
<button
|
||||||
Show in Modal
|
class="ant-btn ant-btn-primary"
|
||||||
</span>
|
type="button"
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
>
|
>
|
||||||
<button
|
<span>
|
||||||
class="ant-btn ant-btn-default"
|
Show in Drawer
|
||||||
type="button"
|
</span>
|
||||||
>
|
</button>
|
||||||
<span>
|
<button
|
||||||
Show in Drawer
|
class="ant-btn ant-btn-primary"
|
||||||
</span>
|
type="button"
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
>
|
>
|
||||||
<button
|
<span>
|
||||||
class="ant-btn ant-btn-default"
|
Not Show in Drawer
|
||||||
type="button"
|
</span>
|
||||||
>
|
</button>
|
||||||
<span>
|
|
||||||
Not Show in Drawer
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>,
|
</div>,
|
||||||
<div
|
<div
|
||||||
class=""
|
class=""
|
||||||
|
|||||||
@ -13,7 +13,7 @@ exports[`renders components/watermark/demo/basic.tsx correctly 1`] = `
|
|||||||
|
|
||||||
exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
style="display:flex"
|
class="ant-flex ant-flex-gap-middle"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class=""
|
class=""
|
||||||
@ -39,14 +39,14 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<img
|
<img
|
||||||
alt="示例图片"
|
alt="img"
|
||||||
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
|
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
|
||||||
style="z-index:10;width:100%;max-width:800px;position:relative"
|
style="z-index:10;width:100%;max-width:800px;position:relative"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<form
|
<form
|
||||||
class="ant-form ant-form-vertical"
|
class="ant-form ant-form-vertical"
|
||||||
style="width:280px;flex-shrink:0;border-left:1px solid #eee;padding-left:20px;margin-left:20px"
|
style="width:280px;flex-shrink:0;border-left:1px solid #eee;padding-inline-start:16px"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item"
|
class="ant-form-item"
|
||||||
@ -325,103 +325,98 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
|||||||
class="ant-form-item-control-input-content"
|
class="ant-form-item-control-input-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-space ant-space-horizontal ant-space-align-baseline ant-space-gap-row-small ant-space-gap-col-small"
|
class="ant-flex ant-flex-gap-small"
|
||||||
style="display:flex"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
class="ant-form-item"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-row ant-form-item-row"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-form-item-control"
|
class="ant-form-item-control-input"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input-content"
|
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
||||||
|
style="width:100%"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
class="ant-input-number-handler-wrap"
|
||||||
style="width:100%"
|
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="ant-input-number-handler-wrap"
|
aria-disabled="false"
|
||||||
|
aria-label="Increase Value"
|
||||||
|
class="ant-input-number-handler ant-input-number-handler-up"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-disabled="false"
|
aria-label="up"
|
||||||
aria-label="Increase Value"
|
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||||
class="ant-input-number-handler ant-input-number-handler-up"
|
role="img"
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="up"
|
aria-hidden="true"
|
||||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
data-icon="up"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||||
data-icon="up"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
</span>
|
||||||
aria-disabled="false"
|
<span
|
||||||
aria-label="Decrease Value"
|
aria-disabled="false"
|
||||||
class="ant-input-number-handler ant-input-number-handler-down"
|
aria-label="Decrease Value"
|
||||||
role="button"
|
class="ant-input-number-handler ant-input-number-handler-down"
|
||||||
unselectable="on"
|
role="button"
|
||||||
>
|
unselectable="on"
|
||||||
<span
|
|
||||||
aria-label="down"
|
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="down"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-input-number-input-wrap"
|
|
||||||
>
|
>
|
||||||
<input
|
<span
|
||||||
aria-valuenow="100"
|
aria-label="down"
|
||||||
autocomplete="off"
|
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||||
class="ant-input-number-input"
|
role="img"
|
||||||
id="gap_0"
|
>
|
||||||
placeholder="gapX"
|
<svg
|
||||||
role="spinbutton"
|
aria-hidden="true"
|
||||||
step="1"
|
data-icon="down"
|
||||||
value="100"
|
fill="currentColor"
|
||||||
/>
|
focusable="false"
|
||||||
</div>
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-input-number-input-wrap"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-valuenow="100"
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-input-number-input"
|
||||||
|
id="gap_0"
|
||||||
|
placeholder="gapX"
|
||||||
|
role="spinbutton"
|
||||||
|
step="1"
|
||||||
|
value="100"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -430,99 +425,95 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
class="ant-form-item"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-row ant-form-item-row"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-form-item-control"
|
class="ant-form-item-control-input"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input-content"
|
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
||||||
|
style="width:100%"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
class="ant-input-number-handler-wrap"
|
||||||
style="width:100%"
|
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="ant-input-number-handler-wrap"
|
aria-disabled="false"
|
||||||
|
aria-label="Increase Value"
|
||||||
|
class="ant-input-number-handler ant-input-number-handler-up"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-disabled="false"
|
aria-label="up"
|
||||||
aria-label="Increase Value"
|
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||||
class="ant-input-number-handler ant-input-number-handler-up"
|
role="img"
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="up"
|
aria-hidden="true"
|
||||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
data-icon="up"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||||
data-icon="up"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
</span>
|
||||||
aria-disabled="false"
|
<span
|
||||||
aria-label="Decrease Value"
|
aria-disabled="false"
|
||||||
class="ant-input-number-handler ant-input-number-handler-down"
|
aria-label="Decrease Value"
|
||||||
role="button"
|
class="ant-input-number-handler ant-input-number-handler-down"
|
||||||
unselectable="on"
|
role="button"
|
||||||
>
|
unselectable="on"
|
||||||
<span
|
|
||||||
aria-label="down"
|
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="down"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-input-number-input-wrap"
|
|
||||||
>
|
>
|
||||||
<input
|
<span
|
||||||
aria-valuenow="100"
|
aria-label="down"
|
||||||
autocomplete="off"
|
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||||
class="ant-input-number-input"
|
role="img"
|
||||||
id="gap_1"
|
>
|
||||||
placeholder="gapY"
|
<svg
|
||||||
role="spinbutton"
|
aria-hidden="true"
|
||||||
step="1"
|
data-icon="down"
|
||||||
value="100"
|
fill="currentColor"
|
||||||
/>
|
focusable="false"
|
||||||
</div>
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-input-number-input-wrap"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-valuenow="100"
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-input-number-input"
|
||||||
|
id="gap_1"
|
||||||
|
placeholder="gapY"
|
||||||
|
role="spinbutton"
|
||||||
|
step="1"
|
||||||
|
value="100"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -563,102 +554,97 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
|||||||
class="ant-form-item-control-input-content"
|
class="ant-form-item-control-input-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-space ant-space-horizontal ant-space-align-baseline ant-space-gap-row-small ant-space-gap-col-small"
|
class="ant-flex ant-flex-gap-small"
|
||||||
style="display:flex"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
class="ant-form-item"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-row ant-form-item-row"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-form-item-control"
|
class="ant-form-item-control-input"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input-content"
|
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
||||||
|
style="width:100%"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
class="ant-input-number-handler-wrap"
|
||||||
style="width:100%"
|
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="ant-input-number-handler-wrap"
|
aria-disabled="false"
|
||||||
|
aria-label="Increase Value"
|
||||||
|
class="ant-input-number-handler ant-input-number-handler-up"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-disabled="false"
|
aria-label="up"
|
||||||
aria-label="Increase Value"
|
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||||
class="ant-input-number-handler ant-input-number-handler-up"
|
role="img"
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="up"
|
aria-hidden="true"
|
||||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
data-icon="up"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||||
data-icon="up"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
</span>
|
||||||
aria-disabled="false"
|
<span
|
||||||
aria-label="Decrease Value"
|
aria-disabled="false"
|
||||||
class="ant-input-number-handler ant-input-number-handler-down"
|
aria-label="Decrease Value"
|
||||||
role="button"
|
class="ant-input-number-handler ant-input-number-handler-down"
|
||||||
unselectable="on"
|
role="button"
|
||||||
>
|
unselectable="on"
|
||||||
<span
|
|
||||||
aria-label="down"
|
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="down"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-input-number-input-wrap"
|
|
||||||
>
|
>
|
||||||
<input
|
<span
|
||||||
autocomplete="off"
|
aria-label="down"
|
||||||
class="ant-input-number-input"
|
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||||
id="offset_0"
|
role="img"
|
||||||
placeholder="offsetLeft"
|
>
|
||||||
role="spinbutton"
|
<svg
|
||||||
step="1"
|
aria-hidden="true"
|
||||||
value=""
|
data-icon="down"
|
||||||
/>
|
fill="currentColor"
|
||||||
</div>
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-input-number-input-wrap"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-input-number-input"
|
||||||
|
id="offset_0"
|
||||||
|
placeholder="offsetLeft"
|
||||||
|
role="spinbutton"
|
||||||
|
step="1"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -667,98 +653,94 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
class="ant-form-item"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-row ant-form-item-row"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-form-item-control"
|
class="ant-form-item-control-input"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input-content"
|
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
||||||
|
style="width:100%"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined"
|
class="ant-input-number-handler-wrap"
|
||||||
style="width:100%"
|
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="ant-input-number-handler-wrap"
|
aria-disabled="false"
|
||||||
|
aria-label="Increase Value"
|
||||||
|
class="ant-input-number-handler ant-input-number-handler-up"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-disabled="false"
|
aria-label="up"
|
||||||
aria-label="Increase Value"
|
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||||
class="ant-input-number-handler ant-input-number-handler-up"
|
role="img"
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="up"
|
aria-hidden="true"
|
||||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
data-icon="up"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||||
data-icon="up"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
</span>
|
||||||
aria-disabled="false"
|
<span
|
||||||
aria-label="Decrease Value"
|
aria-disabled="false"
|
||||||
class="ant-input-number-handler ant-input-number-handler-down"
|
aria-label="Decrease Value"
|
||||||
role="button"
|
class="ant-input-number-handler ant-input-number-handler-down"
|
||||||
unselectable="on"
|
role="button"
|
||||||
>
|
unselectable="on"
|
||||||
<span
|
|
||||||
aria-label="down"
|
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="down"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-input-number-input-wrap"
|
|
||||||
>
|
>
|
||||||
<input
|
<span
|
||||||
autocomplete="off"
|
aria-label="down"
|
||||||
class="ant-input-number-input"
|
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||||
id="offset_1"
|
role="img"
|
||||||
placeholder="offsetTop"
|
>
|
||||||
role="spinbutton"
|
<svg
|
||||||
step="1"
|
aria-hidden="true"
|
||||||
value=""
|
data-icon="down"
|
||||||
/>
|
fill="currentColor"
|
||||||
</div>
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-input-number-input-wrap"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-input-number-input"
|
||||||
|
id="offset_1"
|
||||||
|
placeholder="offsetTop"
|
||||||
|
role="spinbutton"
|
||||||
|
step="1"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -801,44 +783,32 @@ exports[`renders components/watermark/demo/multi-line.tsx correctly 1`] = `
|
|||||||
exports[`renders components/watermark/demo/portal.tsx correctly 1`] = `
|
exports[`renders components/watermark/demo/portal.tsx correctly 1`] = `
|
||||||
Array [
|
Array [
|
||||||
<div
|
<div
|
||||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
class="ant-flex ant-flex-gap-middle"
|
||||||
>
|
>
|
||||||
<div
|
<button
|
||||||
class="ant-space-item"
|
class="ant-btn ant-btn-primary"
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
<button
|
<span>
|
||||||
class="ant-btn ant-btn-default"
|
Show in Modal
|
||||||
type="button"
|
</span>
|
||||||
>
|
</button>
|
||||||
<span>
|
<button
|
||||||
Show in Modal
|
class="ant-btn ant-btn-primary"
|
||||||
</span>
|
type="button"
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
>
|
>
|
||||||
<button
|
<span>
|
||||||
class="ant-btn ant-btn-default"
|
Show in Drawer
|
||||||
type="button"
|
</span>
|
||||||
>
|
</button>
|
||||||
<span>
|
<button
|
||||||
Show in Drawer
|
class="ant-btn ant-btn-primary"
|
||||||
</span>
|
type="button"
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
>
|
>
|
||||||
<button
|
<span>
|
||||||
class="ant-btn ant-btn-default"
|
Not Show in Drawer
|
||||||
type="button"
|
</span>
|
||||||
>
|
</button>
|
||||||
<span>
|
|
||||||
Not Show in Drawer
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>,
|
</div>,
|
||||||
<div
|
<div
|
||||||
class=""
|
class=""
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { useMemo, useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { ColorPicker, Form, Input, InputNumber, Slider, Space, Typography, Watermark } from 'antd';
|
import { ColorPicker, Flex, Form, Input, InputNumber, Slider, Typography, Watermark } from 'antd';
|
||||||
import type { ColorPickerProps, GetProp } from 'antd';
|
import type { ColorPickerProps, GetProp, WatermarkProps } from 'antd';
|
||||||
|
|
||||||
type Color = GetProp<ColorPickerProps, 'color'>;
|
type Color = GetProp<ColorPickerProps, 'color'>;
|
||||||
|
|
||||||
@ -29,23 +29,17 @@ const App: React.FC = () => {
|
|||||||
});
|
});
|
||||||
const { content, color, fontSize, zIndex, rotate, gap, offset } = config;
|
const { content, color, fontSize, zIndex, rotate, gap, offset } = config;
|
||||||
|
|
||||||
const watermarkProps = useMemo(
|
const watermarkProps: WatermarkProps = {
|
||||||
() => ({
|
content,
|
||||||
content,
|
zIndex,
|
||||||
font: {
|
rotate,
|
||||||
color: typeof color === 'string' ? color : color.toRgbString(),
|
gap,
|
||||||
fontSize,
|
offset,
|
||||||
},
|
font: { color: typeof color === 'string' ? color : color.toRgbString(), fontSize },
|
||||||
zIndex,
|
};
|
||||||
rotate,
|
|
||||||
gap,
|
|
||||||
offset,
|
|
||||||
}),
|
|
||||||
[config],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ display: 'flex' }}>
|
<Flex gap="middle">
|
||||||
<Watermark {...watermarkProps}>
|
<Watermark {...watermarkProps}>
|
||||||
<Typography>
|
<Typography>
|
||||||
<Paragraph>
|
<Paragraph>
|
||||||
@ -73,24 +67,13 @@ const App: React.FC = () => {
|
|||||||
</Paragraph>
|
</Paragraph>
|
||||||
</Typography>
|
</Typography>
|
||||||
<img
|
<img
|
||||||
style={{
|
style={{ zIndex: 10, width: '100%', maxWidth: 800, position: 'relative' }}
|
||||||
zIndex: 10,
|
|
||||||
width: '100%',
|
|
||||||
maxWidth: 800,
|
|
||||||
position: 'relative',
|
|
||||||
}}
|
|
||||||
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
|
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
|
||||||
alt="示例图片"
|
alt="img"
|
||||||
/>
|
/>
|
||||||
</Watermark>
|
</Watermark>
|
||||||
<Form
|
<Form
|
||||||
style={{
|
style={{ width: 280, flexShrink: 0, borderLeft: '1px solid #eee', paddingInlineStart: 16 }}
|
||||||
width: 280,
|
|
||||||
flexShrink: 0,
|
|
||||||
borderLeft: '1px solid #eee',
|
|
||||||
paddingLeft: 20,
|
|
||||||
marginLeft: 20,
|
|
||||||
}}
|
|
||||||
form={form}
|
form={form}
|
||||||
layout="vertical"
|
layout="vertical"
|
||||||
initialValues={config}
|
initialValues={config}
|
||||||
@ -114,27 +97,27 @@ const App: React.FC = () => {
|
|||||||
<Slider step={1} min={-180} max={180} />
|
<Slider step={1} min={-180} max={180} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="Gap" style={{ marginBottom: 0 }}>
|
<Form.Item label="Gap" style={{ marginBottom: 0 }}>
|
||||||
<Space style={{ display: 'flex' }} align="baseline">
|
<Flex gap="small">
|
||||||
<Form.Item name={['gap', 0]}>
|
<Form.Item name={['gap', 0]}>
|
||||||
<InputNumber placeholder="gapX" style={{ width: '100%' }} />
|
<InputNumber placeholder="gapX" style={{ width: '100%' }} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item name={['gap', 1]}>
|
<Form.Item name={['gap', 1]}>
|
||||||
<InputNumber placeholder="gapY" style={{ width: '100%' }} />
|
<InputNumber placeholder="gapY" style={{ width: '100%' }} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Space>
|
</Flex>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="Offset" style={{ marginBottom: 0 }}>
|
<Form.Item label="Offset" style={{ marginBottom: 0 }}>
|
||||||
<Space style={{ display: 'flex' }} align="baseline">
|
<Flex gap="small">
|
||||||
<Form.Item name={['offset', 0]}>
|
<Form.Item name={['offset', 0]}>
|
||||||
<InputNumber placeholder="offsetLeft" style={{ width: '100%' }} />
|
<InputNumber placeholder="offsetLeft" style={{ width: '100%' }} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item name={['offset', 1]}>
|
<Form.Item name={['offset', 1]}>
|
||||||
<InputNumber placeholder="offsetTop" style={{ width: '100%' }} />
|
<InputNumber placeholder="offsetTop" style={{ width: '100%' }} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Space>
|
</Flex>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</Flex>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -4,4 +4,4 @@
|
|||||||
|
|
||||||
## en-US
|
## en-US
|
||||||
|
|
||||||
Specify the image address via 'image'. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.
|
Specify the image address via `image`. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.
|
||||||
|
|||||||
@ -4,4 +4,4 @@
|
|||||||
|
|
||||||
## en-US
|
## en-US
|
||||||
|
|
||||||
Use 'content' to set a string array to specify multi-line text watermark content.
|
Use `content` to set a string array to specify multi-line text watermark content.
|
||||||
|
|||||||
@ -1,19 +1,15 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Button, Drawer, Modal, Space, Watermark } from 'antd';
|
import { Button, Drawer, Flex, Modal, Watermark } from 'antd';
|
||||||
|
|
||||||
const placeholder = (
|
const style: React.CSSProperties = {
|
||||||
<div
|
height: 300,
|
||||||
style={{
|
display: 'flex',
|
||||||
height: 300,
|
justifyContent: 'center',
|
||||||
display: 'flex',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
backgroundColor: 'rgba(150, 150, 150, 0.2)',
|
||||||
alignItems: 'center',
|
};
|
||||||
background: 'rgba(150, 150, 150, 0.2)',
|
|
||||||
}}
|
const placeholder = <div style={style}>A mock height</div>;
|
||||||
>
|
|
||||||
A mock height
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const App: React.FC = () => {
|
const App: React.FC = () => {
|
||||||
const [showModal, setShowModal] = React.useState(false);
|
const [showModal, setShowModal] = React.useState(false);
|
||||||
@ -26,12 +22,17 @@ const App: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Space>
|
<Flex gap="middle">
|
||||||
<Button onClick={() => setShowModal(true)}>Show in Modal</Button>
|
<Button type="primary" onClick={() => setShowModal(true)}>
|
||||||
<Button onClick={() => setShowDrawer(true)}>Show in Drawer</Button>
|
Show in Modal
|
||||||
<Button onClick={() => setShowDrawer2(true)}>Not Show in Drawer</Button>
|
</Button>
|
||||||
</Space>
|
<Button type="primary" onClick={() => setShowDrawer(true)}>
|
||||||
|
Show in Drawer
|
||||||
|
</Button>
|
||||||
|
<Button type="primary" onClick={() => setShowDrawer2(true)}>
|
||||||
|
Not Show in Drawer
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
<Watermark content="Ant Design">
|
<Watermark content="Ant Design">
|
||||||
<Modal
|
<Modal
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
|
|||||||
@ -8,7 +8,7 @@ demo:
|
|||||||
cols: 1
|
cols: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
Add specific text or patterns to the page.
|
Add specific text or patterns to the page. Available since `5.0.0`.
|
||||||
|
|
||||||
## When To Use
|
## When To Use
|
||||||
|
|
||||||
@ -28,6 +28,8 @@ Add specific text or patterns to the page.
|
|||||||
|
|
||||||
Common props ref：[Common props](/docs/react/common-props)
|
Common props ref：[Common props](/docs/react/common-props)
|
||||||
|
|
||||||
|
> This component is available since `antd@5.0.0`.
|
||||||
|
|
||||||
### Watermark
|
### Watermark
|
||||||
|
|
||||||
| Property | Description | Type | Default | Version |
|
| Property | Description | Type | Default | Version |
|
||||||
|
|||||||
@ -10,7 +10,7 @@ demo:
|
|||||||
tag: New
|
tag: New
|
||||||
---
|
---
|
||||||
|
|
||||||
给页面的某个区域加上水印。
|
给页面的某个区域加上水印。自 `5.0.0` 版本开始提供该组件。
|
||||||
|
|
||||||
## 何时使用
|
## 何时使用
|
||||||
|
|
||||||
@ -30,6 +30,8 @@ tag: New
|
|||||||
|
|
||||||
通用属性参考：[通用属性](/docs/react/common-props)
|
通用属性参考：[通用属性](/docs/react/common-props)
|
||||||
|
|
||||||
|
> 自 `antd@5.0.0` 版本开始提供该组件。
|
||||||
|
|
||||||
### Watermark
|
### Watermark
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user