ant-design/components/image/demo/component-token.tsx
GUAN MING 32cca6e5a8
feat: migrate less to token for Image (#42048)
* feat: migrate less to token for Image

* docs: update migrate-less-variables.en-US.md

* docs: update migrate-less-variables.zh-CN.md

* docs: fix error

* docs: fix typo

* docs: remove Chinese in English docs

* feat: migrate less to token for Image

* docs: update migrate-less-variables.en-US.md

* docs: remove Chinese in English docs

* docs: fix typo

* docs: fix docs error

* feat: add demo

* docs: Update docs/react/migrate-less-variables.zh-CN.md

Co-authored-by: MadCcc <1075746765@qq.com>

* fix: remove token

* docs: Update docs/react/migrate-less-variables.en-US.md

* fix: correct token name

* fix: demo token name

* docs: update global token in docs

* docs: update

* chore: fix lint

---------

Co-authored-by: MadCcc <1075746765@qq.com>
2023-06-02 15:48:18 +08:00

32 lines
788 B
TypeScript

import { ConfigProvider, Image } from 'antd';
import React from 'react';
const App: React.FC = () => (
<ConfigProvider
theme={{
components: {
Image: {
previewOperationSize: 20,
previewOperationColor: '#222',
previewOperationColorDisabled: '#b20000',
},
},
}}
>
<Image.PreviewGroup
preview={{ countRender: (current, total) => `当前 ${current} / 总计 ${total}` }}
>
<Image
width={150}
src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
/>
<Image
width={150}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</Image.PreviewGroup>
</ConfigProvider>
);
export default App;