mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
💄 Optimize examples code style
This commit is contained in:
afc163
parent
93887e1380
commit
13379aa0d8
@ -16,8 +16,7 @@ Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spe
|
||||
```jsx
|
||||
import { Icon, Input, AutoComplete } from 'antd';
|
||||
|
||||
const Option = AutoComplete.Option;
|
||||
const OptGroup = AutoComplete.OptGroup;
|
||||
const { Option, OptGroup } = AutoComplete;
|
||||
|
||||
const dataSource = [
|
||||
{
|
||||
|
||||
@ -16,7 +16,7 @@ You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of u
|
||||
```jsx
|
||||
import { AutoComplete } from 'antd';
|
||||
|
||||
const Option = AutoComplete.Option;
|
||||
const { Option } = AutoComplete;
|
||||
|
||||
class Complete extends React.Component {
|
||||
state = {
|
||||
|
||||
@ -16,7 +16,7 @@ Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/s
|
||||
```jsx
|
||||
import { Icon, Button, Input, AutoComplete } from 'antd';
|
||||
|
||||
const Option = AutoComplete.Option;
|
||||
const { Option } = AutoComplete;
|
||||
|
||||
function onSelect(value) {
|
||||
console.log('onSelect', value);
|
||||
|
||||
@ -3,7 +3,7 @@ import * as moment from 'moment';
|
||||
import Select from '../select';
|
||||
import { Group, Button, RadioChangeEvent } from '../radio';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
export interface RenderHeader {
|
||||
value: moment.Moment;
|
||||
|
||||
@ -16,8 +16,6 @@ Generate a group of checkboxes from an array.
|
||||
```jsx
|
||||
import { Checkbox } from 'antd';
|
||||
|
||||
const CheckboxGroup = Checkbox.Group;
|
||||
|
||||
function onChange(checkedValues) {
|
||||
console.log('checked = ', checkedValues);
|
||||
}
|
||||
@ -36,13 +34,13 @@ const optionsWithDisabled = [
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<CheckboxGroup options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
|
||||
<Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
|
||||
<br />
|
||||
<br />
|
||||
<CheckboxGroup options={options} defaultValue={['Pear']} onChange={onChange} />
|
||||
<Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} />
|
||||
<br />
|
||||
<br />
|
||||
<CheckboxGroup
|
||||
<Checkbox.Group
|
||||
options={optionsWithDisabled}
|
||||
disabled
|
||||
defaultValue={['Apple']}
|
||||
|
||||
@ -17,7 +17,7 @@ Comment can be used as an editor, so the user can customize the contents of the
|
||||
import { Comment, Avatar, Form, Button, List, Input } from 'antd';
|
||||
import moment from 'moment';
|
||||
|
||||
const TextArea = Input.TextArea;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const CommentList = ({ comments }) => (
|
||||
<List
|
||||
|
||||
@ -17,7 +17,7 @@ We can set presetted ranges to RangePicker to improve user experience.
|
||||
import { DatePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
|
||||
const RangePicker = DatePicker.RangePicker;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
function onChange(dates, dateStrings) {
|
||||
console.log('From: ', dates[0], ', to: ', dates[1]);
|
||||
|
||||
@ -3,8 +3,6 @@ import MockDate from 'mockdate';
|
||||
import { mount } from 'enzyme';
|
||||
import Descriptions from '..';
|
||||
|
||||
const DescriptionsItem = Descriptions.Item;
|
||||
|
||||
jest.mock('enquire.js', () => {
|
||||
let that;
|
||||
let unmatchFun;
|
||||
@ -40,10 +38,10 @@ describe('Descriptions', () => {
|
||||
const enquire = require('enquire.js');
|
||||
const wrapper = mount(
|
||||
<Descriptions>
|
||||
<DescriptionsItem label="Product">Cloud Database</DescriptionsItem>
|
||||
<DescriptionsItem label="Billing">Prepaid</DescriptionsItem>
|
||||
<DescriptionsItem label="time">18:00:00</DescriptionsItem>
|
||||
<DescriptionsItem label="Amount">$80.00</DescriptionsItem>
|
||||
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||||
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
|
||||
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
|
||||
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
|
||||
</Descriptions>,
|
||||
);
|
||||
expect(wrapper.find('tr')).toHaveLength(4);
|
||||
@ -57,10 +55,10 @@ describe('Descriptions', () => {
|
||||
const enquire = require('enquire.js');
|
||||
const wrapper = mount(
|
||||
<Descriptions column={{ xs: 2 }}>
|
||||
<DescriptionsItem label="Product">Cloud Database</DescriptionsItem>
|
||||
<DescriptionsItem label="Billing">Prepaid</DescriptionsItem>
|
||||
<DescriptionsItem label="time">18:00:00</DescriptionsItem>
|
||||
<DescriptionsItem label="Amount">$80.00</DescriptionsItem>
|
||||
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||||
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
|
||||
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
|
||||
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
|
||||
</Descriptions>,
|
||||
);
|
||||
expect(wrapper.find('tr')).toHaveLength(2);
|
||||
@ -73,10 +71,10 @@ describe('Descriptions', () => {
|
||||
// eslint-disable-next-line global-require
|
||||
const wrapper = mount(
|
||||
<Descriptions column="3">
|
||||
<DescriptionsItem label="Product">Cloud Database</DescriptionsItem>
|
||||
<DescriptionsItem label="Billing">Prepaid</DescriptionsItem>
|
||||
<DescriptionsItem label="time">18:00:00</DescriptionsItem>
|
||||
<DescriptionsItem label="Amount">$80.00</DescriptionsItem>
|
||||
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||||
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
|
||||
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
|
||||
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
|
||||
</Descriptions>,
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
@ -86,10 +84,10 @@ describe('Descriptions', () => {
|
||||
it('when typeof column is object', () => {
|
||||
const wrapper = mount(
|
||||
<Descriptions column={{ xs: 8, sm: 16, md: 24 }}>
|
||||
<DescriptionsItem label="Product">Cloud Database</DescriptionsItem>
|
||||
<DescriptionsItem label="Billing">Prepaid</DescriptionsItem>
|
||||
<DescriptionsItem label="time">18:00:00</DescriptionsItem>
|
||||
<DescriptionsItem label="Amount">$80.00</DescriptionsItem>
|
||||
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||||
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
|
||||
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
|
||||
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
|
||||
</Descriptions>,
|
||||
);
|
||||
expect(wrapper.instance().getColumn()).toBe(8);
|
||||
@ -99,12 +97,12 @@ describe('Descriptions', () => {
|
||||
it('warning if ecceed the row span', () => {
|
||||
mount(
|
||||
<Descriptions column={3}>
|
||||
<DescriptionsItem label="Product" span={2}>
|
||||
<Descriptions.Item label="Product" span={2}>
|
||||
Cloud Database
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="Billing" span={2}>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Billing" span={2}>
|
||||
Prepaid
|
||||
</DescriptionsItem>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>,
|
||||
);
|
||||
expect(errorSpy).toHaveBeenCalledWith(
|
||||
|
||||
@ -16,17 +16,15 @@ Simplest Usage.
|
||||
```jsx
|
||||
import { Descriptions } from 'antd';
|
||||
|
||||
const DescriptionsItem = Descriptions.Item;
|
||||
|
||||
ReactDOM.render(
|
||||
<Descriptions title="User Info">
|
||||
<DescriptionsItem label="UserName">Zhou Maomao</DescriptionsItem>
|
||||
<DescriptionsItem label="Telephone">1810000000</DescriptionsItem>
|
||||
<DescriptionsItem label="Live">Hangzhou, Zhejiang</DescriptionsItem>
|
||||
<DescriptionsItem label="Remark">empty</DescriptionsItem>
|
||||
<DescriptionsItem label="Address">
|
||||
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
|
||||
<Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
|
||||
<Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
|
||||
<Descriptions.Item label="Remark">empty</Descriptions.Item>
|
||||
<Descriptions.Item label="Address">
|
||||
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
|
||||
</DescriptionsItem>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>,
|
||||
mountNode,
|
||||
);
|
||||
|
||||
@ -16,24 +16,22 @@ Descriptions with border and background color.
|
||||
```jsx
|
||||
import { Descriptions, Badge } from 'antd';
|
||||
|
||||
const DescriptionsItem = Descriptions.Item;
|
||||
|
||||
ReactDOM.render(
|
||||
<Descriptions title="User Info" bordered>
|
||||
<DescriptionsItem label="Product">Cloud Database</DescriptionsItem>
|
||||
<DescriptionsItem label="Billing Mode">Prepaid</DescriptionsItem>
|
||||
<DescriptionsItem label="Automatic Renewal">YES</DescriptionsItem>
|
||||
<DescriptionsItem label="Order time">2018-04-24 18:00:00</DescriptionsItem>
|
||||
<DescriptionsItem label="Usage Time" span={3}>
|
||||
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||||
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
|
||||
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
|
||||
<Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
|
||||
<Descriptions.Item label="Usage Time" span={3}>
|
||||
2019-04-24 18:00:00
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="Status" span={3}>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Status" span={3}>
|
||||
<Badge status="processing" text="Running" />
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="Negotiated Amount">$80.00</DescriptionsItem>
|
||||
<DescriptionsItem label="Discount">$20.00</DescriptionsItem>
|
||||
<DescriptionsItem label="Official Receipts">$60.00</DescriptionsItem>
|
||||
<DescriptionsItem label="Config Info">
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
|
||||
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
|
||||
<Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
|
||||
<Descriptions.Item label="Config Info">
|
||||
Data disk type: MongoDB
|
||||
<br />
|
||||
Database version: 3.4
|
||||
@ -45,7 +43,7 @@ ReactDOM.render(
|
||||
Replication_factor:3
|
||||
<br />
|
||||
Region: East China 1<br />
|
||||
</DescriptionsItem>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>,
|
||||
mountNode,
|
||||
);
|
||||
|
||||
@ -16,8 +16,6 @@ Responsive configuration enables perfect presentation on small screen devices.
|
||||
```jsx
|
||||
import { Descriptions } from 'antd';
|
||||
|
||||
const DescriptionsItem = Descriptions.Item;
|
||||
|
||||
const Demo = () => {
|
||||
return (
|
||||
<div>
|
||||
@ -26,13 +24,13 @@ const Demo = () => {
|
||||
border
|
||||
column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
|
||||
>
|
||||
<DescriptionsItem label="Product">Cloud Database</DescriptionsItem>
|
||||
<DescriptionsItem label="Billing">Prepaid</DescriptionsItem>
|
||||
<DescriptionsItem label="time">18:00:00</DescriptionsItem>
|
||||
<DescriptionsItem label="Amount">$80.00</DescriptionsItem>
|
||||
<DescriptionsItem label="Discount">$20.00</DescriptionsItem>
|
||||
<DescriptionsItem label="Official">$60.00</DescriptionsItem>
|
||||
<DescriptionsItem label="Config Info">
|
||||
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||||
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
|
||||
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
|
||||
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
|
||||
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
|
||||
<Descriptions.Item label="Official">$60.00</Descriptions.Item>
|
||||
<Descriptions.Item label="Config Info">
|
||||
Data disk type: MongoDB
|
||||
<br />
|
||||
Database version: 3.4
|
||||
@ -44,7 +42,7 @@ const Demo = () => {
|
||||
Replication_factor:3
|
||||
<br />
|
||||
Region: East China 1
|
||||
</DescriptionsItem>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -16,10 +16,6 @@ Custom sizes to fit in a variety of containers.
|
||||
```jsx
|
||||
import { Descriptions, Radio } from 'antd';
|
||||
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
const DescriptionsItem = Descriptions.Item;
|
||||
|
||||
class Demo extends React.Component {
|
||||
state = {
|
||||
size: 'default',
|
||||
@ -35,21 +31,21 @@ class Demo extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<RadioGroup onChange={this.onChange} value={this.state.size}>
|
||||
<Radio.Group onChange={this.onChange} value={this.state.size}>
|
||||
<Radio value="default">default</Radio>
|
||||
<Radio value="middle">middle</Radio>
|
||||
<Radio value="small">small</Radio>
|
||||
</RadioGroup>
|
||||
</Radio.Group>
|
||||
<br />
|
||||
<br />
|
||||
<Descriptions bordered title="Custom Size" border size={this.state.size}>
|
||||
<DescriptionsItem label="Product">Cloud Database</DescriptionsItem>
|
||||
<DescriptionsItem label="Billing">Prepaid</DescriptionsItem>
|
||||
<DescriptionsItem label="time">18:00:00</DescriptionsItem>
|
||||
<DescriptionsItem label="Amount">$80.00</DescriptionsItem>
|
||||
<DescriptionsItem label="Discount">$20.00</DescriptionsItem>
|
||||
<DescriptionsItem label="Official">$60.00</DescriptionsItem>
|
||||
<DescriptionsItem label="Config Info">
|
||||
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||||
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
|
||||
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
|
||||
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
|
||||
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
|
||||
<Descriptions.Item label="Official">$60.00</Descriptions.Item>
|
||||
<Descriptions.Item label="Config Info">
|
||||
Data disk type: MongoDB
|
||||
<br />
|
||||
Database version: 3.4
|
||||
@ -61,7 +57,7 @@ class Demo extends React.Component {
|
||||
Replication_factor:3
|
||||
<br />
|
||||
Region: East China 1<br />
|
||||
</DescriptionsItem>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -17,7 +17,6 @@ Please check this before commit.
|
||||
```jsx
|
||||
import { Button, Modal, Form, Row, Col, Input, Select, InputNumber, Radio, DatePicker } from 'antd';
|
||||
|
||||
const RadioGroup = Radio.Group;
|
||||
const ColSpan = { lg: 12, md: 24 };
|
||||
|
||||
class App extends React.Component {
|
||||
@ -140,10 +139,10 @@ class App extends React.Component {
|
||||
</Col>
|
||||
<Col {...ColSpan}>
|
||||
<Item label="RadioGroup: 64px">
|
||||
<RadioGroup>
|
||||
<Radio.Group>
|
||||
<Radio value={0}>男</Radio>
|
||||
<Radio value={1}>女</Radio>
|
||||
</RadioGroup>
|
||||
</Radio.Group>
|
||||
</Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@ -16,7 +16,7 @@ Using pre & post tabs example.
|
||||
```jsx
|
||||
import { Input, Select, Icon } from 'antd';
|
||||
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
const selectBefore = (
|
||||
<Select defaultValue="Http://" style={{ width: 90 }}>
|
||||
|
||||
@ -21,7 +21,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
|
||||
import { Input, Col, Row, Select, InputNumber, DatePicker, AutoComplete, Cascader } from 'antd';
|
||||
|
||||
const InputGroup = Input.Group;
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
const options = [
|
||||
{
|
||||
|
||||
@ -14,7 +14,7 @@ debug: true
|
||||
import { Layout, Menu, Icon } from 'antd';
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
class SiderDemo extends React.Component {
|
||||
state = {
|
||||
|
||||
@ -24,7 +24,7 @@ The level of the aside navigation is scalable. The first, second, and third leve
|
||||
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
|
||||
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
class SiderDemo extends React.Component {
|
||||
state = {
|
||||
|
||||
@ -34,8 +34,8 @@ import 'moment/locale/zh-cn';
|
||||
|
||||
moment.locale('en');
|
||||
|
||||
const Option = Select.Option;
|
||||
const RangePicker = DatePicker.RangePicker;
|
||||
const { Option } = Select;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
||||
@ -16,8 +16,7 @@ Horizontal top navigation menu.
|
||||
```jsx
|
||||
import { Menu, Icon } from 'antd';
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const MenuItemGroup = Menu.ItemGroup;
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
@ -50,14 +49,14 @@ class App extends React.Component {
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<MenuItemGroup title="Item 1">
|
||||
<Menu.ItemGroup title="Item 1">
|
||||
<Menu.Item key="setting:1">Option 1</Menu.Item>
|
||||
<Menu.Item key="setting:2">Option 2</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
<MenuItemGroup title="Item 2">
|
||||
</Menu.ItemGroup>
|
||||
<Menu.ItemGroup title="Item 2">
|
||||
<Menu.Item key="setting:3">Option 3</Menu.Item>
|
||||
<Menu.Item key="setting:4">Option 4</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
</Menu.ItemGroup>
|
||||
</SubMenu>
|
||||
<Menu.Item key="alipay">
|
||||
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
|
||||
|
||||
@ -20,7 +20,7 @@ Here is [a complete demo](/components/layout/#components-layout-demo-side) with
|
||||
```jsx
|
||||
import { Menu, Icon, Button } from 'antd';
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
|
||||
@ -16,8 +16,7 @@ Vertical menu with inline submenus.
|
||||
```jsx
|
||||
import { Menu, Icon } from 'antd';
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const MenuItemGroup = Menu.ItemGroup;
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
class Sider extends React.Component {
|
||||
handleClick = e => {
|
||||
@ -42,14 +41,14 @@ class Sider extends React.Component {
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<MenuItemGroup key="g1" title="Item 1">
|
||||
<Menu.ItemGroup key="g1" title="Item 1">
|
||||
<Menu.Item key="1">Option 1</Menu.Item>
|
||||
<Menu.Item key="2">Option 2</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
<MenuItemGroup key="g2" title="Item 2">
|
||||
</Menu.ItemGroup>
|
||||
<Menu.ItemGroup key="g2" title="Item 2">
|
||||
<Menu.Item key="3">Option 3</Menu.Item>
|
||||
<Menu.Item key="4">Option 4</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
</Menu.ItemGroup>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
|
||||
@ -16,7 +16,7 @@ Click the menu and you will see that all the other menus gets collapsed to keep
|
||||
```jsx
|
||||
import { Menu, Icon } from 'antd';
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
class Sider extends React.Component {
|
||||
// submenu keys of first level
|
||||
|
||||
@ -16,7 +16,7 @@ There are two built-in themes: 'light' and 'dark'. The default value is 'light'.
|
||||
```jsx
|
||||
import { Menu, Icon, Switch } from 'antd';
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
class Sider extends React.Component {
|
||||
state = {
|
||||
|
||||
@ -16,8 +16,7 @@ Submenus open as pop-ups.
|
||||
```jsx
|
||||
import { Menu, Icon } from 'antd';
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const MenuItemGroup = Menu.ItemGroup;
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
function handleClick(e) {
|
||||
console.log('click', e);
|
||||
@ -34,14 +33,14 @@ ReactDOM.render(
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<MenuItemGroup title="Item 1">
|
||||
<Menu.ItemGroup title="Item 1">
|
||||
<Menu.Item key="1">Option 1</Menu.Item>
|
||||
<Menu.Item key="2">Option 2</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
<MenuItemGroup title="Iteom 2">
|
||||
</Menu.ItemGroup>
|
||||
<Menu.ItemGroup title="Iteom 2">
|
||||
<Menu.Item key="3">Option 3</Menu.Item>
|
||||
<Menu.Item key="4">Option 4</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
</Menu.ItemGroup>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
|
||||
@ -16,7 +16,7 @@ Use the operating area and customize the sub-nodes, suitable for use in the need
|
||||
```jsx
|
||||
import { PageHeader, Tag, Tabs, Button, Statistic, Row, Col } from 'antd';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const Description = ({ term, children, span = 12 }) => (
|
||||
<Col span={span}>
|
||||
|
||||
@ -16,9 +16,6 @@ The combination of radio button style.
|
||||
```jsx
|
||||
import { Radio } from 'antd';
|
||||
|
||||
const RadioButton = Radio.Button;
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
function onChange(e) {
|
||||
console.log(`radio checked:${e.target.value}`);
|
||||
}
|
||||
@ -26,30 +23,30 @@ function onChange(e) {
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<div>
|
||||
<RadioGroup onChange={onChange} defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
<Radio.Group onChange={onChange} defaultValue="a">
|
||||
<Radio.Button value="a">Hangzhou</Radio.Button>
|
||||
<Radio.Button value="b">Shanghai</Radio.Button>
|
||||
<Radio.Button value="c">Beijing</Radio.Button>
|
||||
<Radio.Button value="d">Chengdu</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<RadioGroup onChange={onChange} defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b" disabled>
|
||||
<Radio.Group onChange={onChange} defaultValue="a">
|
||||
<Radio.Button value="a">Hangzhou</Radio.Button>
|
||||
<Radio.Button value="b" disabled>
|
||||
Shanghai
|
||||
</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</Radio.Button>
|
||||
<Radio.Button value="c">Beijing</Radio.Button>
|
||||
<Radio.Button value="d">Chengdu</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<RadioGroup disabled onChange={onChange} defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
<Radio.Group disabled onChange={onChange} defaultValue="a">
|
||||
<Radio.Button value="a">Hangzhou</Radio.Button>
|
||||
<Radio.Button value="b">Shanghai</Radio.Button>
|
||||
<Radio.Button value="c">Beijing</Radio.Button>
|
||||
<Radio.Button value="d">Chengdu</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
</div>,
|
||||
mountNode,
|
||||
|
||||
@ -1,23 +1,21 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: RadioGroup 垂直
|
||||
en-US: Vertical RadioGroup
|
||||
zh-CN: Radio.Group 垂直
|
||||
en-US: Vertical Radio.Group
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
垂直的 RadioGroup，配合更多输入框选项。
|
||||
垂直的 Radio.Group，配合更多输入框选项。
|
||||
|
||||
## en-US
|
||||
|
||||
Vertical RadioGroup, with more radios.
|
||||
Vertical Radio.Group, with more radios.
|
||||
|
||||
```jsx
|
||||
import { Radio, Input } from 'antd';
|
||||
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
value: 1,
|
||||
@ -37,7 +35,7 @@ class App extends React.Component {
|
||||
lineHeight: '30px',
|
||||
};
|
||||
return (
|
||||
<RadioGroup onChange={this.onChange} value={this.state.value}>
|
||||
<Radio.Group onChange={this.onChange} value={this.state.value}>
|
||||
<Radio style={radioStyle} value={1}>
|
||||
Option A
|
||||
</Radio>
|
||||
@ -51,7 +49,7 @@ class App extends React.Component {
|
||||
More...
|
||||
{this.state.value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</Radio.Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: RadioGroup 组合 - 配置方式
|
||||
en-US: RadioGroup group - optional
|
||||
zh-CN: Radio.Group 组合 - 配置方式
|
||||
en-US: Radio.Group group - optional
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
@ -16,8 +16,6 @@ Render radios by configuring `options`.
|
||||
```jsx
|
||||
import { Radio } from 'antd';
|
||||
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
const plainOptions = ['Apple', 'Pear', 'Orange'];
|
||||
const options = [
|
||||
{ label: 'Apple', value: 'Apple' },
|
||||
@ -61,9 +59,9 @@ class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<RadioGroup options={plainOptions} onChange={this.onChange1} value={this.state.value1} />
|
||||
<RadioGroup options={options} onChange={this.onChange2} value={this.state.value2} />
|
||||
<RadioGroup
|
||||
<Radio.Group options={plainOptions} onChange={this.onChange1} value={this.state.value1} />
|
||||
<Radio.Group options={options} onChange={this.onChange2} value={this.state.value2} />
|
||||
<Radio.Group
|
||||
options={optionsWithDisabled}
|
||||
onChange={this.onChange3}
|
||||
value={this.state.value3}
|
||||
|
||||
@ -2,30 +2,28 @@
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 单选组合 - 配合 name 使用
|
||||
en-US: RadioGroup with name
|
||||
en-US: Radio.Group with name
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以为 RadioGroup 配置 `name` 参数，为组合内的 input 元素赋予相同的 `name` 属性，使浏览器把 RadioGroup 下的 Radio 真正看作是一组（例如可以通过方向键始终**在同一组内**更改选项）。
|
||||
可以为 Radio.Group 配置 `name` 参数，为组合内的 input 元素赋予相同的 `name` 属性，使浏览器把 Radio.Group 下的 Radio 真正看作是一组（例如可以通过方向键始终**在同一组内**更改选项）。
|
||||
|
||||
## en-US
|
||||
|
||||
Passing the `name` property to all `input[type="radio"]` that are in the same RadioGroup. It is usually used to let the browser see your RadioGroup as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same RadioGroup.
|
||||
Passing the `name` property to all `input[type="radio"]` that are in the same Radio.Group. It is usually used to let the browser see your Radio.Group as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Radio.Group.
|
||||
|
||||
```jsx
|
||||
import { Radio } from 'antd';
|
||||
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<RadioGroup name="radiogroup" defaultValue={1}>
|
||||
<Radio.Group name="radiogroup" defaultValue={1}>
|
||||
<Radio value={1}>A</Radio>
|
||||
<Radio value={2}>B</Radio>
|
||||
<Radio value={3}>C</Radio>
|
||||
<Radio value={4}>D</Radio>
|
||||
</RadioGroup>
|
||||
</Radio.Group>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -16,8 +16,6 @@ A group of radio components.
|
||||
```jsx
|
||||
import { Radio } from 'antd';
|
||||
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
value: 1,
|
||||
@ -32,12 +30,12 @@ class App extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<RadioGroup onChange={this.onChange} value={this.state.value}>
|
||||
<Radio.Group onChange={this.onChange} value={this.state.value}>
|
||||
<Radio value={1}>A</Radio>
|
||||
<Radio value={2}>B</Radio>
|
||||
<Radio value={3}>C</Radio>
|
||||
<Radio value={4}>D</Radio>
|
||||
</RadioGroup>
|
||||
</Radio.Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,34 +16,31 @@ There are three sizes available: large, medium, and small. It can coordinate wit
|
||||
```jsx
|
||||
import { Radio } from 'antd';
|
||||
|
||||
const RadioButton = Radio.Button;
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<div>
|
||||
<RadioGroup defaultValue="a" size="large">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
<Radio.Group defaultValue="a" size="large">
|
||||
<Radio.Button value="a">Hangzhou</Radio.Button>
|
||||
<Radio.Button value="b">Shanghai</Radio.Button>
|
||||
<Radio.Button value="c">Beijing</Radio.Button>
|
||||
<Radio.Button value="d">Chengdu</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<RadioGroup defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
<Radio.Group defaultValue="a">
|
||||
<Radio.Button value="a">Hangzhou</Radio.Button>
|
||||
<Radio.Button value="b">Shanghai</Radio.Button>
|
||||
<Radio.Button value="c">Beijing</Radio.Button>
|
||||
<Radio.Button value="d">Chengdu</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<RadioGroup defaultValue="a" size="small">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
<Radio.Group defaultValue="a" size="small">
|
||||
<Radio.Button value="a">Hangzhou</Radio.Button>
|
||||
<Radio.Button value="b">Shanghai</Radio.Button>
|
||||
<Radio.Button value="c">Beijing</Radio.Button>
|
||||
<Radio.Button value="d">Chengdu</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
</div>,
|
||||
mountNode,
|
||||
|
||||
@ -16,7 +16,7 @@ Try to copy `Lucy,Jack` to the input. Only available in tags and multiple mode.
|
||||
```jsx
|
||||
import { Select } from 'antd';
|
||||
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
const children = [];
|
||||
for (let i = 10; i < 36; i++) {
|
||||
|
||||
@ -16,7 +16,7 @@ Basic Usage.
|
||||
```jsx
|
||||
import { Select } from 'antd';
|
||||
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
function handleChange(value) {
|
||||
console.log(`selected ${value}`);
|
||||
|
||||
@ -20,7 +20,7 @@ Using the [Cascader](/components/cascader) component is strongly recommended ins
|
||||
```jsx
|
||||
import { Select } from 'antd';
|
||||
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
const provinceData = ['Zhejiang', 'Jiangsu'];
|
||||
const cityData = {
|
||||
Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
|
||||
|
||||
@ -16,7 +16,7 @@ Customize the dropdown menu via `dropdownRender`.
|
||||
```jsx
|
||||
import { Select, Icon, Divider } from 'antd';
|
||||
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
ReactDOM.render(
|
||||
<Select
|
||||
|
||||
@ -20,7 +20,7 @@ The label of the selected item will be packed as an object for passing to the on
|
||||
```jsx
|
||||
import { Select } from 'antd';
|
||||
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
function handleChange(value) {
|
||||
console.log(value); // { key: "lucy", label: "Lucy (101)" }
|
||||
|
||||
@ -16,7 +16,7 @@ Multiple selection, selecting from existing items.
|
||||
```jsx
|
||||
import { Select } from 'antd';
|
||||
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
const children = [];
|
||||
for (let i = 10; i < 36; i++) {
|
||||
|
||||
@ -18,7 +18,7 @@ import { Select } from 'antd';
|
||||
import jsonp from 'fetch-jsonp';
|
||||
import querystring from 'querystring';
|
||||
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
let timeout;
|
||||
let currentValue;
|
||||
|
||||
@ -16,7 +16,7 @@ Search the options while expanded.
|
||||
```jsx
|
||||
import { Select } from 'antd';
|
||||
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
function onChange(value) {
|
||||
console.log(`selected ${value}`);
|
||||
|
||||
@ -17,7 +17,7 @@ A complete multiple select sample with remote search, debounce fetch, ajax callb
|
||||
import { Select, Spin } from 'antd';
|
||||
import debounce from 'lodash/debounce';
|
||||
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
class UserRemoteSelect extends React.Component {
|
||||
constructor(props) {
|
||||
|
||||
@ -16,7 +16,7 @@ The height of the input field for the select defaults to 32px. If size is set to
|
||||
```jsx
|
||||
import { Select, Radio } from 'antd';
|
||||
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
const children = [];
|
||||
for (let i = 10; i < 36; i++) {
|
||||
|
||||
@ -19,7 +19,7 @@ import { Select, Icon } from 'antd';
|
||||
|
||||
const smileIcon = <Icon type="smile" />;
|
||||
const mehIcon = <Icon type="meh" />;
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
function handleChange(value) {
|
||||
console.log(`selected ${value}`);
|
||||
|
||||
@ -16,7 +16,7 @@ Select with tags, transform input to tag (scroll the menu)
|
||||
```jsx
|
||||
import { Select } from 'antd';
|
||||
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
const children = [];
|
||||
for (let i = 10; i < 36; i++) {
|
||||
|
||||
@ -14,9 +14,9 @@ Select component to select value from options.
|
||||
## API
|
||||
|
||||
```html
|
||||
<select>
|
||||
<option value="lucy">lucy</option>
|
||||
</select>
|
||||
<Select>
|
||||
<Option value="lucy">lucy</Option>
|
||||
</Select>
|
||||
```
|
||||
|
||||
### Select props
|
||||
|
||||
@ -15,9 +15,9 @@ title: Select
|
||||
## API
|
||||
|
||||
```html
|
||||
<select>
|
||||
<option value="lucy">lucy</option>
|
||||
</select>
|
||||
<Select>
|
||||
<Option value="lucy">lucy</Option>
|
||||
</Select>
|
||||
```
|
||||
|
||||
### Select props
|
||||
|
||||
@ -16,7 +16,7 @@ Setting `onChange` makes Steps clickable.
|
||||
```jsx
|
||||
import { Steps, Divider } from 'antd';
|
||||
|
||||
const Step = Steps.Step;
|
||||
const { Step } = Steps;
|
||||
|
||||
class Demo extends React.Component {
|
||||
state = {
|
||||
|
||||
@ -16,7 +16,7 @@ You can customize the display for Steps with progress dot style.
|
||||
```jsx
|
||||
import { Steps, Popover } from 'antd';
|
||||
|
||||
const Step = Steps.Step;
|
||||
const { Step } = Steps;
|
||||
|
||||
const customDot = (dot, { status, index }) => (
|
||||
<Popover
|
||||
|
||||
@ -16,7 +16,7 @@ By using `status` of `Steps`, you can specify the state for current step.
|
||||
```jsx
|
||||
import { Steps } from 'antd';
|
||||
|
||||
const Step = Steps.Step;
|
||||
const { Step } = Steps;
|
||||
|
||||
ReactDOM.render(
|
||||
<Steps current={1} status="error">
|
||||
|
||||
@ -16,7 +16,7 @@ You can use your own custom icons by setting the property `icon` for `Steps.Step
|
||||
```jsx
|
||||
import { Steps, Icon } from 'antd';
|
||||
|
||||
const Step = Steps.Step;
|
||||
const { Step } = Steps;
|
||||
|
||||
ReactDOM.render(
|
||||
<Steps>
|
||||
|
||||
@ -16,7 +16,7 @@ Steps with progress dot style.
|
||||
```jsx
|
||||
import { Steps } from 'antd';
|
||||
|
||||
const Step = Steps.Step;
|
||||
const { Step } = Steps;
|
||||
|
||||
ReactDOM.render(
|
||||
<Steps progressDot current={1}>
|
||||
|
||||
@ -16,7 +16,7 @@ The most basic step bar.
|
||||
```jsx
|
||||
import { Steps } from 'antd';
|
||||
|
||||
const Step = Steps.Step;
|
||||
const { Step } = Steps;
|
||||
|
||||
ReactDOM.render(
|
||||
<Steps current={1}>
|
||||
|
||||
@ -16,7 +16,7 @@ By setting like this: `<Steps size="small">`, you can get a mini version.
|
||||
```jsx
|
||||
import { Steps } from 'antd';
|
||||
|
||||
const Step = Steps.Step;
|
||||
const { Step } = Steps;
|
||||
|
||||
ReactDOM.render(
|
||||
<Steps size="small" current={1}>
|
||||
|
||||
@ -16,7 +16,7 @@ Cooperate with the content and buttons, to represent the progress of a process.
|
||||
```jsx
|
||||
import { Steps, Button, message } from 'antd';
|
||||
|
||||
const Step = Steps.Step;
|
||||
const { Step } = Steps;
|
||||
|
||||
const steps = [
|
||||
{
|
||||
|
||||
@ -16,7 +16,7 @@ A simple mini version step bar in the vertical direction.
|
||||
```jsx
|
||||
import { Steps } from 'antd';
|
||||
|
||||
const Step = Steps.Step;
|
||||
const { Step } = Steps;
|
||||
|
||||
ReactDOM.render(
|
||||
<Steps direction="vertical" size="small" current={1}>
|
||||
|
||||
@ -16,7 +16,7 @@ A simple step bar in the vertical direction.
|
||||
```jsx
|
||||
import { Steps } from 'antd';
|
||||
|
||||
const Step = Steps.Step;
|
||||
const { Step } = Steps;
|
||||
|
||||
ReactDOM.render(
|
||||
<Steps direction="vertical" current={1}>
|
||||
|
||||
@ -16,7 +16,7 @@ Default activate first tab.
|
||||
```jsx
|
||||
import { Tabs } from 'antd';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
function callback(key) {
|
||||
console.log(key);
|
||||
|
||||
@ -16,7 +16,7 @@ Should be used at the top of container, needs to override styles.
|
||||
```jsx
|
||||
import { Tabs } from 'antd';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
ReactDOM.render(
|
||||
<div className="card-container">
|
||||
|
||||
@ -16,7 +16,7 @@ Another type Tabs, which doesn't support vertical mode.
|
||||
```jsx
|
||||
import { Tabs } from 'antd';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
function callback(key) {
|
||||
console.log(key);
|
||||
|
||||
@ -16,7 +16,7 @@ Hide default plus icon, and bind event for customized trigger.
|
||||
```jsx
|
||||
import { Tabs, Button } from 'antd';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
class Demo extends React.Component {
|
||||
constructor(props) {
|
||||
|
||||
@ -18,7 +18,7 @@ import { Tabs } from 'antd';
|
||||
import { DragDropContextProvider, DragSource, DropTarget } from 'react-dnd';
|
||||
import HTML5Backend from 'react-dnd-html5-backend';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
// Drag & Drop node
|
||||
class TabNode extends React.Component {
|
||||
|
||||
@ -17,7 +17,7 @@ use react-sticky.
|
||||
import { Tabs } from 'antd';
|
||||
import { StickyContainer, Sticky } from 'react-sticky';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const renderTabBar = (props, DefaultTabBar) => (
|
||||
<Sticky bottomOffset={80}>
|
||||
|
||||
@ -16,7 +16,7 @@ Disabled a tab.
|
||||
```jsx
|
||||
import { Tabs } from 'antd';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
ReactDOM.render(
|
||||
<Tabs defaultActiveKey="1">
|
||||
|
||||
@ -16,7 +16,7 @@ Only card type Tabs support adding & closable. +Use `closable={false}` to disabl
|
||||
```jsx
|
||||
import { Tabs } from 'antd';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
class Demo extends React.Component {
|
||||
constructor(props) {
|
||||
|
||||
@ -16,7 +16,7 @@ You can add extra actions to the right of Tabs.
|
||||
```jsx
|
||||
import { Tabs, Button } from 'antd';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const operations = <Button>Extra Action</Button>;
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ The Tab with Icon.
|
||||
```jsx
|
||||
import { Tabs, Icon } from 'antd';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
ReactDOM.render(
|
||||
<Tabs defaultActiveKey="2">
|
||||
|
||||
@ -17,8 +17,8 @@ Default activate first tab.
|
||||
```jsx
|
||||
import { Tabs, Select } from 'antd';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
const Option = Select.Option;
|
||||
const { TabPane } = Tabs;
|
||||
const { Option } = Select;
|
||||
|
||||
const positionList = ['left', 'right', 'top', 'bottom'];
|
||||
|
||||
|
||||
@ -16,8 +16,8 @@ Tab's position: left, right, top or bottom.
|
||||
```jsx
|
||||
import { Tabs, Select } from 'antd';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
const Option = Select.Option;
|
||||
const { TabPane } = Tabs;
|
||||
const { Option } = Select;
|
||||
|
||||
class Demo extends React.Component {
|
||||
state = {
|
||||
|
||||
@ -16,7 +16,7 @@ In order to fit in more tabs, they can slide left and right (or up and down).
|
||||
```jsx
|
||||
import { Tabs, Radio } from 'antd';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
class SlidingTabsDemo extends React.Component {
|
||||
constructor(props) {
|
||||
|
||||
@ -16,8 +16,7 @@ Built-in directory tree. `multiple` support `ctrl(Windows)` / `command(Mac)` sel
|
||||
```jsx
|
||||
import { Tree } from 'antd';
|
||||
|
||||
const DirectoryTree = Tree.DirectoryTree;
|
||||
const { TreeNode } = Tree;
|
||||
const { TreeNode, DirectoryTree } = Tree;
|
||||
|
||||
class Demo extends React.Component {
|
||||
onSelect = (keys, event) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user