mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
refactor: color-picker panel dom logic (#46327)
* refactor: refactoring custom panel logic * chore: update test case & update snapshot * chore: update un-stable snap??? * docs: update demo * chore: update snapshots * fix: table filterDropdown should accept cssvar (#46314) * chore: revert files * chore: update demo * chore: update snap --------- Co-authored-by: MadCcc <madccc@foxmail.com>
This commit is contained in:
红
GitHub
parent
a8fc2ec3f3
commit
ce7da2ef41
@ -15,7 +15,7 @@ interface ColorPickerPanelProps extends ColorPickerBaseProps {
|
||||
|
||||
const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
|
||||
const { prefixCls, presets, panelRender, color, onChange, onClear, ...injectProps } = props;
|
||||
const colorPickerPanelPrefixCls = `${prefixCls}-inner-content`;
|
||||
const colorPickerPanelPrefixCls = `${prefixCls}-inner`;
|
||||
|
||||
// ==== Inject props ===
|
||||
const panelPickerProps = {
|
||||
@ -38,11 +38,11 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
|
||||
|
||||
// ====================== Render ======================
|
||||
const innerPanel = (
|
||||
<>
|
||||
<div className={`${colorPickerPanelPrefixCls}-content`}>
|
||||
<PanelPicker />
|
||||
{Array.isArray(presets) && <Divider className={`${colorPickerPanelPrefixCls}-divider`} />}
|
||||
{Array.isArray(presets) && <Divider />}
|
||||
<PanelPresets />
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -214,36 +214,28 @@ exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-row-middle"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span>
|
||||
Add title:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span>
|
||||
Add title:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
class="ant-color-picker-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<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>
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background:rgb(22, 119, 255)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -253,36 +245,28 @@ exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-row-middle"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span>
|
||||
Horizontal layout:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span>
|
||||
Horizontal layout:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
class="ant-color-picker-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<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>
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background:rgb(22, 119, 255)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -40,218 +40,142 @@ exports[`ColorPicker Should panelRender work 1`] = `
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-inner-content"
|
||||
class="ant-color-picker-inner"
|
||||
>
|
||||
<div
|
||||
class="custom-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-panel"
|
||||
class="ant-color-picker-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-select"
|
||||
class="ant-color-picker-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
class="ant-color-picker-select"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: -50px; top: 50px; z-index: 1;"
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler"
|
||||
style="background-color: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-saturation"
|
||||
style="background-color: rgb(255, 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;"
|
||||
style="position: absolute; left: -50px; top: 50px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: -50px; top: -16.666666666666668px; z-index: 1;"
|
||||
class="ant-color-picker-handler"
|
||||
style="background-color: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-saturation"
|
||||
style="background-color: rgb(255, 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
|
||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||
style="background-color: rgb(255, 0, 0);"
|
||||
style="position: absolute; left: -50px; top: -16.666666666666668px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||
style="background-color: rgb(255, 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-gradient"
|
||||
style="position: absolute; inset: 0;"
|
||||
/>
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: -50px; top: -16.666666666666668px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||
style="background-color: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-gradient"
|
||||
style="position: absolute; inset: 0;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-slider ant-color-picker-slider-alpha"
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: -50px; top: -16.666666666666668px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||
style="background-color: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-gradient"
|
||||
style="position: absolute; inset: 0;"
|
||||
/>
|
||||
</div>
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-input-container"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</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-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>
|
||||
<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="000000"
|
||||
/>
|
||||
</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="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
aria-label="up"
|
||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||
role="img"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<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>
|
||||
<input
|
||||
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>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-disabled="true"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
|
||||
role="button"
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -271,18 +195,98 @@ exports[`ColorPicker Should panelRender work 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
class="ant-color-picker-input"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="0%"
|
||||
/>
|
||||
<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="000000"
|
||||
/>
|
||||
</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="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
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="true"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
|
||||
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="0"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="0%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -323,7 +327,7 @@ exports[`ColorPicker Should panelRender work 2`] = `
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-inner-content"
|
||||
class="ant-color-picker-inner"
|
||||
>
|
||||
<div
|
||||
class="custom-panel"
|
||||
|
||||
@ -441,7 +441,8 @@ describe('ColorPicker', () => {
|
||||
/>,
|
||||
);
|
||||
expect(componentContainer.querySelector('.custom-panel')).toBeTruthy();
|
||||
expect(componentContainer.querySelector('.ant-color-picker-inner-content')).toBeTruthy();
|
||||
expect(componentContainer.querySelector('.ant-color-picker-inner-content')).not.toBeTruthy();
|
||||
expect(componentContainer.querySelector('.ant-color-picker-inner')).toBeTruthy();
|
||||
expect(componentContainer).toMatchSnapshot();
|
||||
});
|
||||
|
||||
|
||||
@ -1,127 +1,81 @@
|
||||
import React from 'react';
|
||||
import { Col, ColorPicker, Divider, Row, Space } from 'antd';
|
||||
import { Col, ColorPicker, Divider, Row, Space, theme } from 'antd';
|
||||
import type { ColorPickerProps } from 'antd';
|
||||
import { generate, green, presetPalettes, red, cyan } from '@ant-design/colors';
|
||||
|
||||
const Demo = () => (
|
||||
<Space direction="vertical">
|
||||
<Row align="middle">
|
||||
<Space>
|
||||
<span>Add title: </span>
|
||||
<Col>
|
||||
<ColorPicker
|
||||
defaultValue="#1677ff"
|
||||
panelRender={(panel) => (
|
||||
<div className="custom-panel">
|
||||
<div
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: 'rgba(0, 0, 0, 0.88)',
|
||||
lineHeight: '20px',
|
||||
marginBottom: 8,
|
||||
}}
|
||||
>
|
||||
Color Picker
|
||||
</div>
|
||||
{panel}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Space>
|
||||
type Presets = Required<ColorPickerProps>['presets'][number];
|
||||
|
||||
const genPresets = (presets = presetPalettes) =>
|
||||
Object.entries(presets).map<Presets>(([label, colors]) => ({
|
||||
label,
|
||||
colors,
|
||||
}));
|
||||
|
||||
const HorizontalLayoutDemo = () => {
|
||||
const { token } = theme.useToken();
|
||||
|
||||
const presets = genPresets({
|
||||
primary: generate(token.colorPrimary),
|
||||
red,
|
||||
green,
|
||||
cyan,
|
||||
});
|
||||
|
||||
const customPanelRender: ColorPickerProps['panelRender'] = (
|
||||
_,
|
||||
{ components: { Picker, Presets } },
|
||||
) => (
|
||||
<Row justify="space-between" wrap={false}>
|
||||
<Col span={12}>
|
||||
<Presets />
|
||||
</Col>
|
||||
<Divider type="vertical" style={{ height: 'auto' }} />
|
||||
<Col flex="auto">
|
||||
<Picker />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row align="middle">
|
||||
<Space>
|
||||
<span>Horizontal layout: </span>
|
||||
<Col>
|
||||
<ColorPicker
|
||||
defaultValue="#1677ff"
|
||||
styles={{
|
||||
popupOverlayInner: {
|
||||
width: 468 + 24,
|
||||
},
|
||||
}}
|
||||
presets={[
|
||||
{
|
||||
label: 'Recommended',
|
||||
colors: [
|
||||
'#000000',
|
||||
'#000000E0',
|
||||
'#000000A6',
|
||||
'#00000073',
|
||||
'#00000040',
|
||||
'#00000026',
|
||||
'#0000001A',
|
||||
'#00000012',
|
||||
'#0000000A',
|
||||
'#00000005',
|
||||
'#F5222D',
|
||||
'#FA8C16',
|
||||
'#FADB14',
|
||||
'#8BBB11',
|
||||
'#52C41A',
|
||||
'#13A8A8',
|
||||
'#1677FF',
|
||||
'#2F54EB',
|
||||
'#722ED1',
|
||||
'#EB2F96',
|
||||
'#F5222D4D',
|
||||
'#FA8C164D',
|
||||
'#FADB144D',
|
||||
'#8BBB114D',
|
||||
'#52C41A4D',
|
||||
'#13A8A84D',
|
||||
'#1677FF4D',
|
||||
'#2F54EB4D',
|
||||
'#722ED14D',
|
||||
'#EB2F964D',
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Recent',
|
||||
colors: [
|
||||
'#F5222D4D',
|
||||
'#FA8C164D',
|
||||
'#FADB144D',
|
||||
'#8BBB114D',
|
||||
'#52C41A4D',
|
||||
'#13A8A84D',
|
||||
],
|
||||
},
|
||||
]}
|
||||
panelRender={(_, { components: { Picker, Presets } }) => (
|
||||
<div
|
||||
className="custom-panel"
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: 468,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Presets />
|
||||
</div>
|
||||
<Divider
|
||||
type="vertical"
|
||||
style={{
|
||||
height: 'auto',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
width: 234,
|
||||
}}
|
||||
>
|
||||
<Picker />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Space>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
|
||||
return (
|
||||
<ColorPicker
|
||||
defaultValue={token.colorPrimary}
|
||||
styles={{ popupOverlayInner: { width: 480 } }}
|
||||
presets={presets}
|
||||
panelRender={customPanelRender}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const BasicDemo = () => (
|
||||
<ColorPicker
|
||||
defaultValue="#1677ff"
|
||||
panelRender={(panel) => (
|
||||
<div className="custom-panel">
|
||||
<div
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: 'rgba(0, 0, 0, 0.88)',
|
||||
lineHeight: '20px',
|
||||
marginBottom: 8,
|
||||
}}
|
||||
>
|
||||
Color Picker
|
||||
</div>
|
||||
{panel}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
export default Demo;
|
||||
export default () => (
|
||||
<Space direction="vertical">
|
||||
<Space>
|
||||
<span>Add title:</span>
|
||||
<BasicDemo />
|
||||
</Space>
|
||||
<Space>
|
||||
<span>Horizontal layout:</span>
|
||||
<HorizontalLayoutDemo />
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
|
||||
@ -156,6 +156,7 @@ const genSizeStyle = (token: ColorPickerToken): CSSObject => {
|
||||
|
||||
const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
|
||||
const {
|
||||
antCls,
|
||||
componentCls,
|
||||
colorPickerWidth,
|
||||
colorPrimary,
|
||||
@ -183,14 +184,17 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
|
||||
return [
|
||||
{
|
||||
[componentCls]: {
|
||||
[`${componentCls}-inner-content`]: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: colorPickerWidth,
|
||||
[`${componentCls}-inner`]: {
|
||||
'&-content': {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: colorPickerWidth,
|
||||
|
||||
'&-divider': {
|
||||
margin: `${unit(marginSM)} 0 ${unit(marginXS)}`,
|
||||
[`& > ${antCls}-divider`]: {
|
||||
margin: `${unit(marginSM)} 0 ${unit(marginXS)}`,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-panel`]: {
|
||||
...genPickerStyle(token),
|
||||
},
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -152,312 +152,236 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-inner-content"
|
||||
class="ant-color-picker-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-panel"
|
||||
class="ant-color-picker-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-select"
|
||||
class="ant-color-picker-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
class="ant-color-picker-select"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler"
|
||||
style="background-color: rgba(0, 0, 0, 0.15);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-saturation"
|
||||
style="background-color: rgb(255, 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;"
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
>
|
||||
<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(255, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-gradient"
|
||||
style="position: absolute; inset: 0;"
|
||||
class="ant-color-picker-handler"
|
||||
style="background-color: rgba(0, 0, 0, 0.15);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-saturation"
|
||||
style="background-color: rgb(255, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-slider-container"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-slider ant-color-picker-slider-alpha"
|
||||
class="ant-color-picker-slider-group"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
class="ant-color-picker-slider ant-color-picker-slider-hue"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||
style="background-color: rgba(0, 0, 0, 0.15);"
|
||||
/>
|
||||
</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: rgba(0, 0, 0, 0.15);"
|
||||
/>
|
||||
</div>
|
||||
</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-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; z-index: 1150; 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>
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="rc-virtual-list-holder-inner"
|
||||
style="display: flex; flex-direction: column;"
|
||||
>
|
||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||
style="background-color: rgb(255, 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: rgba(0, 0, 0, 0.15);"
|
||||
/>
|
||||
</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: rgba(0, 0, 0, 0.15);"
|
||||
/>
|
||||
</div>
|
||||
</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-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; z-index: 1150; 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
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
||||
title="HEX"
|
||||
class="rc-virtual-list-holder-inner"
|
||||
style="display: flex; flex-direction: column;"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
||||
title="HEX"
|
||||
>
|
||||
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>
|
||||
<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"
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="HSB"
|
||||
>
|
||||
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>
|
||||
<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"
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="RGB"
|
||||
>
|
||||
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>
|
||||
<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="000000"
|
||||
/>
|
||||
</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="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
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"
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -477,18 +401,98 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
class="ant-color-picker-input"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="15"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="15%"
|
||||
/>
|
||||
<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="000000"
|
||||
/>
|
||||
</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="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
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="15"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="15%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user