mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-01 14:59:35 +08:00
docs: add controlled demo (#42383)
This commit is contained in:
lijianan
GitHub
parent
8565d3aebb
commit
b6fc8604d9
@ -767,6 +767,388 @@ Array [
|
|||||||
]
|
]
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`renders components/color-picker/demo/controlled.tsx extend context correctly 1`] = `
|
||||||
|
Array [
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-trigger"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-color-block"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-color-block-inner"
|
||||||
|
style="background: rgb(22, 119, 255);"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
<div
|
||||||
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-popover-arrow"
|
||||||
|
style="position: absolute;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-popover-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-popover-inner-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-panel"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-inner-panel"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-select"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-palette"
|
||||||
|
style="position: relative;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-handler"
|
||||||
|
style="background-color: rgb(22, 119, 255);"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-saturation"
|
||||||
|
style="background-color: rgb(0, 0, 0);"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-slider-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-slider-group"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-slider ant-color-picker-slider-hue"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-palette"
|
||||||
|
style="position: relative;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||||
|
style="background-color: rgb(0, 0, 0);"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-gradient"
|
||||||
|
style="position: absolute; inset: 0;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-slider ant-color-picker-slider-alpha"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-palette"
|
||||||
|
style="position: relative;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||||
|
style="background-color: rgb(22, 119, 255);"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-gradient"
|
||||||
|
style="position: absolute; inset: 0;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-color-block"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-color-block-inner"
|
||||||
|
style="background: rgb(22, 119, 255);"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-input-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-select-selector"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-select-selection-search"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||||
|
aria-autocomplete="list"
|
||||||
|
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-select-selection-search-input"
|
||||||
|
id="rc_select_TEST_OR_SSR"
|
||||||
|
readonly=""
|
||||||
|
role="combobox"
|
||||||
|
style="opacity: 0;"
|
||||||
|
type="search"
|
||||||
|
unselectable="on"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-select-selection-item"
|
||||||
|
title="HEX"
|
||||||
|
>
|
||||||
|
HEX
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
id="rc_select_TEST_OR_SSR_list"
|
||||||
|
role="listbox"
|
||||||
|
style="height: 0px; width: 0px; overflow: hidden;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="HEX"
|
||||||
|
aria-selected="true"
|
||||||
|
id="rc_select_TEST_OR_SSR_list_0"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
hex
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="HSB"
|
||||||
|
aria-selected="false"
|
||||||
|
id="rc_select_TEST_OR_SSR_list_1"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
hsb
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="rc-virtual-list"
|
||||||
|
style="position: relative;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="rc-virtual-list-holder"
|
||||||
|
style="max-height: 256px; overflow-y: auto;"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="rc-virtual-list-holder-inner"
|
||||||
|
style="display: flex; flex-direction: column;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-selected="true"
|
||||||
|
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
||||||
|
title="HEX"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-select-item-option-content"
|
||||||
|
>
|
||||||
|
HEX
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="ant-select-item-option-state"
|
||||||
|
style="user-select: none;"
|
||||||
|
unselectable="on"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="ant-select-item ant-select-item-option"
|
||||||
|
title="HSB"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-select-item-option-content"
|
||||||
|
>
|
||||||
|
HSB
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="ant-select-item-option-state"
|
||||||
|
style="user-select: none;"
|
||||||
|
unselectable="on"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="ant-select-item ant-select-item-option"
|
||||||
|
title="RGB"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-select-item-option-content"
|
||||||
|
>
|
||||||
|
RGB
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="ant-select-item-option-state"
|
||||||
|
style="user-select: none;"
|
||||||
|
unselectable="on"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="ant-select-arrow"
|
||||||
|
style="user-select: none;"
|
||||||
|
unselectable="on"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="down"
|
||||||
|
class="anticon anticon-down ant-select-suffix"
|
||||||
|
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-color-picker-input"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-input-affix-wrapper ant-color-picker-hex-input ant-input-affix-wrapper-sm"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-input-prefix"
|
||||||
|
>
|
||||||
|
#
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
class="ant-input ant-input-sm"
|
||||||
|
type="text"
|
||||||
|
value="1677FF"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-input-number ant-input-number-sm ant-color-picker-steppers ant-color-picker-alpha-input"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-input-number-handler-wrap"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="true"
|
||||||
|
aria-label="Increase Value"
|
||||||
|
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="up"
|
||||||
|
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="up"
|
||||||
|
fill="currentColor"
|
||||||
|
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
|
||||||
|
aria-disabled="false"
|
||||||
|
aria-label="Decrease Value"
|
||||||
|
class="ant-input-number-handler ant-input-number-handler-down"
|
||||||
|
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
|
||||||
|
aria-valuemax="100"
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuenow="100"
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-input-number-input"
|
||||||
|
role="spinbutton"
|
||||||
|
step="1"
|
||||||
|
value="100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
]
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders components/color-picker/demo/disabled.tsx extend context correctly 1`] = `
|
exports[`renders components/color-picker/demo/disabled.tsx extend context correctly 1`] = `
|
||||||
Array [
|
Array [
|
||||||
<div
|
<div
|
||||||
|
|||||||
@ -30,6 +30,21 @@ exports[`renders components/color-picker/demo/base.tsx correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`renders components/color-picker/demo/controlled.tsx correctly 1`] = `
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-trigger"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-color-block"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-color-block-inner"
|
||||||
|
style="background:rgb(22, 119, 255)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders components/color-picker/demo/disabled.tsx correctly 1`] = `
|
exports[`renders components/color-picker/demo/disabled.tsx correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-trigger ant-color-picker-trigger-disabled"
|
class="ant-color-picker-trigger ant-color-picker-trigger-disabled"
|
||||||
|
|||||||
@ -1,10 +1,6 @@
|
|||||||
import { ColorPicker, theme } from 'antd';
|
import { ColorPicker } from 'antd';
|
||||||
import type { Color } from 'antd/es/color-picker';
|
import React from 'react';
|
||||||
import React, { useState } from 'react';
|
|
||||||
|
|
||||||
export default () => {
|
const Demo = () => <ColorPicker />;
|
||||||
const { token } = theme.useToken();
|
|
||||||
const [color, setColor] = useState<Color | string>(token.colorPrimary);
|
|
||||||
|
|
||||||
return <ColorPicker value={color} onChange={setColor} />;
|
export default Demo;
|
||||||
};
|
|
||||||
|
|||||||
7
components/color-picker/demo/controlled.md
Normal file
7
components/color-picker/demo/controlled.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
通过 `value` 和 `onChange` 设置组件为受控模式。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Set the component to controlled mode.
|
||||||
11
components/color-picker/demo/controlled.tsx
Normal file
11
components/color-picker/demo/controlled.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { ColorPicker, theme } from 'antd';
|
||||||
|
import type { Color } from 'antd/es/color-picker';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
const Demo: React.FC = () => {
|
||||||
|
const { token } = theme.useToken();
|
||||||
|
const [color, setColor] = useState<Color | string>(token.colorPrimary);
|
||||||
|
return <ColorPicker value={color} onChange={setColor} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Demo;
|
||||||
@ -11,17 +11,17 @@ export default () => {
|
|||||||
[color],
|
[color],
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
const divStyle: React.CSSProperties = {
|
||||||
<ColorPicker value={color} onChange={setColor}>
|
|
||||||
<Space>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: token.sizeMD,
|
width: token.sizeMD,
|
||||||
height: token.sizeMD,
|
height: token.sizeMD,
|
||||||
borderRadius: token.borderRadiusSM,
|
borderRadius: token.borderRadiusSM,
|
||||||
backgroundColor: bgColor,
|
backgroundColor: bgColor,
|
||||||
}}
|
};
|
||||||
/>
|
|
||||||
|
return (
|
||||||
|
<ColorPicker value={color} onChange={setColor}>
|
||||||
|
<Space>
|
||||||
|
<div style={divStyle} />
|
||||||
<span>{bgColor}</span>
|
<span>{bgColor}</span>
|
||||||
</Space>
|
</Space>
|
||||||
</ColorPicker>
|
</ColorPicker>
|
||||||
|
|||||||
@ -20,6 +20,7 @@ Used when the user needs to customize the color selection.
|
|||||||
|
|
||||||
<!-- prettier-ignore -->
|
<!-- prettier-ignore -->
|
||||||
<code src="./demo/base.tsx">Basic Usage</code>
|
<code src="./demo/base.tsx">Basic Usage</code>
|
||||||
|
<code src="./demo/controlled.tsx">controlled mode</code>
|
||||||
<code src="./demo/disabled.tsx" debug>Disable</code>
|
<code src="./demo/disabled.tsx" debug>Disable</code>
|
||||||
<code src="./demo/allowClear.tsx">Clear Color</code>
|
<code src="./demo/allowClear.tsx">Clear Color</code>
|
||||||
<code src="./demo/trigger.tsx">Custom Trigger</code>
|
<code src="./demo/trigger.tsx">Custom Trigger</code>
|
||||||
|
|||||||
@ -21,6 +21,7 @@ group:
|
|||||||
|
|
||||||
<!-- prettier-ignore -->
|
<!-- prettier-ignore -->
|
||||||
<code src="./demo/base.tsx">基本使用</code>
|
<code src="./demo/base.tsx">基本使用</code>
|
||||||
|
<code src="./demo/controlled.tsx">受控模式</code>
|
||||||
<code src="./demo/disabled.tsx" debug>禁用</code>
|
<code src="./demo/disabled.tsx" debug>禁用</code>
|
||||||
<code src="./demo/allowClear.tsx">清除颜色</code>
|
<code src="./demo/allowClear.tsx">清除颜色</code>
|
||||||
<code src="./demo/trigger.tsx">自定义触发器</code>
|
<code src="./demo/trigger.tsx">自定义触发器</code>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user