--- order: 10 title: zh-CN: 暗背景 en-US: Dark Bg debug: true --- ## zh-CN 第一个对话框。 ## en-US Basic modal. ```jsx import { Modal, DatePicker, Slider, Tree, Badge, Collapse, Timeline, Tabs, Anchor, Table, Card, Button, Calendar, Transfer, Switch, Typography, Dropdown, } from 'antd'; import moment from 'moment'; import difference from 'lodash/difference'; import { DownOutlined, ClockCircleOutlined } from '@ant-design/icons'; const { Panel } = Collapse; const { TreeNode } = Tree; const { TabPane } = Tabs; const { Meta } = Card; const { Link } = Anchor; const { Text } = Typography; const text = ` A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world. `; const mockData = []; for (let i = 0; i < 20; i++) { mockData.push({ key: i.toString(), title: `content${i + 1}`, description: `description of content${i + 1}`, disabled: i % 3 < 1, }); } const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key); const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park', }, ]; const columnsTable = [ { title: 'Name', dataIndex: 'name', }, { title: 'Borrow', dataIndex: 'borrow', }, { title: 'Repayment', dataIndex: 'repayment', }, ]; const dataTable = [ { key: '1', name: 'John Brown', borrow: 10, repayment: 33, }, { key: '2', name: 'Jim Green', borrow: 100, repayment: 0, }, { key: '3', name: 'Joe Black', borrow: 10, repayment: 10, }, { key: '4', name: 'Jim Red', borrow: 75, repayment: 45, }, ]; const expandedRowRender = () => { const columnsExpand = [ { title: 'Date', dataIndex: 'date', key: 'date' }, { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Status', key: 'state', render: () => ( Finished ), }, { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' }, { title: 'Action', dataIndex: 'operation', key: 'operation', render: () => ( Pause Stop More ), }, ]; const dataExpand = []; for (let i = 0; i < 3; ++i) { data.push({ key: i, date: '2014-12-24 23:12:00', name: 'This is production name', upgradeNum: 'Upgraded: 56', }); } return ; }; const columnsNest = [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Platform', dataIndex: 'platform', key: 'platform' }, { title: 'Version', dataIndex: 'version', key: 'version' }, { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' }, { title: 'Creator', dataIndex: 'creator', key: 'creator' }, { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' }, { title: 'Action', key: 'operation', render: () => Publish }, ]; const dataNest = []; for (let i = 0; i < 3; ++i) { dataNest.push({ key: i, name: 'Screem', platform: 'iOS', version: '10.3.4.5654', upgradeNum: 500, creator: 'Jack', createdAt: '2014-12-24 23:12:00', }); } const columnsFixed = [ { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left', }, { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left', }, { title: 'Column 1', dataIndex: 'address', key: '1' }, { title: 'Column 2', dataIndex: 'address', key: '2' }, { title: 'Column 3', dataIndex: 'address', key: '3' }, { title: 'Column 4', dataIndex: 'address', key: '4' }, { title: 'Column 5', dataIndex: 'address', key: '5' }, { title: 'Column 6', dataIndex: 'address', key: '6' }, { title: 'Column 7', dataIndex: 'address', key: '7' }, { title: 'Column 8', dataIndex: 'address', key: '8' }, { title: 'Action', key: 'operation', fixed: 'right', width: 100, render: () => action, }, ]; const dataFixed = [ { key: '1', name: 'John Brown', age: 32, address: 'New York Park', }, { key: '2', name: 'Jim Green', age: 40, address: 'London Park', }, ]; const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => ( {({ direction, filteredItems, onItemSelectAll, onItemSelect, selectedKeys: listSelectedKeys, disabled: listDisabled, }) => { const columns = direction === 'left' ? leftColumns : rightColumns; const rowSelection = { getCheckboxProps: item => ({ disabled: listDisabled || item.disabled }), onSelectAll(selected, selectedRows) { const treeSelectedKeys = selectedRows .filter(item => !item.disabled) .map(({ key }) => key); const diffKeys = selected ? difference(treeSelectedKeys, listSelectedKeys) : difference(listSelectedKeys, treeSelectedKeys); onItemSelectAll(diffKeys, selected); }, onSelect({ key }, selected) { onItemSelect(key, selected); }, selectedRowKeys: listSelectedKeys, }; return (
({ onClick: () => { if (itemDisabled || listDisabled) return; onItemSelect(key, !listSelectedKeys.includes(key)); }, })} /> ); }} ); class App extends React.Component { state = { visible: false, targetKeys: oriTargetKeys, selectedKeys: [], disabled: false, showSearch: false, }; handleDisable = disabled => { this.setState({ disabled, }); }; handleTableTransferChange = nextTargetKeys => { this.setState({ targetKeys: nextTargetKeys }); }; triggerDisable = disabled => { this.setState({ disabled }); }; triggerShowSearch = showSearch => { this.setState({ showSearch }); }; handleTransferChange = nextTargetKeys => { this.setState({ targetKeys: nextTargetKeys }); }; handleTransferSelectChange = (sourceSelectedKeys, targetSelectedKeys) => { this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] }); }; showModal = () => { this.setState({ visible: true, }); }; handleOk = e => { console.log(e); this.setState({ visible: false, }); }; handleCancel = e => { console.log(e); this.setState({ visible: false, }); }; render() { const { disabled, selectedKeys, targetKeys, showSearch } = this.state; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', filters: [ { text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' }, ], filteredValue: null, onFilter: (value, record) => record.name.includes(value), sorter: (a, b) => a.name.length - b.name.length, sortOrder: true, ellipsis: true, }, { title: 'Age', dataIndex: 'age', key: 'age', sorter: false, sortOrder: true, ellipsis: true, }, { title: 'Address', dataIndex: 'address', key: 'address', filters: [ { text: 'London', value: 'London' }, { text: 'New York', value: 'New York' }, ], filteredValue: null, onFilter: (value, record) => record.address.includes(value), sorter: false, sortOrder: true, ellipsis: true, }, ]; return ( <> Content Content Content Content Content Content Content

{text}

{text}

{text}

item.title} disabled={disabled} /> item.title.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1 } leftColumns={[ { dataIndex: 'title', title: 'Name', }, { dataIndex: 'description', title: 'Description', }, ]} rightColumns={[ { dataIndex: 'title', title: 'Name', }, ]} /> Content of Tab Pane 1 Content of Tab Pane 2 Content of Tab Pane 3 Create a services site 2015-09-01 Solve initial network problems 2015-09-01 } color="red"> Technical testing 2015-09-01 Network problems being solved 2015-09-01 } defaultExpandedKeys={['0-0-0']}>
'Footer'} />
{ let totalBorrow = 0; let totalRepayment = 0; pageData.forEach(({ borrow, repayment }) => { totalBorrow += borrow; totalRepayment += repayment; }); return ( <> ); }} />
Total {totalBorrow} {totalRepayment}
Balance {totalBorrow - totalRepayment}
} > ); } } export default () => ; ```