mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-04 00:49:39 +08:00
demo: update demo (#39576)
This commit is contained in:
lijianan
GitHub
parent
dd03795c52
commit
33f81aa01d
@ -691,68 +691,134 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/group-menu.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-circle"
|
||||
>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
|
||||
type="button"
|
||||
Array [
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-circle"
|
||||
style="right:24px"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="customer-service"
|
||||
class="anticon anticon-customer-service"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="customer-service"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
aria-label="customer-service"
|
||||
class="anticon anticon-customer-service"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="customer-service"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-circle"
|
||||
style="right:94px"
|
||||
>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="customer-service"
|
||||
class="anticon anticon-customer-service"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="customer-service"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/render-panel.tsx extend context correctly 1`] = `
|
||||
@ -1370,52 +1436,68 @@ exports[`renders ./components/float-button/demo/render-panel.tsx extend context
|
||||
|
||||
exports[`renders ./components/float-button/demo/shape.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline"
|
||||
style="margin:20px"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-radio-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="circle"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
圆形
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="square"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
方形
|
||||
</span>
|
||||
</label>
|
||||
</div>,
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
|
||||
style="right:94px"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="customer-service"
|
||||
class="anticon anticon-customer-service"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="customer-service"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-square"
|
||||
style="right:24px"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
|
||||
@ -449,46 +449,90 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/group-menu.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-circle"
|
||||
>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
|
||||
type="button"
|
||||
Array [
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-circle"
|
||||
style="right:24px"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<span
|
||||
aria-label="customer-service"
|
||||
class="anticon anticon-customer-service"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="customer-service"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="customer-service"
|
||||
class="anticon anticon-customer-service"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="customer-service"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-circle"
|
||||
style="right:94px"
|
||||
>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="customer-service"
|
||||
class="anticon anticon-customer-service"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="customer-service"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/render-panel.tsx correctly 1`] = `
|
||||
@ -886,52 +930,46 @@ exports[`renders ./components/float-button/demo/render-panel.tsx correctly 1`] =
|
||||
|
||||
exports[`renders ./components/float-button/demo/shape.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline"
|
||||
style="margin:20px"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-radio-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="circle"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
圆形
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="square"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
方形
|
||||
</span>
|
||||
</label>
|
||||
</div>,
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
|
||||
style="right:94px"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="customer-service"
|
||||
class="anticon anticon-customer-service"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="customer-service"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-square"
|
||||
style="right:24px"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
## zh-CN
|
||||
|
||||
设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式
|
||||
设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式。
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
@ -3,10 +3,26 @@ import { FloatButton } from 'antd';
|
||||
import { CustomerServiceOutlined, CommentOutlined } from '@ant-design/icons';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<FloatButton.Group icon={<CustomerServiceOutlined />} type="primary" trigger="click">
|
||||
<FloatButton />
|
||||
<FloatButton icon={<CommentOutlined />} />
|
||||
</FloatButton.Group>
|
||||
<>
|
||||
<FloatButton.Group
|
||||
trigger="click"
|
||||
type="primary"
|
||||
style={{ right: 24 }}
|
||||
icon={<CustomerServiceOutlined />}
|
||||
>
|
||||
<FloatButton />
|
||||
<FloatButton icon={<CommentOutlined />} />
|
||||
</FloatButton.Group>
|
||||
<FloatButton.Group
|
||||
trigger="hover"
|
||||
type="primary"
|
||||
style={{ right: 94 }}
|
||||
icon={<CustomerServiceOutlined />}
|
||||
>
|
||||
<FloatButton />
|
||||
<FloatButton icon={<CommentOutlined />} />
|
||||
</FloatButton.Group>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
## zh-CN
|
||||
|
||||
你可以通过 `shape` 设置不同的形状
|
||||
通过 `shape` 设置不同的形状。
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
import React, { useState } from 'react';
|
||||
import { FloatButton, Radio } from 'antd';
|
||||
import type { RadioChangeEvent, FloatButtonProps } from 'antd';
|
||||
import React from 'react';
|
||||
import { FloatButton } from 'antd';
|
||||
import { CustomerServiceOutlined } from '@ant-design/icons';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [shape, setShape] = useState<FloatButtonProps['shape']>('circle');
|
||||
const onChange = (e: RadioChangeEvent) => {
|
||||
setShape(e.target.value);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Radio.Group onChange={onChange} value={shape} style={{ margin: 20 }}>
|
||||
<Radio value="circle">圆形</Radio>
|
||||
<Radio value="square">方形</Radio>
|
||||
</Radio.Group>
|
||||
<FloatButton icon={<CustomerServiceOutlined />} type="primary" shape={shape} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<FloatButton
|
||||
shape="circle"
|
||||
type="primary"
|
||||
style={{ right: 94 }}
|
||||
icon={<CustomerServiceOutlined />}
|
||||
/>
|
||||
<FloatButton
|
||||
shape="square"
|
||||
type="primary"
|
||||
style={{ right: 24 }}
|
||||
icon={<CustomerServiceOutlined />}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
## zh-CN
|
||||
|
||||
设置 tooltip 属性，即可开启气泡卡片
|
||||
设置 tooltip 属性，即可开启气泡卡片。
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
## zh-CN
|
||||
|
||||
通过 `type` 改变悬浮按钮的类型
|
||||
通过 `type` 改变悬浮按钮的类型。
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user