mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-18 03:14:07 +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', () => {
|
||||
const { container } = render(
|
||||
<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>,
|
||||
);
|
||||
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`] = `
|
||||
<div
|
||||
style="display: flex;"
|
||||
class="ant-flex ant-flex-gap-middle"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
@ -44,7 +44,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
</div>
|
||||
</article>
|
||||
<img
|
||||
alt="示例图片"
|
||||
alt="img"
|
||||
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
|
||||
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>
|
||||
<form
|
||||
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
|
||||
class="ant-form-item"
|
||||
@ -758,11 +758,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-baseline ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="display: flex;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
class="ant-flex ant-flex-gap-small"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -861,10 +857,6 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
@ -968,7 +960,6 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
style="margin-bottom: 0px;"
|
||||
@ -996,11 +987,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-baseline ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="display: flex;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
class="ant-flex ant-flex-gap-small"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -1098,10 +1085,6 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
@ -1204,7 +1187,6 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</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`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
class="ant-flex ant-flex-gap-middle"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Show in Modal
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Show in Drawer
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Not Show in Drawer
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class=""
|
||||
|
||||
@ -13,7 +13,7 @@ exports[`renders components/watermark/demo/basic.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
||||
<div
|
||||
style="display:flex"
|
||||
class="ant-flex ant-flex-gap-middle"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
@ -39,14 +39,14 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
||||
</div>
|
||||
</article>
|
||||
<img
|
||||
alt="示例图片"
|
||||
alt="img"
|
||||
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
|
||||
style="z-index:10;width:100%;max-width:800px;position:relative"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
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
|
||||
class="ant-form-item"
|
||||
@ -325,11 +325,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-baseline ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="display:flex"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
class="ant-flex ant-flex-gap-small"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -428,10 +424,6 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
@ -535,7 +527,6 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
style="margin-bottom:0"
|
||||
@ -563,11 +554,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-baseline ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="display:flex"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
class="ant-flex ant-flex-gap-small"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -665,10 +652,6 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
@ -771,7 +754,6 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
@ -801,44 +783,32 @@ exports[`renders components/watermark/demo/multi-line.tsx correctly 1`] = `
|
||||
exports[`renders components/watermark/demo/portal.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
class="ant-flex ant-flex-gap-middle"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Show in Modal
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Show in Drawer
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Not Show in Drawer
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class=""
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { ColorPicker, Form, Input, InputNumber, Slider, Space, Typography, Watermark } from 'antd';
|
||||
import type { ColorPickerProps, GetProp } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { ColorPicker, Flex, Form, Input, InputNumber, Slider, Typography, Watermark } from 'antd';
|
||||
import type { ColorPickerProps, GetProp, WatermarkProps } from 'antd';
|
||||
|
||||
type Color = GetProp<ColorPickerProps, 'color'>;
|
||||
|
||||
@ -29,23 +29,17 @@ const App: React.FC = () => {
|
||||
});
|
||||
const { content, color, fontSize, zIndex, rotate, gap, offset } = config;
|
||||
|
||||
const watermarkProps = useMemo(
|
||||
() => ({
|
||||
const watermarkProps: WatermarkProps = {
|
||||
content,
|
||||
font: {
|
||||
color: typeof color === 'string' ? color : color.toRgbString(),
|
||||
fontSize,
|
||||
},
|
||||
zIndex,
|
||||
rotate,
|
||||
gap,
|
||||
offset,
|
||||
}),
|
||||
[config],
|
||||
);
|
||||
font: { color: typeof color === 'string' ? color : color.toRgbString(), fontSize },
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Flex gap="middle">
|
||||
<Watermark {...watermarkProps}>
|
||||
<Typography>
|
||||
<Paragraph>
|
||||
@ -73,24 +67,13 @@ const App: React.FC = () => {
|
||||
</Paragraph>
|
||||
</Typography>
|
||||
<img
|
||||
style={{
|
||||
zIndex: 10,
|
||||
width: '100%',
|
||||
maxWidth: 800,
|
||||
position: 'relative',
|
||||
}}
|
||||
style={{ zIndex: 10, width: '100%', maxWidth: 800, position: 'relative' }}
|
||||
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
|
||||
alt="示例图片"
|
||||
alt="img"
|
||||
/>
|
||||
</Watermark>
|
||||
<Form
|
||||
style={{
|
||||
width: 280,
|
||||
flexShrink: 0,
|
||||
borderLeft: '1px solid #eee',
|
||||
paddingLeft: 20,
|
||||
marginLeft: 20,
|
||||
}}
|
||||
style={{ width: 280, flexShrink: 0, borderLeft: '1px solid #eee', paddingInlineStart: 16 }}
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={config}
|
||||
@ -114,27 +97,27 @@ const App: React.FC = () => {
|
||||
<Slider step={1} min={-180} max={180} />
|
||||
</Form.Item>
|
||||
<Form.Item label="Gap" style={{ marginBottom: 0 }}>
|
||||
<Space style={{ display: 'flex' }} align="baseline">
|
||||
<Flex gap="small">
|
||||
<Form.Item name={['gap', 0]}>
|
||||
<InputNumber placeholder="gapX" style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name={['gap', 1]}>
|
||||
<InputNumber placeholder="gapY" style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
</Flex>
|
||||
</Form.Item>
|
||||
<Form.Item label="Offset" style={{ marginBottom: 0 }}>
|
||||
<Space style={{ display: 'flex' }} align="baseline">
|
||||
<Flex gap="small">
|
||||
<Form.Item name={['offset', 0]}>
|
||||
<InputNumber placeholder="offsetLeft" style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name={['offset', 1]}>
|
||||
<InputNumber placeholder="offsetTop" style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
</Flex>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -4,4 +4,4 @@
|
||||
|
||||
## 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
|
||||
|
||||
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 { Button, Drawer, Modal, Space, Watermark } from 'antd';
|
||||
import { Button, Drawer, Flex, Modal, Watermark } from 'antd';
|
||||
|
||||
const placeholder = (
|
||||
<div
|
||||
style={{
|
||||
const style: React.CSSProperties = {
|
||||
height: 300,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
background: 'rgba(150, 150, 150, 0.2)',
|
||||
}}
|
||||
>
|
||||
A mock height
|
||||
</div>
|
||||
);
|
||||
backgroundColor: 'rgba(150, 150, 150, 0.2)',
|
||||
};
|
||||
|
||||
const placeholder = <div style={style}>A mock height</div>;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [showModal, setShowModal] = React.useState(false);
|
||||
@ -26,12 +22,17 @@ const App: React.FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Space>
|
||||
<Button onClick={() => setShowModal(true)}>Show in Modal</Button>
|
||||
<Button onClick={() => setShowDrawer(true)}>Show in Drawer</Button>
|
||||
<Button onClick={() => setShowDrawer2(true)}>Not Show in Drawer</Button>
|
||||
</Space>
|
||||
|
||||
<Flex gap="middle">
|
||||
<Button type="primary" onClick={() => setShowModal(true)}>
|
||||
Show in Modal
|
||||
</Button>
|
||||
<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">
|
||||
<Modal
|
||||
destroyOnClose
|
||||
|
||||
@ -8,7 +8,7 @@ demo:
|
||||
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
|
||||
|
||||
@ -28,6 +28,8 @@ Add specific text or patterns to the page.
|
||||
|
||||
Common props ref：[Common props](/docs/react/common-props)
|
||||
|
||||
> This component is available since `antd@5.0.0`.
|
||||
|
||||
### Watermark
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
|
||||
@ -10,7 +10,7 @@ demo:
|
||||
tag: New
|
||||
---
|
||||
|
||||
给页面的某个区域加上水印。
|
||||
给页面的某个区域加上水印。自 `5.0.0` 版本开始提供该组件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
@ -30,6 +30,8 @@ tag: New
|
||||
|
||||
通用属性参考：[通用属性](/docs/react/common-props)
|
||||
|
||||
> 自 `antd@5.0.0` 版本开始提供该组件。
|
||||
|
||||
### Watermark
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user