mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
demo: update demo (#40318)
* demo: update demo * add form * clear * add Select * add * fix style * fix style * fix * revert
This commit is contained in:
lijianan
GitHub
parent
73a71967c5
commit
b9a6b7b578
@ -2,7 +2,7 @@ import { css, Global } from '@emotion/react';
|
||||
import React from 'react';
|
||||
import useSiteToken from '../../../hooks/useSiteToken';
|
||||
|
||||
export default () => {
|
||||
const GlobalDemoStyles: React.FC = () => {
|
||||
const { token } = useSiteToken();
|
||||
|
||||
const { antCls, iconCls } = token;
|
||||
@ -24,9 +24,9 @@ export default () => {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: 0 0 16px;
|
||||
background-color: ${token.colorBgContainer};
|
||||
border: 1px solid ${token.colorSplit};
|
||||
border-radius: ${token.borderRadius}px;
|
||||
background-color: ${token.colorBgContainer};
|
||||
transition: all 0.2s;
|
||||
|
||||
.code-box-title {
|
||||
@ -373,3 +373,5 @@ export default () => {
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default GlobalDemoStyles;
|
||||
|
||||
@ -11,9 +11,3 @@ The most basic usage.
|
||||
color: rgba(64, 64, 64, 0.6);
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-back-top-basic {
|
||||
color: rgba(255,255,255,.45);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,9 +24,3 @@ Used together with `react-router@6+`.
|
||||
margin-top: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .demo-nav {
|
||||
background: #141414;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -82,8 +82,4 @@ Following the Ant Design specification, we will add one space between if Button
|
||||
padding: 16px;
|
||||
background: rgb(190, 200, 200);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .site-button-ghost-wrapper {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -87,10 +87,6 @@ group:
|
||||
padding: 16px;
|
||||
background: rgb(190, 200, 200);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .site-button-ghost-wrapper {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
## 设计指引
|
||||
|
||||
@ -5,9 +5,3 @@
|
||||
## en-US
|
||||
|
||||
By default, any number of panels can be expanded at a time. The first panel is expanded in this example.
|
||||
|
||||
<style>
|
||||
[data-theme="compact"] p, p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,9 +7,6 @@
|
||||
Specify the trigger area of collapsible by `collapsible`.
|
||||
|
||||
<style>
|
||||
[data-theme="compact"] p, p {
|
||||
margin: 0;
|
||||
}
|
||||
#components-collapse-demo-collapsible .ant-space {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -35,9 +35,3 @@ Components which support rtl direction are listed here, you can toggle the direc
|
||||
margin-left: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .head-example {
|
||||
background: rgba(255,255,255,.12);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,37 +5,3 @@
|
||||
## en-US
|
||||
|
||||
Components which need localization support are listed here, you can toggle the language in the demo.
|
||||
|
||||
```css
|
||||
.site-config-provider-calendar-wrapper {
|
||||
width: 319px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.locale-components {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.code-box-demo .example {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.code-box-demo .example > * {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.change-locale {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .locale-components {
|
||||
border-top: 1px solid #303030;
|
||||
}
|
||||
[data-theme="dark"] .site-config-provider-calendar-wrapper {
|
||||
border: 1px solid #303030;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import React, { useState } from 'react';
|
||||
import type { RadioChangeEvent } from 'antd';
|
||||
import {
|
||||
Button,
|
||||
@ -10,14 +9,16 @@ import {
|
||||
Popconfirm,
|
||||
Radio,
|
||||
Select,
|
||||
Space,
|
||||
Table,
|
||||
TimePicker,
|
||||
Transfer,
|
||||
} from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import enUS from 'antd/locale/en_US';
|
||||
import zhCN from 'antd/locale/zh_CN';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
dayjs.locale('en');
|
||||
|
||||
@ -28,12 +29,7 @@ const columns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
filters: [
|
||||
{
|
||||
text: 'filter1',
|
||||
value: 'filter1',
|
||||
},
|
||||
],
|
||||
filters: [{ text: 'filter1', value: 'filter1' }],
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
@ -41,7 +37,7 @@ const columns = [
|
||||
},
|
||||
];
|
||||
|
||||
const Page = () => {
|
||||
const Page: React.FC = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const showModal = () => {
|
||||
@ -67,11 +63,13 @@ const Page = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="locale-components">
|
||||
<div className="example">
|
||||
<Pagination defaultCurrent={1} total={50} showSizeChanger />
|
||||
</div>
|
||||
<div className="example">
|
||||
<Space
|
||||
direction="vertical"
|
||||
size={[0, 16]}
|
||||
style={{ width: '100%', paddingTop: 16, borderTop: `1px solid #d9d9d9` }}
|
||||
>
|
||||
<Pagination defaultCurrent={1} total={50} showSizeChanger />
|
||||
<Space wrap>
|
||||
<Select showSearch style={{ width: 200 }}>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
@ -79,8 +77,8 @@ const Page = () => {
|
||||
<DatePicker />
|
||||
<TimePicker />
|
||||
<RangePicker style={{ width: 200 }} />
|
||||
</div>
|
||||
<div className="example">
|
||||
</Space>
|
||||
<Space wrap>
|
||||
<Button type="primary" onClick={showModal}>
|
||||
Show Modal
|
||||
</Button>
|
||||
@ -89,20 +87,16 @@ const Page = () => {
|
||||
<Popconfirm title="Question?">
|
||||
<a href="#">Click to confirm</a>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Transfer dataSource={[]} showSearch targetKeys={[]} />
|
||||
</div>
|
||||
<div className="site-config-provider-calendar-wrapper">
|
||||
</Space>
|
||||
<Transfer dataSource={[]} showSearch targetKeys={[]} />
|
||||
<div style={{ width: 320, border: `1px solid #d9d9d9`, borderRadius: 8 }}>
|
||||
<Calendar fullscreen={false} value={dayjs()} />
|
||||
</div>
|
||||
<div className="example">
|
||||
<Table dataSource={[]} columns={columns} />
|
||||
</div>
|
||||
<Table dataSource={[]} columns={columns} />
|
||||
<Modal title="Locale Modal" open={open} onCancel={hideModal}>
|
||||
<p>Locale Modal</p>
|
||||
</Modal>
|
||||
</div>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
@ -121,7 +115,7 @@ const App: React.FC = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="change-locale">
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<span style={{ marginRight: 16 }}>Change locale of components: </span>
|
||||
<Radio.Group value={locale} onChange={changeLocale}>
|
||||
<Radio.Button key="en" value={enUS}>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
import { Button, ConfigProvider, Select } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
// Ant Design site use `es` module for view
|
||||
// but do not replace related lib `lib` with `es`
|
||||
@ -8,19 +8,17 @@ import { Button, ConfigProvider, Select } from 'antd';
|
||||
// We may need do convert in site also.
|
||||
const App: React.FC = () => {
|
||||
const [prefixCls, setPrefixCls] = useState('light');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Button style={{ marginBottom: '12px' }} type="primary" onClick={() => setPrefixCls('dark')}>
|
||||
toggle prefixCls
|
||||
</Button>
|
||||
<div>
|
||||
<ConfigProvider prefixCls={prefixCls} iconPrefixCls="bamboo">
|
||||
<SmileOutlined />
|
||||
<Select />
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<ConfigProvider prefixCls={prefixCls} iconPrefixCls="bamboo">
|
||||
<SmileOutlined />
|
||||
<Select style={{ width: 120 }} />
|
||||
</ConfigProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
@ -8,10 +7,12 @@ import {
|
||||
Input,
|
||||
Radio,
|
||||
Select,
|
||||
Space,
|
||||
Table,
|
||||
Tabs,
|
||||
} from 'antd';
|
||||
import type { SizeType } from 'antd/es/config-provider/SizeContext';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
@ -19,7 +20,7 @@ const App: React.FC = () => {
|
||||
const [componentSize, setComponentSize] = useState<SizeType>('small');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Radio.Group
|
||||
value={componentSize}
|
||||
onChange={(e) => {
|
||||
@ -32,10 +33,8 @@ const App: React.FC = () => {
|
||||
</Radio.Group>
|
||||
<Divider />
|
||||
<ConfigProvider componentSize={componentSize}>
|
||||
<div className="example">
|
||||
<Space size={[0, 16]} style={{ width: '100%' }} direction="vertical">
|
||||
<Input />
|
||||
</div>
|
||||
<div className="example">
|
||||
<Tabs defaultActiveKey="1">
|
||||
<TabPane tab="Tab 1" key="1">
|
||||
Content of Tab Pane 1
|
||||
@ -47,26 +46,12 @@ const App: React.FC = () => {
|
||||
Content of Tab Pane 3
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Input.Search allowClear />
|
||||
</div>
|
||||
<div className="example">
|
||||
<Input.TextArea allowClear />
|
||||
</div>
|
||||
<div className="example">
|
||||
<Select defaultValue="demo" options={[{ value: 'demo' }]} />
|
||||
</div>
|
||||
<div className="example">
|
||||
<DatePicker />
|
||||
</div>
|
||||
<div className="example">
|
||||
<DatePicker.RangePicker />
|
||||
</div>
|
||||
<div className="example">
|
||||
<Button>Button</Button>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Card title="Card">
|
||||
<Table
|
||||
columns={[
|
||||
@ -74,27 +59,15 @@ const App: React.FC = () => {
|
||||
{ title: 'Age', dataIndex: 'age' },
|
||||
]}
|
||||
dataSource={[
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
age: 42,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
},
|
||||
{ key: '1', name: 'John Brown', age: 32 },
|
||||
{ key: '2', name: 'Jim Green', age: 42 },
|
||||
{ key: '3', name: 'Joe Black', age: 32 },
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
</Space>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Button, ConfigProvider, Form, InputNumber } from 'antd';
|
||||
import React from 'react';
|
||||
import { SketchPicker } from 'react-color';
|
||||
|
||||
type ThemeData = {
|
||||
|
||||
@ -11,23 +11,25 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAA
|
||||
|
||||
This component provides a configuration to all React components underneath itself via the [context API](https://facebook.github.io/react/docs/context.html). In the render tree all components will have access to the provided config.
|
||||
|
||||
```jsx
|
||||
```tsx
|
||||
import { ConfigProvider } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
// ...
|
||||
|
||||
export default () => (
|
||||
const Demo: React.FC = () => (
|
||||
<ConfigProvider direction="rtl">
|
||||
<App />
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
export default Demo;
|
||||
```
|
||||
|
||||
### Content Security Policy
|
||||
|
||||
Some components use dynamic style to support wave effect. You can config `csp` prop if Content Security Policy (CSP) is enabled:
|
||||
|
||||
```jsx
|
||||
```tsx
|
||||
<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
|
||||
<Button>My Button</Button>
|
||||
</ConfigProvider>
|
||||
@ -69,7 +71,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
|
||||
|
||||
Setting `Modal`、`Message`、`Notification` rootPrefixCls.
|
||||
|
||||
```jsx
|
||||
```ts
|
||||
ConfigProvider.config({
|
||||
prefixCls: 'ant', // 4.13.0+
|
||||
iconPrefixCls: 'anticon', // 4.17.0+
|
||||
|
||||
@ -12,23 +12,25 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAA
|
||||
|
||||
ConfigProvider 使用 React 的 [context](https://facebook.github.io/react/docs/context.html) 特性，只需在应用外围包裹一次即可全局生效。
|
||||
|
||||
```jsx
|
||||
```tsx
|
||||
import { ConfigProvider } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
// ...
|
||||
|
||||
export default () => (
|
||||
const Demo: React.FC = () => (
|
||||
<ConfigProvider direction="rtl">
|
||||
<App />
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
export default Demo;
|
||||
```
|
||||
|
||||
### Content Security Policy
|
||||
|
||||
部分组件为了支持波纹效果，使用了动态样式。如果开启了 Content Security Policy (CSP)，你可以通过 `csp` 属性来进行配置：
|
||||
|
||||
```jsx
|
||||
```tsx
|
||||
<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
|
||||
<Button>My Button</Button>
|
||||
</ConfigProvider>
|
||||
@ -70,7 +72,7 @@ export default () => (
|
||||
|
||||
设置 `Modal`、`Message`、`Notification` rootPrefixCls。
|
||||
|
||||
```jsx
|
||||
```ts
|
||||
ConfigProvider.config({
|
||||
prefixCls: 'ant', // 4.13.0+
|
||||
iconPrefixCls: 'anticon', // 4.17.0+
|
||||
|
||||
@ -5,9 +5,3 @@
|
||||
## en-US
|
||||
|
||||
Basic drawer.
|
||||
|
||||
<style>
|
||||
[data-theme='compact'] .ant-drawer-body p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,10 +18,3 @@ Use a form in Drawer with a submit button.
|
||||
border-top: 1px solid #e9e9e9;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-form-in-drawer-wrapper {
|
||||
border-top: 1px solid #303030;
|
||||
background: #1f1f1f;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,10 +5,3 @@
|
||||
## en-US
|
||||
|
||||
Open a new drawer on top of an existing drawer to handle multi branch tasks.
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-multi-level-drawer-footer {
|
||||
border-top: 1px solid #303030;
|
||||
background: #1f1f1f;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,11 +14,6 @@ Use Drawer to quickly preview details of an object, such as those in a list.
|
||||
line-height: 1.5715;
|
||||
}
|
||||
|
||||
[data-theme='compact'] .site-description-item-profile-wrapper {
|
||||
font-size: 12px;
|
||||
line-height: 1.66667;
|
||||
}
|
||||
|
||||
.ant-drawer-body p.site-description-item-profile-p {
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
@ -27,23 +22,9 @@ Use Drawer to quickly preview details of an object, such as those in a list.
|
||||
line-height: 1.5715;
|
||||
}
|
||||
|
||||
[data-theme='compact'] .ant-drawer-body p.site-description-item-profile-p {
|
||||
font-size: 14px;
|
||||
line-height: 1.66667;
|
||||
}
|
||||
|
||||
.site-description-item-profile-p-label {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-description-item-profile-p {
|
||||
color: rgba(255,255,255,0.85);
|
||||
}
|
||||
[data-theme="dark"] .site-description-item-profile-wrapper {
|
||||
color: rgba(255,255,255,0.65);
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -5,10 +5,3 @@
|
||||
## en-US
|
||||
|
||||
Use ConfigProvider set global Empty style.
|
||||
|
||||
<style>
|
||||
.code-box-demo .config-provider h4 {
|
||||
font-size: inherit;
|
||||
margin: 16px 0 8px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,6 +6,7 @@ import {
|
||||
Divider,
|
||||
List,
|
||||
Select,
|
||||
Space,
|
||||
Switch,
|
||||
Table,
|
||||
Transfer,
|
||||
@ -19,60 +20,42 @@ const customizeRenderEmpty = () => (
|
||||
</div>
|
||||
);
|
||||
|
||||
const style = { width: 200 };
|
||||
const style: React.CSSProperties = { width: 200 };
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [customize, setCustomize] = useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Switch
|
||||
unCheckedChildren="default"
|
||||
checkedChildren="customize"
|
||||
checked={customize}
|
||||
onChange={(val) => {
|
||||
setCustomize(val);
|
||||
}}
|
||||
onChange={setCustomize}
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
<ConfigProvider renderEmpty={customize ? customizeRenderEmpty : undefined}>
|
||||
<div className="config-provider">
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<h4>Select</h4>
|
||||
<Select style={style} />
|
||||
|
||||
<h4>TreeSelect</h4>
|
||||
<TreeSelect style={style} treeData={[]} />
|
||||
|
||||
<h4>Cascader</h4>
|
||||
<Cascader style={style} options={[]} showSearch />
|
||||
|
||||
<h4>Transfer</h4>
|
||||
<Transfer />
|
||||
|
||||
<h4>Table</h4>
|
||||
<Table
|
||||
style={{ marginTop: 8 }}
|
||||
columns={[
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
},
|
||||
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
||||
{ title: 'Age', dataIndex: 'age', key: 'age' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<h4>List</h4>
|
||||
<List />
|
||||
</div>
|
||||
</Space>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -4,9 +4,7 @@ import { Button, Empty } from 'antd';
|
||||
const App: React.FC = () => (
|
||||
<Empty
|
||||
image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
|
||||
imageStyle={{
|
||||
height: 60,
|
||||
}}
|
||||
imageStyle={{ height: 60 }}
|
||||
description={
|
||||
<span>
|
||||
Customize <a href="#API">Description</a>
|
||||
|
||||
@ -60,10 +60,4 @@ Empty state placeholder.
|
||||
height: 116px;
|
||||
background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
|
||||
}
|
||||
[data-theme="dark"] .site-empty-buildIn-simple {
|
||||
background-image: url("https://gw.alipayobjects.com/zos/antfincdn/ldFsHUh3Xh/ea62c5fe-07bb-4fcd-9d35-19220cef372e.png");
|
||||
}
|
||||
[data-theme="dark"] .site-empty-buildIn-default {
|
||||
background-image: url("https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gfq-SoT3wF0AAAAAAAAAAABkARQnAQ");
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -61,10 +61,4 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAA
|
||||
height: 116px;
|
||||
background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
|
||||
}
|
||||
[data-theme="dark"] .site-empty-buildIn-simple {
|
||||
background-image: url("https://gw.alipayobjects.com/zos/antfincdn/ldFsHUh3Xh/ea62c5fe-07bb-4fcd-9d35-19220cef372e.png");
|
||||
}
|
||||
[data-theme="dark"] .site-empty-buildIn-default {
|
||||
background-image: url("https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gfq-SoT3wF0AAAAAAAAAAABkARQnAQ");
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -612,6 +612,7 @@ exports[`renders ./components/form/demo/basic.tsx extend context correctly 1`] =
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="basic"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -797,6 +798,7 @@ Array [
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="basic"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -1583,6 +1585,7 @@ exports[`renders ./components/form/demo/control-hooks.tsx extend context correct
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="control-hooks"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -1864,6 +1867,7 @@ exports[`renders ./components/form/demo/control-ref.tsx extend context correctly
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="control-ref"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -2381,6 +2385,7 @@ Array [
|
||||
</label>,
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -5177,6 +5182,7 @@ Array [
|
||||
exports[`renders ./components/form/demo/disabled-input-debug.tsx extend context correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -5687,6 +5693,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.tsx extend context cor
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="dynamic_form_item"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -5812,6 +5819,7 @@ exports[`renders ./components/form/demo/dynamic-form-items.tsx extend context co
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="dynamic_form_nest_item"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -5902,6 +5910,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.tsx extend co
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="dynamic_form_complex"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -6164,6 +6173,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-no-style.tsx extend c
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="dynamic_form_no_style"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -6283,6 +6293,7 @@ exports[`renders ./components/form/demo/dynamic-rule.tsx extend context correctl
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="dynamic_rule"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -6434,6 +6445,7 @@ exports[`renders ./components/form/demo/form-context.tsx extend context correctl
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="basicForm"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -6923,6 +6935,7 @@ exports[`renders ./components/form/demo/label-debug.tsx extend context correctly
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="label-ellipsis"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -7077,6 +7090,7 @@ exports[`renders ./components/form/demo/label-debug.tsx extend context correctly
|
||||
exports[`renders ./components/form/demo/layout.tsx extend context correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -7279,6 +7293,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.tsx extend context corre
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="wrap"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -7406,6 +7421,7 @@ exports[`renders ./components/form/demo/nest-messages.tsx extend context correct
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="nest-messages"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -7891,6 +7907,7 @@ exports[`renders ./components/form/demo/normal-login.tsx extend context correctl
|
||||
exports[`renders ./components/form/demo/ref-item.tsx extend context correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -7978,6 +7995,7 @@ exports[`renders ./components/form/demo/register.tsx extend context correctly 1`
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="register"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -9660,6 +9678,7 @@ exports[`renders ./components/form/demo/required-mark.tsx extend context correct
|
||||
exports[`renders ./components/form/demo/size.tsx extend context correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal ant-form-default"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -11079,6 +11098,7 @@ exports[`renders ./components/form/demo/time-related-controls.tsx extend context
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="time_related_controls"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -18844,6 +18864,7 @@ exports[`renders ./components/form/demo/validate-other.tsx extend context correc
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="validate_other"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -20438,6 +20459,7 @@ exports[`renders ./components/form/demo/validate-other.tsx extend context correc
|
||||
exports[`renders ./components/form/demo/validate-static.tsx extend context correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
|
||||
@ -26668,6 +26690,7 @@ exports[`renders ./components/form/demo/warning-only.tsx extend context correctl
|
||||
exports[`renders ./components/form/demo/without-form-create.tsx extend context correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item ant-form-item-with-help"
|
||||
|
||||
@ -448,6 +448,7 @@ exports[`renders ./components/form/demo/basic.tsx correctly 1`] = `
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="basic"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -633,6 +634,7 @@ Array [
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="basic"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -1205,6 +1207,7 @@ exports[`renders ./components/form/demo/control-hooks.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="control-hooks"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -1387,6 +1390,7 @@ exports[`renders ./components/form/demo/control-ref.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="control-ref"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -1723,6 +1727,7 @@ Array [
|
||||
</label>,
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -2650,6 +2655,7 @@ Array [
|
||||
exports[`renders ./components/form/demo/disabled-input-debug.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -3160,6 +3166,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="dynamic_form_item"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -3285,6 +3292,7 @@ exports[`renders ./components/form/demo/dynamic-form-items.tsx correctly 1`] = `
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="dynamic_form_nest_item"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -3375,6 +3383,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.tsx correctly
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="dynamic_form_complex"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -3555,6 +3564,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-no-style.tsx correctl
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="dynamic_form_no_style"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -3674,6 +3684,7 @@ exports[`renders ./components/form/demo/dynamic-rule.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="dynamic_rule"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -3825,6 +3836,7 @@ exports[`renders ./components/form/demo/form-context.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="basicForm"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -4314,6 +4326,7 @@ exports[`renders ./components/form/demo/label-debug.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="label-ellipsis"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -4468,6 +4481,7 @@ exports[`renders ./components/form/demo/label-debug.tsx correctly 1`] = `
|
||||
exports[`renders ./components/form/demo/layout.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -4670,6 +4684,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="wrap"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -4797,6 +4812,7 @@ exports[`renders ./components/form/demo/nest-messages.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="nest-messages"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -5282,6 +5298,7 @@ exports[`renders ./components/form/demo/normal-login.tsx correctly 1`] = `
|
||||
exports[`renders ./components/form/demo/ref-item.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -5369,6 +5386,7 @@ exports[`renders ./components/form/demo/register.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="register"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -6612,6 +6630,7 @@ exports[`renders ./components/form/demo/required-mark.tsx correctly 1`] = `
|
||||
exports[`renders ./components/form/demo/size.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal ant-form-default"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -7265,6 +7284,7 @@ exports[`renders ./components/form/demo/time-related-controls.tsx correctly 1`]
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="time_related_controls"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -7979,6 +7999,7 @@ exports[`renders ./components/form/demo/validate-other.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="validate_other"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
@ -9386,6 +9407,7 @@ exports[`renders ./components/form/demo/validate-other.tsx correctly 1`] = `
|
||||
exports[`renders ./components/form/demo/validate-static.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
|
||||
@ -11263,6 +11285,7 @@ exports[`renders ./components/form/demo/warning-only.tsx correctly 1`] = `
|
||||
exports[`renders ./components/form/demo/without-form-create.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item ant-form-item-with-help"
|
||||
|
||||
@ -1,52 +1,51 @@
|
||||
import React from 'react';
|
||||
import { Button, Checkbox, Form, Input } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Success:', values);
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo: any) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form
|
||||
name="basic"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
initialValues={{ remember: true }}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
label="Username"
|
||||
name="username"
|
||||
rules={[{ required: true, message: 'Please input your username!' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Password"
|
||||
name="password"
|
||||
rules={[{ required: true, message: 'Please input your password!' }]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Success:', values);
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo: any) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form
|
||||
name="basic"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
style={{ maxWidth: 600 }}
|
||||
initialValues={{ remember: true }}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
label="Username"
|
||||
name="username"
|
||||
rules={[{ required: true, message: 'Please input your username!' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Password"
|
||||
name="password"
|
||||
rules={[{ required: true, message: 'Please input your password!' }]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -38,6 +38,7 @@ const App: React.FC = () => {
|
||||
initialValues={{ remember: true }}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
style={{ maxWidth: 600 }}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
|
||||
@ -3,71 +3,75 @@ import { Button, Form, Input, Select, Space, Tooltip, Typography } from 'antd';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Received values of form: ', values);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form name="complex-form" onFinish={onFinish} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
|
||||
<Form.Item label="Username">
|
||||
<Space>
|
||||
<Form.Item
|
||||
name="username"
|
||||
noStyle
|
||||
rules={[{ required: true, message: 'Username is required' }]}
|
||||
>
|
||||
<Input style={{ width: 160 }} placeholder="Please input" />
|
||||
</Form.Item>
|
||||
<Tooltip title="Useful information">
|
||||
<Typography.Link href="#API">Need Help?</Typography.Link>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
<Form.Item label="Address">
|
||||
<Input.Group compact>
|
||||
<Form.Item
|
||||
name={['address', 'province']}
|
||||
noStyle
|
||||
rules={[{ required: true, message: 'Province is required' }]}
|
||||
>
|
||||
<Select placeholder="Select province">
|
||||
<Option value="Zhejiang">Zhejiang</Option>
|
||||
<Option value="Jiangsu">Jiangsu</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['address', 'street']}
|
||||
noStyle
|
||||
rules={[{ required: true, message: 'Street is required' }]}
|
||||
>
|
||||
<Input style={{ width: '50%' }} placeholder="Input street" />
|
||||
</Form.Item>
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="BirthDate" style={{ marginBottom: 0 }}>
|
||||
<Form.Item
|
||||
name="year"
|
||||
rules={[{ required: true }]}
|
||||
style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}
|
||||
>
|
||||
<Input placeholder="Input birth year" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="month"
|
||||
rules={[{ required: true }]}
|
||||
style={{ display: 'inline-block', width: 'calc(50% - 8px)', margin: '0 8px' }}
|
||||
>
|
||||
<Input placeholder="Input birth month" />
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
<Form.Item label=" " colon={false}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Received values of form: ', values);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form
|
||||
name="complex-form"
|
||||
onFinish={onFinish}
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item label="Username">
|
||||
<Space>
|
||||
<Form.Item
|
||||
name="username"
|
||||
noStyle
|
||||
rules={[{ required: true, message: 'Username is required' }]}
|
||||
>
|
||||
<Input style={{ width: 160 }} placeholder="Please input" />
|
||||
</Form.Item>
|
||||
<Tooltip title="Useful information">
|
||||
<Typography.Link href="#API">Need Help?</Typography.Link>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
<Form.Item label="Address">
|
||||
<Input.Group compact>
|
||||
<Form.Item
|
||||
name={['address', 'province']}
|
||||
noStyle
|
||||
rules={[{ required: true, message: 'Province is required' }]}
|
||||
>
|
||||
<Select placeholder="Select province">
|
||||
<Option value="Zhejiang">Zhejiang</Option>
|
||||
<Option value="Jiangsu">Jiangsu</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['address', 'street']}
|
||||
noStyle
|
||||
rules={[{ required: true, message: 'Street is required' }]}
|
||||
>
|
||||
<Input style={{ width: '50%' }} placeholder="Input street" />
|
||||
</Form.Item>
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="BirthDate" style={{ marginBottom: 0 }}>
|
||||
<Form.Item
|
||||
name="year"
|
||||
rules={[{ required: true }]}
|
||||
style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}
|
||||
>
|
||||
<Input placeholder="Input birth year" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="month"
|
||||
rules={[{ required: true }]}
|
||||
style={{ display: 'inline-block', width: 'calc(50% - 8px)', margin: '0 8px' }}
|
||||
>
|
||||
<Input placeholder="Input birth month" />
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
<Form.Item label=" " colon={false}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Button, Form, Input, Select } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
@ -7,6 +7,7 @@ const layout = {
|
||||
labelCol: { span: 8 },
|
||||
wrapperCol: { span: 16 },
|
||||
};
|
||||
|
||||
const tailLayout = {
|
||||
wrapperCol: { offset: 8, span: 16 },
|
||||
};
|
||||
@ -18,10 +19,10 @@ const App: React.FC = () => {
|
||||
switch (value) {
|
||||
case 'male':
|
||||
form.setFieldsValue({ note: 'Hi, man!' });
|
||||
return;
|
||||
break;
|
||||
case 'female':
|
||||
form.setFieldsValue({ note: 'Hi, lady!' });
|
||||
return;
|
||||
break;
|
||||
case 'other':
|
||||
form.setFieldsValue({ note: 'Hi there!' });
|
||||
break;
|
||||
@ -38,14 +39,17 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
const onFill = () => {
|
||||
form.setFieldsValue({
|
||||
note: 'Hello world!',
|
||||
gender: 'male',
|
||||
});
|
||||
form.setFieldsValue({ note: 'Hello world!', gender: 'male' });
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
|
||||
<Form
|
||||
{...layout}
|
||||
form={form}
|
||||
name="control-hooks"
|
||||
onFinish={onFinish}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item name="note" label="Note" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
@ -8,6 +8,7 @@ const layout = {
|
||||
labelCol: { span: 8 },
|
||||
wrapperCol: { span: 16 },
|
||||
};
|
||||
|
||||
const tailLayout = {
|
||||
wrapperCol: { offset: 8, span: 16 },
|
||||
};
|
||||
@ -19,10 +20,10 @@ const App: React.FC = () => {
|
||||
switch (value) {
|
||||
case 'male':
|
||||
formRef.current?.setFieldsValue({ note: 'Hi, man!' });
|
||||
return;
|
||||
break;
|
||||
case 'female':
|
||||
formRef.current?.setFieldsValue({ note: 'Hi, lady!' });
|
||||
return;
|
||||
break;
|
||||
case 'other':
|
||||
formRef.current?.setFieldsValue({ note: 'Hi there!' });
|
||||
break;
|
||||
@ -44,7 +45,13 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...layout} ref={formRef} name="control-ref" onFinish={onFinish}>
|
||||
<Form
|
||||
{...layout}
|
||||
ref={formRef}
|
||||
name="control-ref"
|
||||
onFinish={onFinish}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item name="note" label="Note" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
@ -9,10 +9,8 @@ const App: React.FC = () => {
|
||||
<Form
|
||||
form={form}
|
||||
name="debug"
|
||||
initialValues={{
|
||||
debug1: 'debug1',
|
||||
debug2: 'debug2',
|
||||
}}
|
||||
initialValues={{ debug1: 'debug1', debug2: 'debug2' }}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item noStyle dependencies={['debug1']}>
|
||||
{
|
||||
|
||||
@ -4,4 +4,4 @@ Test disabled Input with validate state
|
||||
|
||||
## en-US
|
||||
|
||||
Test disabled Input with validate state
|
||||
Test disabled Input with validate state.
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import { Form, Input } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form>
|
||||
<Form style={{ maxWidth: 600 }}>
|
||||
<Form.Item label="Normal0">
|
||||
<Input placeholder="unavailable choice" value="Buggy!" />
|
||||
</Form.Item>
|
||||
|
||||
@ -18,7 +18,7 @@ import {
|
||||
const { RangePicker } = DatePicker;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const FormDisabledDemo = () => {
|
||||
const FormDisabledDemo: React.FC = () => {
|
||||
const [componentDisabled, setComponentDisabled] = useState<boolean>(true);
|
||||
const onFormLayoutChange = ({ disabled }: { disabled: boolean }) => {
|
||||
setComponentDisabled(disabled);
|
||||
@ -38,6 +38,7 @@ const FormDisabledDemo = () => {
|
||||
layout="horizontal"
|
||||
onValuesChange={onFormLayoutChange}
|
||||
disabled={componentDisabled}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item label="Checkbox" name="disabled" valuePropName="checked">
|
||||
<Checkbox>Checkbox</Checkbox>
|
||||
|
||||
@ -24,12 +24,3 @@ Add or remove form items dynamically. `add` function support config initial valu
|
||||
opacity: 0.5;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .dynamic-delete-button {
|
||||
color: rgba(255,255,255,.45);
|
||||
}
|
||||
[data-theme="dark"] .dynamic-delete-button:hover {
|
||||
color: rgba(255,255,255,.65);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,6 +12,7 @@ const formItemLayout = {
|
||||
sm: { span: 20 },
|
||||
},
|
||||
};
|
||||
|
||||
const formItemLayoutWithOutLabel = {
|
||||
wrapperCol: {
|
||||
xs: { span: 24, offset: 0 },
|
||||
@ -25,7 +26,12 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Form name="dynamic_form_item" {...formItemLayoutWithOutLabel} onFinish={onFinish}>
|
||||
<Form
|
||||
name="dynamic_form_item"
|
||||
{...formItemLayoutWithOutLabel}
|
||||
onFinish={onFinish}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.List
|
||||
name="names"
|
||||
rules={[
|
||||
|
||||
@ -28,7 +28,13 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} name="dynamic_form_complex" onFinish={onFinish} autoComplete="off">
|
||||
<Form
|
||||
form={form}
|
||||
name="dynamic_form_complex"
|
||||
onFinish={onFinish}
|
||||
style={{ maxWidth: 600 }}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item name="area" label="Area" rules={[{ required: true, message: 'Missing area' }]}>
|
||||
<Select options={areas} onChange={handleChange} />
|
||||
</Form.Item>
|
||||
|
||||
@ -2,48 +2,51 @@ import React from 'react';
|
||||
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import { Button, Form, Input, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Received values of form:', values);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form name="dynamic_form_no_style" onFinish={onFinish} autoComplete="off">
|
||||
<Form.Item label="Users">
|
||||
<Form.List name="users">
|
||||
{(fields, { add, remove }) => (
|
||||
<>
|
||||
{fields.map((field) => (
|
||||
<Space key={field.key} style={{ marginBottom: 16 }}>
|
||||
<Form.Item noStyle name={[field.name, 'lastName']} rules={[{ required: true }]}>
|
||||
<Input placeholder="Last Name" />
|
||||
</Form.Item>
|
||||
<Form.Item noStyle name={[field.name, 'firstName']} rules={[{ required: true }]}>
|
||||
<Input placeholder="First Name" />
|
||||
</Form.Item>
|
||||
<MinusCircleOutlined
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
|
||||
Add field
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Received values of form:', values);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form
|
||||
name="dynamic_form_no_style"
|
||||
onFinish={onFinish}
|
||||
style={{ maxWidth: 600 }}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item label="Users">
|
||||
<Form.List name="users">
|
||||
{(fields, { add, remove }) => (
|
||||
<>
|
||||
{fields.map((field) => (
|
||||
<Space key={field.key} style={{ marginBottom: 16 }}>
|
||||
<Form.Item noStyle name={[field.name, 'lastName']} rules={[{ required: true }]}>
|
||||
<Input placeholder="Last Name" />
|
||||
</Form.Item>
|
||||
<Form.Item noStyle name={[field.name, 'firstName']} rules={[{ required: true }]}>
|
||||
<Input placeholder="First Name" />
|
||||
</Form.Item>
|
||||
<MinusCircleOutlined
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
|
||||
Add field
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -2,50 +2,53 @@ import React from 'react';
|
||||
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import { Button, Form, Input, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Received values of form:', values);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
|
||||
<Form.List name="users">
|
||||
{(fields, { add, remove }) => (
|
||||
<>
|
||||
{fields.map(({ key, name, ...restField }) => (
|
||||
<Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
|
||||
<Form.Item
|
||||
{...restField}
|
||||
name={[name, 'first']}
|
||||
rules={[{ required: true, message: 'Missing first name' }]}
|
||||
>
|
||||
<Input placeholder="First Name" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...restField}
|
||||
name={[name, 'last']}
|
||||
rules={[{ required: true, message: 'Missing last name' }]}
|
||||
>
|
||||
<Input placeholder="Last Name" />
|
||||
</Form.Item>
|
||||
<MinusCircleOutlined onClick={() => remove(name)} />
|
||||
</Space>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
|
||||
Add field
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Received values of form:', values);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form
|
||||
name="dynamic_form_nest_item"
|
||||
onFinish={onFinish}
|
||||
style={{ maxWidth: 600 }}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.List name="users">
|
||||
{(fields, { add, remove }) => (
|
||||
<>
|
||||
{fields.map(({ key, name, ...restField }) => (
|
||||
<Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
|
||||
<Form.Item
|
||||
{...restField}
|
||||
name={[name, 'first']}
|
||||
rules={[{ required: true, message: 'Missing first name' }]}
|
||||
>
|
||||
<Input placeholder="First Name" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...restField}
|
||||
name={[name, 'last']}
|
||||
rules={[{ required: true, message: 'Missing last name' }]}
|
||||
>
|
||||
<Input placeholder="Last Name" />
|
||||
</Form.Item>
|
||||
<MinusCircleOutlined onClick={() => remove(name)} />
|
||||
</Space>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
|
||||
Add field
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -33,17 +33,12 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} name="dynamic_rule">
|
||||
<Form form={form} name="dynamic_rule" style={{ maxWidth: 600 }}>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="username"
|
||||
label="Name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please input your name',
|
||||
},
|
||||
]}
|
||||
rules={[{ required: true, message: 'Please input your name' }]}
|
||||
>
|
||||
<Input placeholder="Please input your name" />
|
||||
</Form.Item>
|
||||
@ -51,12 +46,7 @@ const App: React.FC = () => {
|
||||
{...formItemLayout}
|
||||
name="nickname"
|
||||
label="Nickname"
|
||||
rules={[
|
||||
{
|
||||
required: checkNick,
|
||||
message: 'Please input your nickname',
|
||||
},
|
||||
]}
|
||||
rules={[{ required: checkNick, message: 'Please input your nickname' }]}
|
||||
>
|
||||
<Input placeholder="Please input your nickname" />
|
||||
</Form.Item>
|
||||
|
||||
@ -5,18 +5,3 @@
|
||||
## en-US
|
||||
|
||||
Use `Form.Provider` to process data between forms. In this case, submit button is in the Modal which is out of Form. You can use `form.submit` to submit form. Besides, we recommend native `<Button htmlType="submit" />` to submit a form.
|
||||
|
||||
```css
|
||||
#components-form-demo-form-context .user {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#components-form-demo-form-context .user .ant-avatar {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.ant-row-rtl #components-form-demo-form-context .user .ant-avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -7,6 +7,7 @@ const layout = {
|
||||
labelCol: { span: 8 },
|
||||
wrapperCol: { span: 16 },
|
||||
};
|
||||
|
||||
const tailLayout = {
|
||||
wrapperCol: { offset: 8, span: 16 },
|
||||
};
|
||||
@ -88,7 +89,7 @@ const App: React.FC = () => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Form {...layout} name="basicForm" onFinish={onFinish}>
|
||||
<Form {...layout} name="basicForm" onFinish={onFinish} style={{ maxWidth: 600 }}>
|
||||
<Form.Item name="group" label="Group Name" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
@ -2,7 +2,12 @@ import React from 'react';
|
||||
import { Form, Input, Typography } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form name="label-ellipsis" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
|
||||
<Form
|
||||
name="label-ellipsis"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item
|
||||
label={
|
||||
<Typography.Text ellipsis>
|
||||
|
||||
@ -9,6 +9,7 @@ const App: React.FC = () => (
|
||||
labelWrap
|
||||
wrapperCol={{ flex: 1 }}
|
||||
colon={false}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item label="正常标签文案" name="username" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
|
||||
@ -12,19 +12,10 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
const formItemLayout =
|
||||
formLayout === 'horizontal'
|
||||
? {
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 14 },
|
||||
}
|
||||
: null;
|
||||
formLayout === 'horizontal' ? { labelCol: { span: 4 }, wrapperCol: { span: 14 } } : null;
|
||||
|
||||
const buttonItemLayout =
|
||||
formLayout === 'horizontal'
|
||||
? {
|
||||
wrapperCol: { span: 14, offset: 4 },
|
||||
}
|
||||
: null;
|
||||
formLayout === 'horizontal' ? { wrapperCol: { span: 14, offset: 4 } } : null;
|
||||
|
||||
return (
|
||||
<Form
|
||||
@ -33,6 +24,7 @@ const App: React.FC = () => {
|
||||
form={form}
|
||||
initialValues={{ layout: formLayout }}
|
||||
onValuesChange={onFormLayoutChange}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item label="Form Layout" name="layout">
|
||||
<Radio.Group value={formLayout}>
|
||||
|
||||
@ -19,35 +19,39 @@ const validateMessages = {
|
||||
};
|
||||
/* eslint-enable no-template-curly-in-string */
|
||||
|
||||
const App: React.FC = () => {
|
||||
const onFinish = (values: any) => {
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
|
||||
<Form.Item name={['user', 'name']} label="Name" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name={['user', 'email']} label="Email" rules={[{ type: 'email' }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name={['user', 'age']} label="Age" rules={[{ type: 'number', min: 0, max: 99 }]}>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item name={['user', 'website']} label="Website">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name={['user', 'introduction']} label="Introduction">
|
||||
<Input.TextArea />
|
||||
</Form.Item>
|
||||
<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
const onFinish = (values: any) => {
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form
|
||||
{...layout}
|
||||
name="nest-messages"
|
||||
onFinish={onFinish}
|
||||
style={{ maxWidth: 600 }}
|
||||
validateMessages={validateMessages}
|
||||
>
|
||||
<Form.Item name={['user', 'name']} label="Name" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name={['user', 'email']} label="Email" rules={[{ type: 'email' }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name={['user', 'age']} label="Age" rules={[{ type: 'number', min: 0, max: 99 }]}>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item name={['user', 'website']} label="Website">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name={['user', 'introduction']} label="Introduction">
|
||||
<Input.TextArea />
|
||||
</Form.Item>
|
||||
<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -7,7 +7,7 @@ const App: React.FC = () => {
|
||||
const ref = React.useRef<InputRef>(null);
|
||||
|
||||
return (
|
||||
<Form form={form} initialValues={{ list: ['light'] }}>
|
||||
<Form form={form} initialValues={{ list: ['light'] }} style={{ maxWidth: 600 }}>
|
||||
<Form.Item name="test" label="test">
|
||||
<Input ref={ref} />
|
||||
</Form.Item>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import type { CascaderProps } from 'antd';
|
||||
import {
|
||||
AutoComplete,
|
||||
Button,
|
||||
@ -11,10 +11,17 @@ import {
|
||||
Row,
|
||||
Select,
|
||||
} from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const residences = [
|
||||
interface DataNodeType {
|
||||
value: string;
|
||||
label: string;
|
||||
children?: DataNodeType[];
|
||||
}
|
||||
|
||||
const residences: CascaderProps<DataNodeType>['options'] = [
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
@ -59,6 +66,7 @@ const formItemLayout = {
|
||||
sm: { span: 16 },
|
||||
},
|
||||
};
|
||||
|
||||
const tailFormItemLayout = {
|
||||
wrapperCol: {
|
||||
xs: {
|
||||
@ -118,10 +126,8 @@ const App: React.FC = () => {
|
||||
form={form}
|
||||
name="register"
|
||||
onFinish={onFinish}
|
||||
initialValues={{
|
||||
residence: ['zhejiang', 'hangzhou', 'xihu'],
|
||||
prefix: '86',
|
||||
}}
|
||||
initialValues={{ residence: ['zhejiang', 'hangzhou', 'xihu'], prefix: '86' }}
|
||||
style={{ maxWidth: 600 }}
|
||||
scrollToFirstError
|
||||
>
|
||||
<Form.Item
|
||||
|
||||
@ -29,6 +29,7 @@ const App: React.FC = () => {
|
||||
initialValues={{ size: componentSize }}
|
||||
onValuesChange={onFormLayoutChange}
|
||||
size={componentSize as SizeType}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item label="Form Size" name="size">
|
||||
<Radio.Group>
|
||||
@ -58,12 +59,7 @@ const App: React.FC = () => {
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
},
|
||||
],
|
||||
children: [{ value: 'hangzhou', label: 'Hangzhou' }],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -13,65 +13,65 @@ const formItemLayout = {
|
||||
sm: { span: 16 },
|
||||
},
|
||||
};
|
||||
|
||||
const config = {
|
||||
rules: [{ type: 'object' as const, required: true, message: 'Please select time!' }],
|
||||
};
|
||||
|
||||
const rangeConfig = {
|
||||
rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const onFinish = (fieldsValue: any) => {
|
||||
// Should format date value before submit.
|
||||
const rangeValue = fieldsValue['range-picker'];
|
||||
const rangeTimeValue = fieldsValue['range-time-picker'];
|
||||
const values = {
|
||||
...fieldsValue,
|
||||
'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
|
||||
'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
|
||||
'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
|
||||
'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
|
||||
'range-time-picker': [
|
||||
rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
|
||||
rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
|
||||
],
|
||||
'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
|
||||
};
|
||||
console.log('Received values of form: ', values);
|
||||
const onFinish = (fieldsValue: any) => {
|
||||
// Should format date value before submit.
|
||||
const rangeValue = fieldsValue['range-picker'];
|
||||
const rangeTimeValue = fieldsValue['range-time-picker'];
|
||||
const values = {
|
||||
...fieldsValue,
|
||||
'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
|
||||
'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
|
||||
'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
|
||||
'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
|
||||
'range-time-picker': [
|
||||
rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
|
||||
rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
|
||||
],
|
||||
'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
|
||||
};
|
||||
|
||||
return (
|
||||
<Form name="time_related_controls" {...formItemLayout} onFinish={onFinish}>
|
||||
<Form.Item name="date-picker" label="DatePicker" {...config}>
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
<Form.Item name="date-time-picker" label="DatePicker[showTime]" {...config}>
|
||||
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
|
||||
</Form.Item>
|
||||
<Form.Item name="month-picker" label="MonthPicker" {...config}>
|
||||
<DatePicker picker="month" />
|
||||
</Form.Item>
|
||||
<Form.Item name="range-picker" label="RangePicker" {...rangeConfig}>
|
||||
<RangePicker />
|
||||
</Form.Item>
|
||||
<Form.Item name="range-time-picker" label="RangePicker[showTime]" {...rangeConfig}>
|
||||
<RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
|
||||
</Form.Item>
|
||||
<Form.Item name="time-picker" label="TimePicker" {...config}>
|
||||
<TimePicker />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
wrapperCol={{
|
||||
xs: { span: 24, offset: 0 },
|
||||
sm: { span: 16, offset: 8 },
|
||||
}}
|
||||
>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
console.log('Received values of form: ', values);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form
|
||||
name="time_related_controls"
|
||||
{...formItemLayout}
|
||||
onFinish={onFinish}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item name="date-picker" label="DatePicker" {...config}>
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
<Form.Item name="date-time-picker" label="DatePicker[showTime]" {...config}>
|
||||
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
|
||||
</Form.Item>
|
||||
<Form.Item name="month-picker" label="MonthPicker" {...config}>
|
||||
<DatePicker picker="month" />
|
||||
</Form.Item>
|
||||
<Form.Item name="range-picker" label="RangePicker" {...rangeConfig}>
|
||||
<RangePicker />
|
||||
</Form.Item>
|
||||
<Form.Item name="range-time-picker" label="RangePicker[showTime]" {...rangeConfig}>
|
||||
<RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
|
||||
</Form.Item>
|
||||
<Form.Item name="time-picker" label="TimePicker" {...config}>
|
||||
<TimePicker />
|
||||
</Form.Item>
|
||||
<Form.Item wrapperCol={{ xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 8 } }}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Form, Input, InputNumber, Typography } from 'antd';
|
||||
|
||||
const Demo = () => {
|
||||
const Demo: React.FC = () => {
|
||||
const [form] = Form.useForm<{ name: string; age: number }>();
|
||||
const nameValue = Form.useWatch('name', form);
|
||||
|
||||
|
||||
@ -30,167 +30,162 @@ const normFile = (e: any) => {
|
||||
return e?.fileList;
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Received values of form: ', values);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form
|
||||
name="validate_other"
|
||||
{...formItemLayout}
|
||||
onFinish={onFinish}
|
||||
initialValues={{
|
||||
'input-number': 3,
|
||||
'checkbox-group': ['A', 'B'],
|
||||
rate: 3.5,
|
||||
}}
|
||||
>
|
||||
<Form.Item label="Plain Text">
|
||||
<span className="ant-form-text">China</span>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="select"
|
||||
label="Select"
|
||||
hasFeedback
|
||||
rules={[{ required: true, message: 'Please select your country!' }]}
|
||||
>
|
||||
<Select placeholder="Please select a country">
|
||||
<Option value="china">China</Option>
|
||||
<Option value="usa">U.S.A</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="select-multiple"
|
||||
label="Select[multiple]"
|
||||
rules={[{ required: true, message: 'Please select your favourite colors!', type: 'array' }]}
|
||||
>
|
||||
<Select mode="multiple" placeholder="Please select favourite colors">
|
||||
<Option value="red">Red</Option>
|
||||
<Option value="green">Green</Option>
|
||||
<Option value="blue">Blue</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="InputNumber">
|
||||
<Form.Item name="input-number" noStyle>
|
||||
<InputNumber min={1} max={10} />
|
||||
</Form.Item>
|
||||
<span className="ant-form-text" style={{ marginLeft: 8 }}>
|
||||
machines
|
||||
</span>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="switch" label="Switch" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="slider" label="Slider">
|
||||
<Slider
|
||||
marks={{
|
||||
0: 'A',
|
||||
20: 'B',
|
||||
40: 'C',
|
||||
60: 'D',
|
||||
80: 'E',
|
||||
100: 'F',
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="radio-group" label="Radio.Group">
|
||||
<Radio.Group>
|
||||
<Radio value="a">item 1</Radio>
|
||||
<Radio value="b">item 2</Radio>
|
||||
<Radio value="c">item 3</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="radio-button"
|
||||
label="Radio.Button"
|
||||
rules={[{ required: true, message: 'Please pick an item!' }]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio.Button value="a">item 1</Radio.Button>
|
||||
<Radio.Button value="b">item 2</Radio.Button>
|
||||
<Radio.Button value="c">item 3</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="checkbox-group" label="Checkbox.Group">
|
||||
<Checkbox.Group>
|
||||
<Row>
|
||||
<Col span={8}>
|
||||
<Checkbox value="A" style={{ lineHeight: '32px' }}>
|
||||
A
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="B" style={{ lineHeight: '32px' }} disabled>
|
||||
B
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="C" style={{ lineHeight: '32px' }}>
|
||||
C
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="D" style={{ lineHeight: '32px' }}>
|
||||
D
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="E" style={{ lineHeight: '32px' }}>
|
||||
E
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="F" style={{ lineHeight: '32px' }}>
|
||||
F
|
||||
</Checkbox>
|
||||
</Col>
|
||||
</Row>
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="rate" label="Rate">
|
||||
<Rate />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="upload"
|
||||
label="Upload"
|
||||
valuePropName="fileList"
|
||||
getValueFromEvent={normFile}
|
||||
extra="longgggggggggggggggggggggggggggggggggg"
|
||||
>
|
||||
<Upload name="logo" action="/upload.do" listType="picture">
|
||||
<Button icon={<UploadOutlined />}>Click to upload</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="Dragger">
|
||||
<Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
|
||||
<Upload.Dragger name="files" action="/upload.do">
|
||||
<p className="ant-upload-drag-icon">
|
||||
<InboxOutlined />
|
||||
</p>
|
||||
<p className="ant-upload-text">Click or drag file to this area to upload</p>
|
||||
<p className="ant-upload-hint">Support for a single or bulk upload.</p>
|
||||
</Upload.Dragger>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item wrapperCol={{ span: 12, offset: 6 }}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Received values of form: ', values);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form
|
||||
name="validate_other"
|
||||
{...formItemLayout}
|
||||
onFinish={onFinish}
|
||||
initialValues={{ 'input-number': 3, 'checkbox-group': ['A', 'B'], rate: 3.5 }}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item label="Plain Text">
|
||||
<span className="ant-form-text">China</span>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="select"
|
||||
label="Select"
|
||||
hasFeedback
|
||||
rules={[{ required: true, message: 'Please select your country!' }]}
|
||||
>
|
||||
<Select placeholder="Please select a country">
|
||||
<Option value="china">China</Option>
|
||||
<Option value="usa">U.S.A</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="select-multiple"
|
||||
label="Select[multiple]"
|
||||
rules={[{ required: true, message: 'Please select your favourite colors!', type: 'array' }]}
|
||||
>
|
||||
<Select mode="multiple" placeholder="Please select favourite colors">
|
||||
<Option value="red">Red</Option>
|
||||
<Option value="green">Green</Option>
|
||||
<Option value="blue">Blue</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="InputNumber">
|
||||
<Form.Item name="input-number" noStyle>
|
||||
<InputNumber min={1} max={10} />
|
||||
</Form.Item>
|
||||
<span className="ant-form-text" style={{ marginLeft: 8 }}>
|
||||
machines
|
||||
</span>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="switch" label="Switch" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="slider" label="Slider">
|
||||
<Slider
|
||||
marks={{
|
||||
0: 'A',
|
||||
20: 'B',
|
||||
40: 'C',
|
||||
60: 'D',
|
||||
80: 'E',
|
||||
100: 'F',
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="radio-group" label="Radio.Group">
|
||||
<Radio.Group>
|
||||
<Radio value="a">item 1</Radio>
|
||||
<Radio value="b">item 2</Radio>
|
||||
<Radio value="c">item 3</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="radio-button"
|
||||
label="Radio.Button"
|
||||
rules={[{ required: true, message: 'Please pick an item!' }]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio.Button value="a">item 1</Radio.Button>
|
||||
<Radio.Button value="b">item 2</Radio.Button>
|
||||
<Radio.Button value="c">item 3</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="checkbox-group" label="Checkbox.Group">
|
||||
<Checkbox.Group>
|
||||
<Row>
|
||||
<Col span={8}>
|
||||
<Checkbox value="A" style={{ lineHeight: '32px' }}>
|
||||
A
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="B" style={{ lineHeight: '32px' }} disabled>
|
||||
B
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="C" style={{ lineHeight: '32px' }}>
|
||||
C
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="D" style={{ lineHeight: '32px' }}>
|
||||
D
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="E" style={{ lineHeight: '32px' }}>
|
||||
E
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="F" style={{ lineHeight: '32px' }}>
|
||||
F
|
||||
</Checkbox>
|
||||
</Col>
|
||||
</Row>
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="rate" label="Rate">
|
||||
<Rate />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="upload"
|
||||
label="Upload"
|
||||
valuePropName="fileList"
|
||||
getValueFromEvent={normFile}
|
||||
extra="longgggggggggggggggggggggggggggggggggg"
|
||||
>
|
||||
<Upload name="logo" action="/upload.do" listType="picture">
|
||||
<Button icon={<UploadOutlined />}>Click to upload</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="Dragger">
|
||||
<Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
|
||||
<Upload.Dragger name="files" action="/upload.do">
|
||||
<p className="ant-upload-drag-icon">
|
||||
<InboxOutlined />
|
||||
</p>
|
||||
<p className="ant-upload-text">Click or drag file to this area to upload</p>
|
||||
<p className="ant-upload-hint">Support for a single or bulk upload.</p>
|
||||
</Upload.Dragger>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item wrapperCol={{ span: 12, offset: 6 }}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -26,7 +26,7 @@ const formItemLayout = {
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form {...formItemLayout}>
|
||||
<Form {...formItemLayout} style={{ maxWidth: 600 }}>
|
||||
<Form.Item
|
||||
label="Fail"
|
||||
validateStatus="error"
|
||||
|
||||
@ -26,17 +26,15 @@ const formItemLayout = {
|
||||
wrapperCol: { span: 12 },
|
||||
};
|
||||
|
||||
const tips =
|
||||
'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [number, setNumber] = useState<{
|
||||
value: number;
|
||||
validateStatus?: ValidateStatus;
|
||||
errorMsg?: string | null;
|
||||
}>({
|
||||
value: 11,
|
||||
});
|
||||
|
||||
const tips =
|
||||
'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
|
||||
}>({ value: 11 });
|
||||
|
||||
const onNumberChange = (value: number) => {
|
||||
setNumber({
|
||||
@ -46,7 +44,7 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Form>
|
||||
<Form style={{ maxWidth: 600 }}>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Prime between 8 & 12"
|
||||
|
||||
@ -441,16 +441,6 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
||||
| warningOnly | Warning only. Not block form submit | boolean | 4.17.0 |
|
||||
| whitespace | Failed if only has whitespace, only work with `type: 'string'` rule | boolean | |
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
|
||||
max-width: 600px;
|
||||
}
|
||||
.markdown.api-container table td:nth-of-type(4) {
|
||||
white-space: nowrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
## FAQ
|
||||
|
||||
### Custom validator not working
|
||||
@ -540,12 +530,9 @@ dependencies should be `['users', 0, 'name']`
|
||||
React can not get correct interaction of controlled component with async value update. When user trigger `onChange`, component will do no response since `value` update is async. If you want to trigger value update async, you should use customize component to handle value state internal and pass sync value control to Form instead.
|
||||
|
||||
<style>
|
||||
.site-form-item-icon {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
[data-theme="dark"] .site-form-item-icon {
|
||||
color: rgba(255,255,255,.3);
|
||||
}
|
||||
.site-form-item-icon {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
</style>
|
||||
|
||||
### `scrollToFirstError` and `scrollToField` not working on custom form control?
|
||||
|
||||
@ -440,16 +440,6 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
||||
| warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
|
||||
| whitespace | 如果字段仅包含空格则校验不通过，只在 `type: 'string'` 时生效 | boolean | |
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
|
||||
max-width: 600px;
|
||||
}
|
||||
.markdown.api-container table td:nth-of-type(4) {
|
||||
white-space: nowrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
## FAQ
|
||||
|
||||
### 自定义 validator 没有效果
|
||||
@ -539,12 +529,9 @@ Form.List 下的字段需要包裹 Form.List 本身的 `name`，比如：
|
||||
React 中异步更新会导致受控组件交互行为异常。当用户交互触发 `onChange` 后，通过异步改变值会导致组件 `value` 不会立刻更新，使得组件呈现假死状态。如果你需要异步触发变更，请通过自定义组件实现内部异步状态。
|
||||
|
||||
<style>
|
||||
.site-form-item-icon {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
[data-theme="dark"] .site-form-item-icon {
|
||||
color: rgba(255,255,255,.3);
|
||||
}
|
||||
.site-form-item-icon {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
</style>
|
||||
|
||||
### 自定义表单控件 `scrollToFirstError` 和 `scrollToField` 失效？
|
||||
|
||||
@ -24,9 +24,3 @@ You can use an array to set vertical spacing, `[horizontal, vertical]` `[16, { x
|
||||
background: #00a0e9;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .gutter-box {
|
||||
background: #028ac8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -31,9 +31,3 @@ A simple playground for column count and gutter.
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] #components-grid-demo-playground [class~='ant-col'] > div {
|
||||
background: #028ac8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -84,10 +84,3 @@ If the Ant Design grid layout component does not meet your needs, you can use th
|
||||
You can modify the breakpoints values using by modifying `screen[XS|SM|MD|LG|XL|XXL]` with [theme customization](/docs/react/customize-theme) (since 5.1.0, [sandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)).
|
||||
|
||||
The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) (not including `occasionally part`).
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] #components-grid-demo-playground pre {
|
||||
background: rgba(255,255,255,0.8);
|
||||
color: rgba(255,255,255,.65);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -83,10 +83,3 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
|
||||
您可以使用 [主题定制](/docs/react/customize-theme-cn) 修改 `screen[XS|SM|MD|LG|XL|XXL]` 来修改断点值（自 5.1.0 起，[codesandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)）。
|
||||
|
||||
响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] #components-grid-demo-playground pre {
|
||||
background: rgba(255,255,255,0.08);
|
||||
color: rgba(255,255,255,.65);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -33,9 +33,3 @@ Note: You don't need `Col` to control the width in the `compact` mode.
|
||||
border-right-width: 1px;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-input-group-wrapper .site-input-split {
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,31 +5,3 @@
|
||||
## en-US
|
||||
|
||||
Classic page layouts.
|
||||
|
||||
<style>
|
||||
#components-layout-demo-basic .code-box-demo {
|
||||
text-align: center;
|
||||
}
|
||||
#components-layout-demo-basic .ant-layout-header,
|
||||
#components-layout-demo-basic .ant-layout-footer {
|
||||
color: #fff;
|
||||
background: #7dbcea;
|
||||
}
|
||||
#components-layout-demo-basic .ant-layout-footer {
|
||||
line-height: 1.5;
|
||||
}
|
||||
#components-layout-demo-basic .ant-layout-sider {
|
||||
color: #fff;
|
||||
line-height: 120px;
|
||||
background: #3ba0e9;
|
||||
}
|
||||
#components-layout-demo-basic .ant-layout-content {
|
||||
min-height: 120px;
|
||||
color: #fff;
|
||||
line-height: 120px;
|
||||
background: rgba(16, 142, 233, 1);
|
||||
}
|
||||
#components-layout-demo-basic > .code-box-demo > .ant-layout + .ant-layout {
|
||||
margin-top: 48px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,13 +5,3 @@
|
||||
## en-US
|
||||
|
||||
Basic modal.
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] #table-demo-summary tfoot th,
|
||||
[data-theme="dark"] #table-demo-summary tfoot td {
|
||||
background: #272727;
|
||||
}
|
||||
[data-theme="dark"] #components-transfer-table.ant-table td {
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -521,9 +521,7 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/popconfirm/demo/placement.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="demo"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
style="margin-left:70px;white-space:nowrap"
|
||||
>
|
||||
@ -815,7 +813,7 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="width:70px;float:left"
|
||||
>
|
||||
@ -1107,7 +1105,7 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="width:70px;margin-left:304px"
|
||||
>
|
||||
@ -1399,7 +1397,7 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="margin-left:70px;clear:both;white-space:nowrap"
|
||||
>
|
||||
@ -1691,8 +1689,8 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/popconfirm/demo/promise.tsx extend context correctly 1`] = `
|
||||
|
||||
@ -69,9 +69,7 @@ exports[`renders ./components/popconfirm/demo/locale.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/popconfirm/demo/placement.tsx correctly 1`] = `
|
||||
<div
|
||||
class="demo"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
style="margin-left:70px;white-space:nowrap"
|
||||
>
|
||||
@ -99,7 +97,7 @@ exports[`renders ./components/popconfirm/demo/placement.tsx correctly 1`] = `
|
||||
TR
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="width:70px;float:left"
|
||||
>
|
||||
@ -127,7 +125,7 @@ exports[`renders ./components/popconfirm/demo/placement.tsx correctly 1`] = `
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="width:70px;margin-left:304px"
|
||||
>
|
||||
@ -155,7 +153,7 @@ exports[`renders ./components/popconfirm/demo/placement.tsx correctly 1`] = `
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="margin-left:70px;clear:both;white-space:nowrap"
|
||||
>
|
||||
@ -183,8 +181,8 @@ exports[`renders ./components/popconfirm/demo/placement.tsx correctly 1`] = `
|
||||
BR
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/popconfirm/demo/promise.tsx correctly 1`] = `
|
||||
|
||||
@ -7,17 +7,16 @@
|
||||
There are 12 `placement` options available. Use `arrowPointAtCenter` if you want the arrow to point at the center of target.
|
||||
|
||||
<style>
|
||||
#components-popconfirm-demo-placement .demo {
|
||||
overflow: auto;
|
||||
}
|
||||
#components-popconfirm-demo-placement .ant-popover-wrap > a {
|
||||
margin-right: 8px;
|
||||
}
|
||||
#components-popconfirm-demo-placement .ant-btn {
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
#components-popconfirm-demo-placement .ant-btn-rtl {
|
||||
margin-left: 8px;
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Button, message, Popconfirm } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const text = 'Are you sure to delete this task?';
|
||||
const description = 'Delete the task';
|
||||
@ -9,7 +9,7 @@ const confirm = () => {
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div className="demo">
|
||||
<>
|
||||
<div style={{ marginLeft: 70, whiteSpace: 'nowrap' }}>
|
||||
<Popconfirm
|
||||
placement="topLeft"
|
||||
@ -138,7 +138,7 @@ const App: React.FC = () => (
|
||||
<Button>BR</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,100 +1,113 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/popover/demo/arrow-point-at-center.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="flex-wrap:wrap;margin-bottom:-8px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<span>
|
||||
Align edge / 边缘对齐
|
||||
</span>
|
||||
</button>,
|
||||
<div>
|
||||
<div
|
||||
class="ant-popover"
|
||||
style="opacity:0"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Align edge / 边缘对齐
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
class="ant-popover-content"
|
||||
class="ant-popover"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
class="ant-popover-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-title"
|
||||
class="ant-popover-arrow"
|
||||
>
|
||||
Title
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<div
|
||||
class="ant-popover-title"
|
||||
>
|
||||
Title
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="padding-bottom:8px"
|
||||
>
|
||||
<span>
|
||||
Arrow points to center / 箭头指向中心
|
||||
</span>
|
||||
</button>,
|
||||
<div>
|
||||
<div
|
||||
class="ant-popover"
|
||||
style="opacity:0"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Arrow points to center / 箭头指向中心
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
class="ant-popover-content"
|
||||
class="ant-popover"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
class="ant-popover-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-title"
|
||||
class="ant-popover-arrow"
|
||||
>
|
||||
Title
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<div
|
||||
class="ant-popover-title"
|
||||
>
|
||||
Title
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/popover/demo/basic.tsx extend context correctly 1`] = `
|
||||
@ -287,9 +300,7 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/popover/demo/placement.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="demo"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="margin-left:70px;white-space:nowrap"
|
||||
>
|
||||
@ -983,145 +994,163 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/popover/demo/triggerType.tsx extend context correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="flex-wrap:wrap;margin-bottom:-8px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<span>
|
||||
Hover me
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
class="ant-popover"
|
||||
style="opacity:0"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Hover me
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
class="ant-popover-content"
|
||||
class="ant-popover"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
class="ant-popover-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-title"
|
||||
class="ant-popover-arrow"
|
||||
>
|
||||
Title
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<div
|
||||
class="ant-popover-title"
|
||||
>
|
||||
Title
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<span>
|
||||
Focus me
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
class="ant-popover"
|
||||
style="opacity:0"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Focus me
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
class="ant-popover-content"
|
||||
class="ant-popover"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
class="ant-popover-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-title"
|
||||
class="ant-popover-arrow"
|
||||
>
|
||||
Title
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<div
|
||||
class="ant-popover-title"
|
||||
>
|
||||
Title
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="padding-bottom:8px"
|
||||
>
|
||||
<span>
|
||||
Click me
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
class="ant-popover"
|
||||
style="opacity:0"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Click me
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
class="ant-popover-content"
|
||||
class="ant-popover"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
class="ant-popover-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-title"
|
||||
class="ant-popover-arrow"
|
||||
>
|
||||
Title
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<div
|
||||
class="ant-popover-title"
|
||||
>
|
||||
Title
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,24 +1,37 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/popover/demo/arrow-point-at-center.tsx correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="flex-wrap:wrap;margin-bottom:-8px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<span>
|
||||
Align edge / 边缘对齐
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Align edge / 边缘对齐
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="padding-bottom:8px"
|
||||
>
|
||||
<span>
|
||||
Arrow points to center / 箭头指向中心
|
||||
</span>
|
||||
</button>,
|
||||
]
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Arrow points to center / 箭头指向中心
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/popover/demo/basic.tsx correctly 1`] = `
|
||||
@ -55,9 +68,7 @@ exports[`renders ./components/popover/demo/hover-with-click.tsx correctly 1`] =
|
||||
`;
|
||||
|
||||
exports[`renders ./components/popover/demo/placement.tsx correctly 1`] = `
|
||||
<div
|
||||
class="demo"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="margin-left:70px;white-space:nowrap"
|
||||
>
|
||||
@ -247,31 +258,49 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/popover/demo/triggerType.tsx correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="flex-wrap:wrap;margin-bottom:-8px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<span>
|
||||
Hover me
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Hover me
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<span>
|
||||
Focus me
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Focus me
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="padding-bottom:8px"
|
||||
>
|
||||
<span>
|
||||
Click me
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Click me
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Button, Popover, Space } from 'antd';
|
||||
import React from 'react';
|
||||
import { Button, Popover } from 'antd';
|
||||
|
||||
const content = (
|
||||
<>
|
||||
@ -9,14 +9,14 @@ const content = (
|
||||
);
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space wrap>
|
||||
<Popover placement="topLeft" title="Title" content={content}>
|
||||
<Button>Align edge / 边缘对齐</Button>
|
||||
</Popover>
|
||||
<Popover placement="topLeft" title="Title" content={content} arrowPointAtCenter>
|
||||
<Button>Arrow points to center / 箭头指向中心</Button>
|
||||
</Popover>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -7,21 +7,16 @@
|
||||
There are 12 `placement` options available.
|
||||
|
||||
<style>
|
||||
.code-box-demo .demo {
|
||||
overflow: auto;
|
||||
}
|
||||
.code-box-demo .ant-btn {
|
||||
#components-popover-demo-placement .ant-btn {
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.code-box-demo .ant-btn-rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
#components-popover-demo-placement .ant-btn {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
#components-popover-demo-placement .ant-btn {
|
||||
margin-left: 8px;
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Button, Popover } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const text = <span>Title</span>;
|
||||
|
||||
const content = (
|
||||
<div>
|
||||
<p>Content</p>
|
||||
@ -12,7 +13,7 @@ const content = (
|
||||
const buttonWidth = 70;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div className="demo">
|
||||
<div>
|
||||
<div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="topLeft" title={text} content={content} trigger="click">
|
||||
<Button>TL</Button>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Button, Popover, Space } from 'antd';
|
||||
import React from 'react';
|
||||
import { Button, Popover } from 'antd';
|
||||
|
||||
const content = (
|
||||
<div>
|
||||
@ -9,7 +9,7 @@ const content = (
|
||||
);
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div>
|
||||
<Space wrap>
|
||||
<Popover content={content} title="Title" trigger="hover">
|
||||
<Button>Hover me</Button>
|
||||
</Popover>
|
||||
@ -19,7 +19,7 @@ const App: React.FC = () => (
|
||||
<Popover content={content} title="Title" trigger="click">
|
||||
<Button>Click me</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -11,9 +11,3 @@ Complex error feedback.
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-result-demo-error-icon {
|
||||
color: #a61d24;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -5,13 +5,3 @@
|
||||
## en-US
|
||||
|
||||
The most basic usage.
|
||||
|
||||
```css
|
||||
.code-box-demo {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.code-box-demo .ant-segmented {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Segmented } from 'antd';
|
||||
import { Avatar, Segmented, Space } from 'antd';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
|
||||
export default () => (
|
||||
<>
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical">
|
||||
<Segmented
|
||||
options={[
|
||||
{
|
||||
@ -35,7 +35,6 @@ export default () => (
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<br />
|
||||
<Segmented
|
||||
options={[
|
||||
{
|
||||
@ -76,5 +75,7 @@ export default () => (
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import React from 'react';
|
||||
import { Segmented } from 'antd';
|
||||
import { Segmented, Space } from 'antd';
|
||||
|
||||
export default () => (
|
||||
<>
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical">
|
||||
<Segmented options={['Map', 'Transit', 'Satellite']} disabled />
|
||||
<br />
|
||||
<Segmented
|
||||
options={[
|
||||
'Daily',
|
||||
@ -14,5 +13,7 @@ export default () => (
|
||||
'Yearly',
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,25 +1,22 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Segmented, Button } from 'antd';
|
||||
|
||||
const defaultOptions = ['Daily', 'Weekly', 'Monthly'];
|
||||
import { Segmented, Button, Space } from 'antd';
|
||||
|
||||
const Demo: React.FC = () => {
|
||||
const [options, setOptions] = useState(defaultOptions);
|
||||
const [options, setOptions] = useState(['Daily', 'Weekly', 'Monthly']);
|
||||
const [moreLoaded, setMoreLoaded] = useState(false);
|
||||
|
||||
const handleLoadOptions = () => {
|
||||
setOptions([...defaultOptions, 'Quarterly', 'Yearly']);
|
||||
setOptions((prev) => [...prev, 'Quarterly', 'Yearly']);
|
||||
setMoreLoaded(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Space direction="vertical">
|
||||
<Segmented options={options} />
|
||||
<br />
|
||||
<Button type="primary" disabled={moreLoaded} onClick={handleLoadOptions}>
|
||||
Load more options
|
||||
</Button>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Button, Input, Select, Segmented } from 'antd';
|
||||
import { Button, Input, Select, Segmented, Space } from 'antd';
|
||||
|
||||
export default () => (
|
||||
<>
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical">
|
||||
<div>
|
||||
<Segmented style={{ marginRight: 6 }} size="large" options={['Daily', 'Weekly', 'Monthly']} />
|
||||
<Button type="primary" size="large">
|
||||
@ -19,5 +19,7 @@ export default () => (
|
||||
<Select.Option value="lucy">Lucy</Select.Option>
|
||||
</Select>
|
||||
</div>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React from 'react';
|
||||
import { Segmented } from 'antd';
|
||||
import { Segmented, Space } from 'antd';
|
||||
|
||||
export default () => (
|
||||
<>
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical">
|
||||
<Segmented size="large" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
|
||||
<br />
|
||||
<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
|
||||
<br />
|
||||
<Segmented size="small" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -964,131 +964,139 @@ exports[`renders ./components/select/demo/basic.tsx extend context correctly 1`]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/select/demo/bordered.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="flex-wrap:wrap;margin-bottom:-8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-borderless ant-select-single ant-select-show-arrow"
|
||||
style="width:120px"
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
class="ant-select ant-select-borderless ant-select-single ant-select-show-arrow"
|
||||
style="width:120px"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-select-dropdown"
|
||||
style="opacity:0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
id="undefined_list"
|
||||
role="listbox"
|
||||
style="height:0;width:0;overflow:hidden"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-select-dropdown"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-label="Jack"
|
||||
aria-selected="false"
|
||||
id="undefined_list_0"
|
||||
role="option"
|
||||
id="undefined_list"
|
||||
role="listbox"
|
||||
style="height:0;width:0;overflow:hidden"
|
||||
>
|
||||
jack
|
||||
<div
|
||||
aria-label="Jack"
|
||||
aria-selected="false"
|
||||
id="undefined_list_0"
|
||||
role="option"
|
||||
>
|
||||
jack
|
||||
</div>
|
||||
<div
|
||||
aria-label="Lucy"
|
||||
aria-selected="true"
|
||||
id="undefined_list_1"
|
||||
role="option"
|
||||
>
|
||||
lucy
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Lucy"
|
||||
aria-selected="true"
|
||||
id="undefined_list_1"
|
||||
role="option"
|
||||
class="rc-virtual-list"
|
||||
style="position:relative"
|
||||
>
|
||||
lucy
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rc-virtual-list"
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
class="rc-virtual-list-holder"
|
||||
style="max-height:256px;overflow-y:auto;overflow-anchor:none"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="rc-virtual-list-holder-inner"
|
||||
style="display:flex;flex-direction:column"
|
||||
>
|
||||
<div
|
||||
class="rc-virtual-list-holder"
|
||||
style="max-height:256px;overflow-y:auto;overflow-anchor:none"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active"
|
||||
title="Jack"
|
||||
class="rc-virtual-list-holder-inner"
|
||||
style="display:flex;flex-direction:column"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active"
|
||||
title="Jack"
|
||||
>
|
||||
Jack
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
Jack
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-selected"
|
||||
title="Lucy"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-selected"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
Lucy
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="yiminghe"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="yiminghe"
|
||||
>
|
||||
yiminghe
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
yiminghe
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1096,118 +1104,123 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</span>
|
||||
</div>,
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select ant-select-borderless ant-select-single ant-select-show-arrow ant-select-disabled"
|
||||
style="width:120px"
|
||||
class="ant-space-item"
|
||||
style="padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
class="ant-select ant-select-borderless ant-select-single ant-select-show-arrow ant-select-disabled"
|
||||
style="width:120px"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
disabled=""
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-select-dropdown"
|
||||
style="opacity:0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
id="undefined_list"
|
||||
role="listbox"
|
||||
style="height:0;width:0;overflow:hidden"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
disabled=""
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-select-dropdown"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-label="Lucy"
|
||||
aria-selected="true"
|
||||
id="undefined_list_0"
|
||||
role="option"
|
||||
id="undefined_list"
|
||||
role="listbox"
|
||||
style="height:0;width:0;overflow:hidden"
|
||||
>
|
||||
lucy
|
||||
<div
|
||||
aria-label="Lucy"
|
||||
aria-selected="true"
|
||||
id="undefined_list_0"
|
||||
role="option"
|
||||
>
|
||||
lucy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rc-virtual-list"
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
class="rc-virtual-list-holder"
|
||||
style="max-height:256px;overflow-y:auto;overflow-anchor:none"
|
||||
class="rc-virtual-list"
|
||||
style="position:relative"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="rc-virtual-list-holder-inner"
|
||||
style="display:flex;flex-direction:column"
|
||||
>
|
||||
<div
|
||||
class="rc-virtual-list-holder"
|
||||
style="max-height:256px;overflow-y:auto;overflow-anchor:none"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
||||
title="Lucy"
|
||||
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="Lucy"
|
||||
>
|
||||
Lucy
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
Lucy
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1215,35 +1228,35 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</span>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/select/demo/coordinate.tsx extend context correctly 1`] = `
|
||||
|
||||
@ -473,130 +473,143 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/select/demo/bordered.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="flex-wrap:wrap;margin-bottom:-8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-borderless ant-select-single ant-select-show-arrow"
|
||||
style="width:120px"
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
class="ant-select ant-select-borderless ant-select-single ant-select-show-arrow"
|
||||
style="width:120px"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Lucy"
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
Lucy
|
||||
<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>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-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>
|
||||
<div
|
||||
class="ant-select ant-select-borderless ant-select-single ant-select-show-arrow ant-select-disabled"
|
||||
style="width:120px"
|
||||
class="ant-space-item"
|
||||
style="padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
class="ant-select ant-select-borderless ant-select-single ant-select-show-arrow ant-select-disabled"
|
||||
style="width:120px"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
disabled=""
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
disabled=""
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Lucy"
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
Lucy
|
||||
<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>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-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>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/select/demo/coordinate.tsx correctly 1`] = `
|
||||
|
||||
@ -1,25 +1,16 @@
|
||||
import { Select, Space } from 'antd';
|
||||
import React from 'react';
|
||||
import { Select } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space wrap>
|
||||
<Select
|
||||
defaultValue="lucy"
|
||||
style={{ width: 120 }}
|
||||
bordered={false}
|
||||
options={[
|
||||
{
|
||||
value: 'jack',
|
||||
label: 'Jack',
|
||||
},
|
||||
{
|
||||
value: 'lucy',
|
||||
label: 'Lucy',
|
||||
},
|
||||
{
|
||||
value: 'Yiminghe',
|
||||
label: 'yiminghe',
|
||||
},
|
||||
{ value: 'jack', label: 'Jack' },
|
||||
{ value: 'lucy', label: 'Lucy' },
|
||||
{ value: 'Yiminghe', label: 'yiminghe' },
|
||||
]}
|
||||
/>
|
||||
<Select
|
||||
@ -27,14 +18,9 @@ const App: React.FC = () => (
|
||||
style={{ width: 120 }}
|
||||
disabled
|
||||
bordered={false}
|
||||
options={[
|
||||
{
|
||||
value: 'lucy',
|
||||
label: 'Lucy',
|
||||
},
|
||||
]}
|
||||
options={[{ value: 'lucy', label: 'Lucy' }]}
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -34,12 +34,3 @@ You can add an icon beside the slider to make it meaningful.
|
||||
right: 0;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .icon-wrapper .anticon {
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
[data-theme="dark"] .icon-wrapper .icon-wrapper-active {
|
||||
color: rgba(255, 255, 255, .45);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,12 +14,4 @@ Input addon debug.
|
||||
.select-after {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
[data-theme='compact'] .select-before {
|
||||
width: 71px;
|
||||
}
|
||||
|
||||
[data-theme='compact'] .select-after {
|
||||
width: 65px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,17 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
嵌套使用的紧凑布局
|
||||
嵌套使用的紧凑布局。
|
||||
|
||||
## en-US
|
||||
|
||||
Nested `Space.Compact`
|
||||
|
||||
```css
|
||||
[data-theme='compact'] .select-before {
|
||||
width: 71px;
|
||||
}
|
||||
|
||||
[data-theme='compact'] .select-after {
|
||||
width: 65px;
|
||||
}
|
||||
```
|
||||
Nested `Space.Compact`.
|
||||
|
||||
@ -5,19 +5,3 @@
|
||||
## en-US
|
||||
|
||||
Navigation steps.
|
||||
|
||||
```css
|
||||
[data-theme='compact'] .site-navigation-steps.ant-steps.ant-steps-navigation,
|
||||
.site-navigation-steps.ant-steps.ant-steps-navigation {
|
||||
margin-bottom: 60px;
|
||||
box-shadow: 0px -1px 0 0 #e8e8e8 inset;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-navigation-steps.ant-steps.ant-steps-navigation {
|
||||
border-bottom: 1px solid #303030;
|
||||
margin-bottom: 60px;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,8 +21,4 @@ Table with editable cells. When work with `shouldCellUpdate`, please take care o
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
|
||||
border: 1px solid #434343;
|
||||
}
|
||||
```
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,135 +1,152 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/time-picker/demo/12hours.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="flex-wrap:wrap;margin-bottom:-8px"
|
||||
>
|
||||
<div
|
||||
class="ant-picker"
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
class="ant-picker"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-picker-suffix"
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="clock-circle"
|
||||
class="anticon anticon-clock-circle"
|
||||
role="img"
|
||||
class="ant-picker-suffix"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="clock-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="clock-circle"
|
||||
class="anticon anticon-clock-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="clock-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker"
|
||||
style="width:140px"
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
class="ant-picker"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="11"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-picker-suffix"
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="11"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="clock-circle"
|
||||
class="anticon anticon-clock-circle"
|
||||
role="img"
|
||||
class="ant-picker-suffix"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="clock-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="clock-circle"
|
||||
class="anticon anticon-clock-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="clock-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker"
|
||||
class="ant-space-item"
|
||||
style="padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
class="ant-picker"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-picker-suffix"
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="clock-circle"
|
||||
class="anticon anticon-clock-circle"
|
||||
role="img"
|
||||
class="ant-picker-suffix"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="clock-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="clock-circle"
|
||||
class="anticon anticon-clock-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="clock-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/time-picker/demo/addon.tsx correctly 1`] = `
|
||||
@ -696,206 +713,224 @@ exports[`renders ./components/time-picker/demo/render-panel.tsx correctly 1`] =
|
||||
`;
|
||||
|
||||
exports[`renders ./components/time-picker/demo/size.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="flex-wrap:wrap;margin-bottom:-8px"
|
||||
>
|
||||
<div
|
||||
class="ant-picker ant-picker-large"
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
class="ant-picker ant-picker-large"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-picker-suffix"
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="clock-circle"
|
||||
class="anticon anticon-clock-circle"
|
||||
role="img"
|
||||
class="ant-picker-suffix"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="clock-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="clock-circle"
|
||||
class="anticon anticon-clock-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="clock-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-picker-clear"
|
||||
role="button"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
class="ant-picker-clear"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker"
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
class="ant-picker"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-picker-suffix"
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="clock-circle"
|
||||
class="anticon anticon-clock-circle"
|
||||
role="img"
|
||||
class="ant-picker-suffix"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="clock-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="clock-circle"
|
||||
class="anticon anticon-clock-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="clock-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-picker-clear"
|
||||
role="button"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
class="ant-picker-clear"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker ant-picker-small"
|
||||
class="ant-space-item"
|
||||
style="padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
class="ant-picker ant-picker-small"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-picker-suffix"
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="clock-circle"
|
||||
class="anticon anticon-clock-circle"
|
||||
role="img"
|
||||
class="ant-picker-suffix"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="clock-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="clock-circle"
|
||||
class="anticon anticon-clock-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="clock-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-picker-clear"
|
||||
role="button"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
class="ant-picker-clear"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/time-picker/demo/status.tsx correctly 1`] = `
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { TimePicker } from 'antd';
|
||||
import { Space, TimePicker } from 'antd';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
const onChange = (time: Dayjs, timeString: string) => {
|
||||
@ -7,11 +7,11 @@ const onChange = (time: Dayjs, timeString: string) => {
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space wrap>
|
||||
<TimePicker use12Hours onChange={onChange} />
|
||||
<TimePicker use12Hours format="h:mm:ss A" onChange={onChange} style={{ width: 140 }} />
|
||||
<TimePicker use12Hours format="h:mm:ss A" onChange={onChange} />
|
||||
<TimePicker use12Hours format="h:mm a" onChange={onChange} />
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,13 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
カスタムクラスを `TimePicker`ポップアップに渡す
|
||||
将自定义 class 传给 `TimePicker` 弹框。
|
||||
|
||||
## en-US
|
||||
|
||||
Passing custom class to `TimePicker` popup
|
||||
|
||||
```css
|
||||
.myCustomClassName .ant-picker-time-panel-cell-inner {
|
||||
color: red !important;
|
||||
}
|
||||
```
|
||||
Passing custom class to `TimePicker` popup.
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import React from 'react';
|
||||
import { TimePicker } from 'antd';
|
||||
import { Space, TimePicker } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space wrap>
|
||||
<TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} size="large" />
|
||||
<TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} />
|
||||
<TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} size="small" />
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -116,11 +116,6 @@ type RangeDisabledTime = (
|
||||
};
|
||||
```
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-picker { margin: 0 8px 12px 0; }
|
||||
.ant-row-rtl .code-box-demo .ant-picker { margin: 0 0 12px 8px; }
|
||||
</style>
|
||||
|
||||
## FAQ
|
||||
|
||||
- [How to use TimePicker with customize date library like dayjs](/docs/react/use-custom-date-library#timepicker)
|
||||
|
||||
@ -115,11 +115,6 @@ type RangeDisabledTime = (
|
||||
};
|
||||
```
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-picker { margin: 0 8px 12px 0; }
|
||||
.ant-row-rtl .code-box-demo .ant-picker { margin: 0 0 12px 8px; }
|
||||
</style>
|
||||
|
||||
## FAQ
|
||||
|
||||
- [如何在 TimePicker 中使用自定义日期库（如 Moment.js ）](/docs/react/use-custom-date-library#timepicker)
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user