mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 01:13:58 +08:00
style: enable react/jsx-closing-bracket-location
This commit is contained in:
parent
4af2731f0c
commit
2144349741
@ -28,7 +28,6 @@ const eslintrc = {
|
|||||||
'arrow-body-style': 0,
|
'arrow-body-style': 0,
|
||||||
'react/sort-comp': 0,
|
'react/sort-comp': 0,
|
||||||
'react/prop-types': 0,
|
'react/prop-types': 0,
|
||||||
'react/jsx-closing-bracket-location': 0,
|
|
||||||
'react/jsx-first-prop-new-line': 0,
|
'react/jsx-first-prop-new-line': 0,
|
||||||
'import/no-unresolved': 0,
|
'import/no-unresolved': 0,
|
||||||
'no-param-reassign': 0,
|
'no-param-reassign': 0,
|
||||||
|
@ -16,11 +16,13 @@ ReactDOM.render(<div>
|
|||||||
<Alert message="警告提示的文案"
|
<Alert message="警告提示的文案"
|
||||||
type="warning"
|
type="warning"
|
||||||
closable
|
closable
|
||||||
onClose={onClose} />
|
onClose={onClose}
|
||||||
|
/>
|
||||||
<Alert message="错误提示的文案"
|
<Alert message="错误提示的文案"
|
||||||
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
|
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
|
||||||
type="error"
|
type="error"
|
||||||
closable
|
closable
|
||||||
onClose={onClose} />
|
onClose={onClose}
|
||||||
|
/>
|
||||||
</div>, mountNode);
|
</div>, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -11,17 +11,21 @@ import { Alert } from 'antd';
|
|||||||
ReactDOM.render(<div>
|
ReactDOM.render(<div>
|
||||||
<Alert message="成功提示的文案"
|
<Alert message="成功提示的文案"
|
||||||
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
|
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
|
||||||
type="success" />
|
type="success"
|
||||||
|
/>
|
||||||
<Alert message="消息提示的文案"
|
<Alert message="消息提示的文案"
|
||||||
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
||||||
type="info" />
|
type="info"
|
||||||
|
/>
|
||||||
<Alert
|
<Alert
|
||||||
message="警告提示的文案"
|
message="警告提示的文案"
|
||||||
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
|
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
|
||||||
type="warning" />
|
type="warning"
|
||||||
|
/>
|
||||||
<Alert
|
<Alert
|
||||||
message="错误提示的文案"
|
message="错误提示的文案"
|
||||||
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
|
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
|
||||||
type="error" />
|
type="error"
|
||||||
|
/>
|
||||||
</div>, mountNode);
|
</div>, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -16,20 +16,24 @@ ReactDOM.render(<div>
|
|||||||
<Alert message="成功提示的文案"
|
<Alert message="成功提示的文案"
|
||||||
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
|
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
|
||||||
type="success"
|
type="success"
|
||||||
showIcon />
|
showIcon
|
||||||
|
/>
|
||||||
<Alert message="消息提示的文案"
|
<Alert message="消息提示的文案"
|
||||||
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
||||||
type="info"
|
type="info"
|
||||||
showIcon />
|
showIcon
|
||||||
|
/>
|
||||||
<Alert
|
<Alert
|
||||||
message="警告提示的文案"
|
message="警告提示的文案"
|
||||||
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
|
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
|
||||||
type="warning"
|
type="warning"
|
||||||
showIcon />
|
showIcon
|
||||||
|
/>
|
||||||
<Alert
|
<Alert
|
||||||
message="错误提示的文案"
|
message="错误提示的文案"
|
||||||
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
|
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
|
||||||
type="error"
|
type="error"
|
||||||
showIcon />
|
showIcon
|
||||||
|
/>
|
||||||
</div>, mountNode);
|
</div>, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -82,7 +82,8 @@ export default class Alert extends React.Component {
|
|||||||
<Animate component=""
|
<Animate component=""
|
||||||
showProp="data-show"
|
showProp="data-show"
|
||||||
transitionName="slide-up"
|
transitionName="slide-up"
|
||||||
onEnd={this.animationEnd}>
|
onEnd={this.animationEnd}
|
||||||
|
>
|
||||||
<div data-show={this.state.closing} className={alertCls}>
|
<div data-show={this.state.closing} className={alertCls}>
|
||||||
{showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
|
{showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
|
||||||
<span className={`${prefixCls}-message`}>{message}</span>
|
<span className={`${prefixCls}-message`}>{message}</span>
|
||||||
|
@ -46,11 +46,13 @@ export default class Badge extends React.Component {
|
|||||||
<Animate component=""
|
<Animate component=""
|
||||||
showProp="data-show"
|
showProp="data-show"
|
||||||
transitionName={`${prefixCls}-zoom`}
|
transitionName={`${prefixCls}-zoom`}
|
||||||
transitionAppear>
|
transitionAppear
|
||||||
|
>
|
||||||
{
|
{
|
||||||
hidden ? null :
|
hidden ? null :
|
||||||
<ScrollNumber data-show={!hidden} className={scrollNumberCls}
|
<ScrollNumber data-show={!hidden} className={scrollNumberCls}
|
||||||
count={count} style={style} />
|
count={count} style={style}
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
</Animate>
|
</Animate>
|
||||||
</span>
|
</span>
|
||||||
|
@ -37,7 +37,8 @@ function Home(props) {
|
|||||||
marginTop: 15,
|
marginTop: 15,
|
||||||
paddingBottom: 15,
|
paddingBottom: 15,
|
||||||
borderBottom: '1px dashed #ccc',
|
borderBottom: '1px dashed #ccc',
|
||||||
}}>
|
}}
|
||||||
|
>
|
||||||
点击上面的导航切换页面,面包屑在下面:
|
点击上面的导航切换页面,面包屑在下面:
|
||||||
</div>
|
</div>
|
||||||
<Breadcrumb {...props} />
|
<Breadcrumb {...props} />
|
||||||
|
@ -104,7 +104,8 @@ export default class Button extends React.Component {
|
|||||||
type={htmlType || 'button'}
|
type={htmlType || 'button'}
|
||||||
className={classes}
|
className={classes}
|
||||||
onMouseUp={this.handleMouseUp}
|
onMouseUp={this.handleMouseUp}
|
||||||
onClick={this.handleClick}>
|
onClick={this.handleClick}
|
||||||
|
>
|
||||||
{iconType ? <Icon type={iconType} /> : null}{kids}
|
{iconType ? <Icon type={iconType} /> : null}{kids}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
@ -45,7 +45,8 @@ export default class Header extends React.Component {
|
|||||||
dropdownMenuStyle={{ minWidth: 103 }}
|
dropdownMenuStyle={{ minWidth: 103 }}
|
||||||
className={`${prefixCls}-year-select`}
|
className={`${prefixCls}-year-select`}
|
||||||
onChange={this.onYearChange}
|
onChange={this.onYearChange}
|
||||||
value={String(year)}>
|
value={String(year)}
|
||||||
|
>
|
||||||
{options}
|
{options}
|
||||||
</Select>
|
</Select>
|
||||||
);
|
);
|
||||||
@ -69,7 +70,8 @@ export default class Header extends React.Component {
|
|||||||
dropdownMatchSelectWidth={false}
|
dropdownMatchSelectWidth={false}
|
||||||
className={`${prefixCls}-month-select`}
|
className={`${prefixCls}-month-select`}
|
||||||
value={String(month)}
|
value={String(month)}
|
||||||
onChange={this.onMonthChange}>
|
onChange={this.onMonthChange}
|
||||||
|
>
|
||||||
{options}
|
{options}
|
||||||
</Select>
|
</Select>
|
||||||
);
|
);
|
||||||
|
@ -26,6 +26,7 @@ function monthCellRender(value) {
|
|||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Calendar defaultValue={new Date('2010-10-10')}
|
<Calendar defaultValue={new Date('2010-10-10')}
|
||||||
dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
|
dateCellRender={dateCellRender} monthCellRender={monthCellRender}
|
||||||
|
/>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -139,7 +139,8 @@ export default class Calendar extends React.Component {
|
|||||||
locale={locale.lang}
|
locale={locale.lang}
|
||||||
prefixCls={prefixCls}
|
prefixCls={prefixCls}
|
||||||
onTypeChange={this.setType}
|
onTypeChange={this.setType}
|
||||||
onValueChange={this.setValue} />
|
onValueChange={this.setValue}
|
||||||
|
/>
|
||||||
<FullCalendar
|
<FullCalendar
|
||||||
{...props}
|
{...props}
|
||||||
Select={noop}
|
Select={noop}
|
||||||
@ -149,7 +150,8 @@ export default class Calendar extends React.Component {
|
|||||||
showHeader={false}
|
showHeader={false}
|
||||||
value={value}
|
value={value}
|
||||||
monthCellRender={this.monthCellRender}
|
monthCellRender={this.monthCellRender}
|
||||||
dateCellRender={this.dateCellRender} />
|
dateCellRender={this.dateCellRender}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -56,6 +56,7 @@ ReactDOM.render(
|
|||||||
options={options}
|
options={options}
|
||||||
defaultValue={['zhejiang', 'hangzhou', 'xihu']}
|
defaultValue={['zhejiang', 'hangzhou', 'xihu']}
|
||||||
displayRender={displayRender}
|
displayRender={displayRender}
|
||||||
style={{ width: 200 }} />
|
style={{ width: 200 }}
|
||||||
|
/>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -43,6 +43,7 @@ function displayRender(label) {
|
|||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Cascader options={options} expandTrigger="hover"
|
<Cascader options={options} expandTrigger="hover"
|
||||||
displayRender={displayRender} onChange={onChange} />
|
displayRender={displayRender} onChange={onChange}
|
||||||
|
/>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -80,7 +80,8 @@ export default class Cascader extends React.Component {
|
|||||||
const clearIcon = (allowClear && !disabled && this.state.value.length > 0) ?
|
const clearIcon = (allowClear && !disabled && this.state.value.length > 0) ?
|
||||||
<Icon type="cross-circle"
|
<Icon type="cross-circle"
|
||||||
className={`${prefixCls}-picker-clear`}
|
className={`${prefixCls}-picker-clear`}
|
||||||
onClick={this.clearSelection} /> : null;
|
onClick={this.clearSelection}
|
||||||
|
/> : null;
|
||||||
const arrowCls = classNames({
|
const arrowCls = classNames({
|
||||||
[`${prefixCls}-picker-arrow`]: true,
|
[`${prefixCls}-picker-arrow`]: true,
|
||||||
[`${prefixCls}-picker-arrow-expand`]: this.state.popupVisible,
|
[`${prefixCls}-picker-arrow-expand`]: this.state.popupVisible,
|
||||||
@ -99,17 +100,20 @@ export default class Cascader extends React.Component {
|
|||||||
value={this.state.value}
|
value={this.state.value}
|
||||||
popupVisible={this.state.popupVisible}
|
popupVisible={this.state.popupVisible}
|
||||||
onPopupVisibleChange={this.handlePopupVisibleChange}
|
onPopupVisibleChange={this.handlePopupVisibleChange}
|
||||||
onChange={this.handleChange}>
|
onChange={this.handleChange}
|
||||||
|
>
|
||||||
{children ||
|
{children ||
|
||||||
<span
|
<span
|
||||||
style={style}
|
style={style}
|
||||||
className={pickerCls}>
|
className={pickerCls}
|
||||||
|
>
|
||||||
<Input {...otherProps}
|
<Input {...otherProps}
|
||||||
placeholder={this.state.value && this.state.value.length > 0 ? null : placeholder}
|
placeholder={this.state.value && this.state.value.length > 0 ? null : placeholder}
|
||||||
className={`${prefixCls}-input ant-input ${sizeCls}`}
|
className={`${prefixCls}-input ant-input ${sizeCls}`}
|
||||||
value={null}
|
value={null}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
readOnly />
|
readOnly
|
||||||
|
/>
|
||||||
<span className={`${prefixCls}-picker-label`}>{this.getLabel()}</span>
|
<span className={`${prefixCls}-picker-label`}>{this.getLabel()}</span>
|
||||||
{clearIcon}
|
{clearIcon}
|
||||||
<Icon type="down" className={arrowCls} />
|
<Icon type="down" className={arrowCls} />
|
||||||
|
@ -64,7 +64,8 @@ export default class CheckboxGroup extends React.Component {
|
|||||||
<Checkbox disabled={'disabled' in option ? option.disabled : this.props.disabled}
|
<Checkbox disabled={'disabled' in option ? option.disabled : this.props.disabled}
|
||||||
checked={this.state.value.indexOf(option.value) !== -1}
|
checked={this.state.value.indexOf(option.value) !== -1}
|
||||||
onChange={() => this.toggleOption(option)}
|
onChange={() => this.toggleOption(option)}
|
||||||
className="ant-checkbox-group-item" key={option.value}>
|
className="ant-checkbox-group-item" key={option.value}
|
||||||
|
>
|
||||||
{option.label}
|
{option.label}
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
)
|
)
|
||||||
|
@ -22,18 +22,21 @@ const App = React.createClass({
|
|||||||
<p style={{ marginBottom: '20px' }}>
|
<p style={{ marginBottom: '20px' }}>
|
||||||
<Checkbox checked={this.state.checked}
|
<Checkbox checked={this.state.checked}
|
||||||
disabled={this.state.disabled}
|
disabled={this.state.disabled}
|
||||||
onChange={this.onChange}>
|
onChange={this.onChange}
|
||||||
|
>
|
||||||
{label}
|
{label}
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<Button type="primary" size="small"
|
<Button type="primary" size="small"
|
||||||
onClick={this.toggleChecked}>
|
onClick={this.toggleChecked}
|
||||||
|
>
|
||||||
{!this.state.checked ? '选中' : '取消'}
|
{!this.state.checked ? '选中' : '取消'}
|
||||||
</Button>
|
</Button>
|
||||||
<Button style={{ marginLeft: '10px' }}
|
<Button style={{ marginLeft: '10px' }}
|
||||||
type="primary" size="small"
|
type="primary" size="small"
|
||||||
onClick={this.toggleDisable}>
|
onClick={this.toggleDisable}
|
||||||
|
>
|
||||||
{!this.state.disabled ? '不可用' : '可用'}
|
{!this.state.disabled ? '不可用' : '可用'}
|
||||||
</Button>
|
</Button>
|
||||||
</p>
|
</p>
|
||||||
|
@ -126,14 +126,16 @@ export default class RangePicker extends React.Component {
|
|||||||
onChange={props.handleInputChange}
|
onChange={props.handleInputChange}
|
||||||
value={start ? props.getFormatter().format(start) : ''}
|
value={start ? props.getFormatter().format(start) : ''}
|
||||||
placeholder={startPlaceholder}
|
placeholder={startPlaceholder}
|
||||||
className="ant-calendar-range-picker-input" />
|
className="ant-calendar-range-picker-input"
|
||||||
|
/>
|
||||||
<span className="ant-calendar-range-picker-separator"> ~ </span>
|
<span className="ant-calendar-range-picker-separator"> ~ </span>
|
||||||
<input
|
<input
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onChange={props.handleInputChange}
|
onChange={props.handleInputChange}
|
||||||
value={end ? props.getFormatter().format(end) : ''}
|
value={end ? props.getFormatter().format(end) : ''}
|
||||||
placeholder={endPlaceholder}
|
placeholder={endPlaceholder}
|
||||||
className="ant-calendar-range-picker-input" />
|
className="ant-calendar-range-picker-input"
|
||||||
|
/>
|
||||||
<span className="ant-calendar-picker-icon" />
|
<span className="ant-calendar-picker-icon" />
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
@ -94,7 +94,8 @@ export default function createPicker(TheCalendar) {
|
|||||||
onChange={props.handleInputChange}
|
onChange={props.handleInputChange}
|
||||||
value={value ? props.getFormatter().format(value) : ''}
|
value={value ? props.getFormatter().format(value) : ''}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
className={props.pickerInputClass} />
|
className={props.pickerInputClass}
|
||||||
|
/>
|
||||||
<span className="ant-calendar-picker-icon" />
|
<span className="ant-calendar-picker-icon" />
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
@ -45,11 +45,13 @@ const DateRange = React.createClass({
|
|||||||
<DatePicker disabledDate={this.disabledStartDate}
|
<DatePicker disabledDate={this.disabledStartDate}
|
||||||
value={this.state.startValue}
|
value={this.state.startValue}
|
||||||
placeholder="开始日期"
|
placeholder="开始日期"
|
||||||
onChange={this.onStartChange} />
|
onChange={this.onStartChange}
|
||||||
|
/>
|
||||||
<DatePicker disabledDate={this.disabledEndDate}
|
<DatePicker disabledDate={this.disabledEndDate}
|
||||||
value={this.state.endValue}
|
value={this.state.endValue}
|
||||||
placeholder="结束日期"
|
placeholder="结束日期"
|
||||||
onChange={this.onEndChange} />
|
onChange={this.onEndChange}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
@ -103,7 +103,7 @@ export default function wrapPicker(Picker, defaultFormat) {
|
|||||||
placeholder={locale.timePickerLocale.placeholder}
|
placeholder={locale.timePickerLocale.placeholder}
|
||||||
locale={locale.timePickerLocale}
|
locale={locale.timePickerLocale}
|
||||||
transitionName="slide-up"
|
transitionName="slide-up"
|
||||||
/>
|
/>
|
||||||
) : null;
|
) : null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -33,7 +33,8 @@ const OverlayVisible = React.createClass({
|
|||||||
return (
|
return (
|
||||||
<Dropdown overlay={menu}
|
<Dropdown overlay={menu}
|
||||||
onVisibleChange={this.handleVisibleChange}
|
onVisibleChange={this.handleVisibleChange}
|
||||||
visible={this.state.visible}>
|
visible={this.state.visible}
|
||||||
|
>
|
||||||
<a className="ant-dropdown-link" href="#">
|
<a className="ant-dropdown-link" href="#">
|
||||||
鼠标移入 <Icon type="down" />
|
鼠标移入 <Icon type="down" />
|
||||||
</a>
|
</a>
|
||||||
|
@ -18,19 +18,22 @@ ReactDOM.render(
|
|||||||
<FormItem
|
<FormItem
|
||||||
label="搜索名称"
|
label="搜索名称"
|
||||||
labelCol={{ span: 10 }}
|
labelCol={{ span: 10 }}
|
||||||
wrapperCol={{ span: 14 }}>
|
wrapperCol={{ span: 14 }}
|
||||||
|
>
|
||||||
<Input placeholder="请输入搜索名称" size="default" />
|
<Input placeholder="请输入搜索名称" size="default" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem
|
<FormItem
|
||||||
label="较长搜索名称"
|
label="较长搜索名称"
|
||||||
labelCol={{ span: 10 }}
|
labelCol={{ span: 10 }}
|
||||||
wrapperCol={{ span: 14 }}>
|
wrapperCol={{ span: 14 }}
|
||||||
|
>
|
||||||
<DatePicker size="default" />
|
<DatePicker size="default" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem
|
<FormItem
|
||||||
label="搜索名称"
|
label="搜索名称"
|
||||||
labelCol={{ span: 10 }}
|
labelCol={{ span: 10 }}
|
||||||
wrapperCol={{ span: 14 }}>
|
wrapperCol={{ span: 14 }}
|
||||||
|
>
|
||||||
<Input placeholder="请输入搜索名称" size="default" />
|
<Input placeholder="请输入搜索名称" size="default" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Col>
|
</Col>
|
||||||
@ -38,19 +41,22 @@ ReactDOM.render(
|
|||||||
<FormItem
|
<FormItem
|
||||||
label="搜索名称"
|
label="搜索名称"
|
||||||
labelCol={{ span: 10 }}
|
labelCol={{ span: 10 }}
|
||||||
wrapperCol={{ span: 14 }}>
|
wrapperCol={{ span: 14 }}
|
||||||
|
>
|
||||||
<Input placeholder="请输入搜索名称" size="default" />
|
<Input placeholder="请输入搜索名称" size="default" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem
|
<FormItem
|
||||||
label="较长搜索名称"
|
label="较长搜索名称"
|
||||||
labelCol={{ span: 10 }}
|
labelCol={{ span: 10 }}
|
||||||
wrapperCol={{ span: 14 }}>
|
wrapperCol={{ span: 14 }}
|
||||||
|
>
|
||||||
<DatePicker size="default" />
|
<DatePicker size="default" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem
|
<FormItem
|
||||||
label="搜索名称"
|
label="搜索名称"
|
||||||
labelCol={{ span: 10 }}
|
labelCol={{ span: 10 }}
|
||||||
wrapperCol={{ span: 14 }}>
|
wrapperCol={{ span: 14 }}
|
||||||
|
>
|
||||||
<Input placeholder="请输入搜索名称" size="default" />
|
<Input placeholder="请输入搜索名称" size="default" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Col>
|
</Col>
|
||||||
@ -58,19 +64,22 @@ ReactDOM.render(
|
|||||||
<FormItem
|
<FormItem
|
||||||
label="搜索名称"
|
label="搜索名称"
|
||||||
labelCol={{ span: 10 }}
|
labelCol={{ span: 10 }}
|
||||||
wrapperCol={{ span: 14 }}>
|
wrapperCol={{ span: 14 }}
|
||||||
|
>
|
||||||
<Input placeholder="请输入搜索名称" size="default" />
|
<Input placeholder="请输入搜索名称" size="default" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem
|
<FormItem
|
||||||
label="较长搜索名称"
|
label="较长搜索名称"
|
||||||
labelCol={{ span: 10 }}
|
labelCol={{ span: 10 }}
|
||||||
wrapperCol={{ span: 14 }}>
|
wrapperCol={{ span: 14 }}
|
||||||
|
>
|
||||||
<DatePicker size="default" />
|
<DatePicker size="default" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem
|
<FormItem
|
||||||
label="搜索名称"
|
label="搜索名称"
|
||||||
labelCol={{ span: 10 }}
|
labelCol={{ span: 10 }}
|
||||||
wrapperCol={{ span: 14 }}>
|
wrapperCol={{ span: 14 }}
|
||||||
|
>
|
||||||
<Input placeholder="请输入搜索名称" size="default" />
|
<Input placeholder="请输入搜索名称" size="default" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Col>
|
</Col>
|
||||||
|
@ -23,7 +23,8 @@ ReactDOM.render(
|
|||||||
id="control-input"
|
id="control-input"
|
||||||
label="输入框"
|
label="输入框"
|
||||||
labelCol={{ span: 6 }}
|
labelCol={{ span: 6 }}
|
||||||
wrapperCol={{ span: 14 }}>
|
wrapperCol={{ span: 14 }}
|
||||||
|
>
|
||||||
<Input id="control-input" placeholder="Please enter..." />
|
<Input id="control-input" placeholder="Please enter..." />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
@ -31,7 +32,8 @@ ReactDOM.render(
|
|||||||
id="control-textarea"
|
id="control-textarea"
|
||||||
label="文本域"
|
label="文本域"
|
||||||
labelCol={{ span: 6 }}
|
labelCol={{ span: 6 }}
|
||||||
wrapperCol={{ span: 14 }}>
|
wrapperCol={{ span: 14 }}
|
||||||
|
>
|
||||||
<Input type="textarea" id="control-textarea" rows="3" />
|
<Input type="textarea" id="control-textarea" rows="3" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
@ -39,7 +41,8 @@ ReactDOM.render(
|
|||||||
id="select"
|
id="select"
|
||||||
label="Select 选择器"
|
label="Select 选择器"
|
||||||
labelCol={{ span: 6 }}
|
labelCol={{ span: 6 }}
|
||||||
wrapperCol={{ span: 14 }}>
|
wrapperCol={{ span: 14 }}
|
||||||
|
>
|
||||||
<Select id="select" size="large" defaultValue="lucy" style={{ width: 200 }} onChange={handleSelectChange}>
|
<Select id="select" size="large" defaultValue="lucy" style={{ width: 200 }} onChange={handleSelectChange}>
|
||||||
<Option value="jack">jack</Option>
|
<Option value="jack">jack</Option>
|
||||||
<Option value="lucy">lucy</Option>
|
<Option value="lucy">lucy</Option>
|
||||||
@ -51,7 +54,8 @@ ReactDOM.render(
|
|||||||
<FormItem
|
<FormItem
|
||||||
label="Checkbox 多选框"
|
label="Checkbox 多选框"
|
||||||
labelCol={{ span: 6 }}
|
labelCol={{ span: 6 }}
|
||||||
wrapperCol={{ span: 18 }} >
|
wrapperCol={{ span: 18 }}
|
||||||
|
>
|
||||||
<Checkbox className="ant-checkbox-vertical">选项一</Checkbox>
|
<Checkbox className="ant-checkbox-vertical">选项一</Checkbox>
|
||||||
<Checkbox className="ant-checkbox-vertical">选项二</Checkbox>
|
<Checkbox className="ant-checkbox-vertical">选项二</Checkbox>
|
||||||
<Checkbox className="ant-checkbox-vertical" disabled>选项三(不可选)</Checkbox>
|
<Checkbox className="ant-checkbox-vertical" disabled>选项三(不可选)</Checkbox>
|
||||||
@ -60,7 +64,8 @@ ReactDOM.render(
|
|||||||
<FormItem
|
<FormItem
|
||||||
label="Checkbox 多选框"
|
label="Checkbox 多选框"
|
||||||
labelCol={{ span: 6 }}
|
labelCol={{ span: 6 }}
|
||||||
wrapperCol={{ span: 18 }} >
|
wrapperCol={{ span: 18 }}
|
||||||
|
>
|
||||||
<Checkbox className="ant-checkbox-inline">选项一</Checkbox>
|
<Checkbox className="ant-checkbox-inline">选项一</Checkbox>
|
||||||
<Checkbox className="ant-checkbox-inline">选项二</Checkbox>
|
<Checkbox className="ant-checkbox-inline">选项二</Checkbox>
|
||||||
<Checkbox className="ant-checkbox-inline">选项三</Checkbox>
|
<Checkbox className="ant-checkbox-inline">选项三</Checkbox>
|
||||||
@ -69,7 +74,8 @@ ReactDOM.render(
|
|||||||
<FormItem
|
<FormItem
|
||||||
label="Radio 单选框"
|
label="Radio 单选框"
|
||||||
labelCol={{ span: 6 }}
|
labelCol={{ span: 6 }}
|
||||||
wrapperCol={{ span: 18 }} >
|
wrapperCol={{ span: 18 }}
|
||||||
|
>
|
||||||
<RadioGroup defaultValue="b">
|
<RadioGroup defaultValue="b">
|
||||||
<Radio value="a">A</Radio>
|
<Radio value="a">A</Radio>
|
||||||
<Radio value="b">B</Radio>
|
<Radio value="b">B</Radio>
|
||||||
|
@ -42,12 +42,14 @@ let Demo = React.createClass({
|
|||||||
<Form horizontal form={this.props.form}>
|
<Form horizontal form={this.props.form}>
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="用户名">
|
label="用户名"
|
||||||
|
>
|
||||||
<Input {...getFieldProps('username', {})} type="text" autoComplete="off" />
|
<Input {...getFieldProps('username', {})} type="text" autoComplete="off" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="密码">
|
label="密码"
|
||||||
|
>
|
||||||
<Input {...getFieldProps('password', {})} type="password" autoComplete="off" />
|
<Input {...getFieldProps('password', {})} type="password" autoComplete="off" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Form>
|
</Form>
|
||||||
|
@ -26,17 +26,20 @@ let Demo = React.createClass({
|
|||||||
<Form horizontal onSubmit={this.handleSubmit}>
|
<Form horizontal onSubmit={this.handleSubmit}>
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="用户名">
|
label="用户名"
|
||||||
|
>
|
||||||
<p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
|
<p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="密码">
|
label="密码"
|
||||||
|
>
|
||||||
<Input type="password" {...getFieldProps('pass')} placeholder="请输入密码" />
|
<Input type="password" {...getFieldProps('pass')} placeholder="请输入密码" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="您的性别">
|
label="您的性别"
|
||||||
|
>
|
||||||
<RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
|
<RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
|
||||||
<Radio value="male">男的</Radio>
|
<Radio value="male">男的</Radio>
|
||||||
<Radio value="female">女的</Radio>
|
<Radio value="female">女的</Radio>
|
||||||
@ -45,12 +48,14 @@ let Demo = React.createClass({
|
|||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="备注"
|
label="备注"
|
||||||
help="随便写点什么">
|
help="随便写点什么"
|
||||||
|
>
|
||||||
<Input type="textarea" placeholder="随便写" {...getFieldProps('remark')} />
|
<Input type="textarea" placeholder="随便写" {...getFieldProps('remark')} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}>
|
label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}
|
||||||
|
>
|
||||||
<Checkbox {...getFieldProps('agreement')}>同意</Checkbox>
|
<Checkbox {...getFieldProps('agreement')}>同意</Checkbox>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>
|
<FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>
|
||||||
|
@ -20,14 +20,18 @@ let Demo = React.createClass({
|
|||||||
return (
|
return (
|
||||||
<Form inline onSubmit={this.handleSubmit}>
|
<Form inline onSubmit={this.handleSubmit}>
|
||||||
<FormItem
|
<FormItem
|
||||||
label="账户">
|
label="账户"
|
||||||
|
>
|
||||||
<Input placeholder="请输入账户名"
|
<Input placeholder="请输入账户名"
|
||||||
{...getFieldProps('userName')} />
|
{...getFieldProps('userName')}
|
||||||
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem
|
<FormItem
|
||||||
label="密码">
|
label="密码"
|
||||||
|
>
|
||||||
<Input type="password" placeholder="请输入密码"
|
<Input type="password" placeholder="请输入密码"
|
||||||
{...getFieldProps('password')} />
|
{...getFieldProps('password')}
|
||||||
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<Checkbox {...getFieldProps('agreement')}>记住我</Checkbox>
|
<Checkbox {...getFieldProps('agreement')}>记住我</Checkbox>
|
||||||
|
@ -16,7 +16,8 @@ ReactDOM.render(
|
|||||||
<FormItem
|
<FormItem
|
||||||
label="标签输入框"
|
label="标签输入框"
|
||||||
labelCol={{ span: 6 }}
|
labelCol={{ span: 6 }}
|
||||||
wrapperCol={{ span: 16 }}>
|
wrapperCol={{ span: 16 }}
|
||||||
|
>
|
||||||
<Input addonBefore="Http://" defaultValue="mysite.com" id="site1" />
|
<Input addonBefore="Http://" defaultValue="mysite.com" id="site1" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
@ -24,14 +25,16 @@ ReactDOM.render(
|
|||||||
label="标签输入框"
|
label="标签输入框"
|
||||||
labelCol={{ span: 6 }}
|
labelCol={{ span: 6 }}
|
||||||
validateStatus="success"
|
validateStatus="success"
|
||||||
wrapperCol={{ span: 16 }}>
|
wrapperCol={{ span: 16 }}
|
||||||
|
>
|
||||||
<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2" />
|
<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
label="select 标签输入框"
|
label="select 标签输入框"
|
||||||
labelCol={{ span: 6 }}
|
labelCol={{ span: 6 }}
|
||||||
wrapperCol={{ span: 16 }}>
|
wrapperCol={{ span: 16 }}
|
||||||
|
>
|
||||||
<InputGroup>
|
<InputGroup>
|
||||||
<Input id="site4" placeholder="www.mysite" />
|
<Input id="site4" placeholder="www.mysite" />
|
||||||
<div className="ant-input-group-wrap">
|
<div className="ant-input-group-wrap">
|
||||||
@ -48,7 +51,8 @@ ReactDOM.render(
|
|||||||
<FormItem
|
<FormItem
|
||||||
label="输入身份证"
|
label="输入身份证"
|
||||||
labelCol={{ span: 6 }}
|
labelCol={{ span: 6 }}
|
||||||
wrapperCol={{ span: 16 }}>
|
wrapperCol={{ span: 16 }}
|
||||||
|
>
|
||||||
<InputGroup>
|
<InputGroup>
|
||||||
<Col span="6">
|
<Col span="6">
|
||||||
<Input id="certNo1" />
|
<Input id="certNo1" />
|
||||||
@ -68,7 +72,8 @@ ReactDOM.render(
|
|||||||
<FormItem
|
<FormItem
|
||||||
label="电话号码"
|
label="电话号码"
|
||||||
labelCol={{ span: 6 }}
|
labelCol={{ span: 6 }}
|
||||||
wrapperCol={{ span: 16 }}>
|
wrapperCol={{ span: 16 }}
|
||||||
|
>
|
||||||
<InputGroup>
|
<InputGroup>
|
||||||
<Col span="4">
|
<Col span="4">
|
||||||
<Input id="tel1" defaultValue="086" />
|
<Input id="tel1" defaultValue="086" />
|
||||||
|
@ -46,16 +46,19 @@ let Demo = React.createClass({
|
|||||||
<FormItem
|
<FormItem
|
||||||
label="InputNumber 数字输入框"
|
label="InputNumber 数字输入框"
|
||||||
labelCol={{ span: 8 }}
|
labelCol={{ span: 8 }}
|
||||||
wrapperCol={{ span: 10 }}>
|
wrapperCol={{ span: 10 }}
|
||||||
|
>
|
||||||
<InputNumber min={1} max={10} style={{ width: 100 }}
|
<InputNumber min={1} max={10} style={{ width: 100 }}
|
||||||
{...getFieldProps('inputNumber', { initialValue: 3 })} />
|
{...getFieldProps('inputNumber', { initialValue: 3 })}
|
||||||
|
/>
|
||||||
<span className="ant-form-text"> 台机器</span>
|
<span className="ant-form-text"> 台机器</span>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
label="我是标题"
|
label="我是标题"
|
||||||
labelCol={{ span: 8 }}
|
labelCol={{ span: 8 }}
|
||||||
wrapperCol={{ span: 10 }}>
|
wrapperCol={{ span: 10 }}
|
||||||
|
>
|
||||||
<p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
|
<p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
|
||||||
<p className="ant-form-text">
|
<p className="ant-form-text">
|
||||||
<a href="#">链接文字</a>
|
<a href="#">链接文字</a>
|
||||||
@ -66,7 +69,8 @@ let Demo = React.createClass({
|
|||||||
label="Switch 开关"
|
label="Switch 开关"
|
||||||
labelCol={{ span: 8 }}
|
labelCol={{ span: 8 }}
|
||||||
wrapperCol={{ span: 10 }}
|
wrapperCol={{ span: 10 }}
|
||||||
required>
|
required
|
||||||
|
>
|
||||||
<Switch {...getFieldProps('switch', { valuePropName: 'checked' })} />
|
<Switch {...getFieldProps('switch', { valuePropName: 'checked' })} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
@ -74,7 +78,8 @@ let Demo = React.createClass({
|
|||||||
label="Slider 滑动输入条"
|
label="Slider 滑动输入条"
|
||||||
labelCol={{ span: 8 }}
|
labelCol={{ span: 8 }}
|
||||||
wrapperCol={{ span: 10 }}
|
wrapperCol={{ span: 10 }}
|
||||||
required>
|
required
|
||||||
|
>
|
||||||
<Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} {...getFieldProps('slider')} />
|
<Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} {...getFieldProps('slider')} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
@ -82,9 +87,11 @@ let Demo = React.createClass({
|
|||||||
label="Select 选择器"
|
label="Select 选择器"
|
||||||
labelCol={{ span: 8 }}
|
labelCol={{ span: 8 }}
|
||||||
wrapperCol={{ span: 16 }}
|
wrapperCol={{ span: 16 }}
|
||||||
required>
|
required
|
||||||
|
>
|
||||||
<Select style={{ width: 200 }}
|
<Select style={{ width: 200 }}
|
||||||
{...getFieldProps('select')}>
|
{...getFieldProps('select')}
|
||||||
|
>
|
||||||
<Option value="jack">jack</Option>
|
<Option value="jack">jack</Option>
|
||||||
<Option value="lucy">lucy</Option>
|
<Option value="lucy">lucy</Option>
|
||||||
<Option value="disabled" disabled>disabled</Option>
|
<Option value="disabled" disabled>disabled</Option>
|
||||||
@ -97,14 +104,16 @@ let Demo = React.createClass({
|
|||||||
labelCol={{ span: 8 }}
|
labelCol={{ span: 8 }}
|
||||||
wrapperCol={{ span: 16 }}
|
wrapperCol={{ span: 16 }}
|
||||||
required
|
required
|
||||||
hasFeedback>
|
hasFeedback
|
||||||
|
>
|
||||||
<Cascader style={{ width: 200 }} options={areaData} {...getFieldProps('area')} />
|
<Cascader style={{ width: 200 }} options={areaData} {...getFieldProps('area')} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
label="DatePicker 日期选择框"
|
label="DatePicker 日期选择框"
|
||||||
labelCol={{ span: 8 }}
|
labelCol={{ span: 8 }}
|
||||||
required>
|
required
|
||||||
|
>
|
||||||
<Col span="6">
|
<Col span="6">
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<DatePicker {...getFieldProps('startDate')} />
|
<DatePicker {...getFieldProps('startDate')} />
|
||||||
@ -125,13 +134,15 @@ let Demo = React.createClass({
|
|||||||
label="TimePicker 时间选择器"
|
label="TimePicker 时间选择器"
|
||||||
labelCol={{ span: 8 }}
|
labelCol={{ span: 8 }}
|
||||||
wrapperCol={{ span: 16 }}
|
wrapperCol={{ span: 16 }}
|
||||||
required>
|
required
|
||||||
|
>
|
||||||
<TimePicker {...getFieldProps('time')} />
|
<TimePicker {...getFieldProps('time')} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
label="选项"
|
label="选项"
|
||||||
labelCol={{ span: 8 }}>
|
labelCol={{ span: 8 }}
|
||||||
|
>
|
||||||
<RadioGroup {...getFieldProps('rg')}>
|
<RadioGroup {...getFieldProps('rg')}>
|
||||||
<RadioButton value="a">选项一</RadioButton>
|
<RadioButton value="a">选项一</RadioButton>
|
||||||
<RadioButton value="b">选项二</RadioButton>
|
<RadioButton value="b">选项二</RadioButton>
|
||||||
@ -143,7 +154,8 @@ let Demo = React.createClass({
|
|||||||
label="logo图"
|
label="logo图"
|
||||||
labelCol={{ span: 8 }}
|
labelCol={{ span: 8 }}
|
||||||
wrapperCol={{ span: 16 }}
|
wrapperCol={{ span: 16 }}
|
||||||
help="提示信息要长长长长长长长长长长长长长长">
|
help="提示信息要长长长长长长长长长长长长长长"
|
||||||
|
>
|
||||||
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}
|
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}
|
||||||
{...getFieldProps('upload', {
|
{...getFieldProps('upload', {
|
||||||
valuePropName: 'fileList',
|
valuePropName: 'fileList',
|
||||||
|
@ -114,36 +114,43 @@ let BasicDemo = React.createClass({
|
|||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="用户名"
|
label="用户名"
|
||||||
hasFeedback
|
hasFeedback
|
||||||
help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}>
|
help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}
|
||||||
|
>
|
||||||
<Input {...nameProps} placeholder="实时校验,输入 JasonWood 看看" />
|
<Input {...nameProps} placeholder="实时校验,输入 JasonWood 看看" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="邮箱"
|
label="邮箱"
|
||||||
hasFeedback>
|
hasFeedback
|
||||||
|
>
|
||||||
<Input {...emailProps} type="email" placeholder="onBlur 与 onChange 相结合" />
|
<Input {...emailProps} type="email" placeholder="onBlur 与 onChange 相结合" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="密码"
|
label="密码"
|
||||||
hasFeedback>
|
hasFeedback
|
||||||
|
>
|
||||||
<Input {...passwdProps} type="password" autoComplete="off"
|
<Input {...passwdProps} type="password" autoComplete="off"
|
||||||
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
|
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
|
||||||
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="确认密码"
|
label="确认密码"
|
||||||
hasFeedback>
|
hasFeedback
|
||||||
|
>
|
||||||
<Input {...rePasswdProps} type="password" autoComplete="off" placeholder="两次输入密码保持一致"
|
<Input {...rePasswdProps} type="password" autoComplete="off" placeholder="两次输入密码保持一致"
|
||||||
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
|
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
|
||||||
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="备注">
|
label="备注"
|
||||||
|
>
|
||||||
<Input {...textareaProps} type="textarea" placeholder="随便写" id="textarea" name="textarea" />
|
<Input {...textareaProps} type="textarea" placeholder="随便写" id="textarea" name="textarea" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
|
@ -145,7 +145,8 @@ let Demo = React.createClass({
|
|||||||
<Col span="18">
|
<Col span="18">
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="密码">
|
label="密码"
|
||||||
|
>
|
||||||
<Input {...passProps} type="password"
|
<Input {...passProps} type="password"
|
||||||
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
|
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
|
||||||
autoComplete="off" id="pass"
|
autoComplete="off" id="pass"
|
||||||
@ -161,7 +162,8 @@ let Demo = React.createClass({
|
|||||||
<Col span="18">
|
<Col span="18">
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="确认密码">
|
label="确认密码"
|
||||||
|
>
|
||||||
<Input {...rePassProps} type="password"
|
<Input {...rePassProps} type="password"
|
||||||
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
|
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
|
||||||
autoComplete="off" id="rePass"
|
autoComplete="off" id="rePass"
|
||||||
|
@ -110,7 +110,8 @@ let Demo = React.createClass({
|
|||||||
<Form horizontal form={this.props.form}>
|
<Form horizontal form={this.props.form}>
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="国籍">
|
label="国籍"
|
||||||
|
>
|
||||||
<Select {...selectProps} placeholder="请选择国家" style={{ width: '100%' }}>
|
<Select {...selectProps} placeholder="请选择国家" style={{ width: '100%' }}>
|
||||||
<Option value="china">中国</Option>
|
<Option value="china">中国</Option>
|
||||||
<Option value="use">美国</Option>
|
<Option value="use">美国</Option>
|
||||||
@ -122,7 +123,8 @@ let Demo = React.createClass({
|
|||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="喜欢的颜色">
|
label="喜欢的颜色"
|
||||||
|
>
|
||||||
<Select {...multiSelectProps} multiple placeholder="请选择颜色" style={{ width: '100%' }}>
|
<Select {...multiSelectProps} multiple placeholder="请选择颜色" style={{ width: '100%' }}>
|
||||||
<Option value="red">红色</Option>
|
<Option value="red">红色</Option>
|
||||||
<Option value="orange">橙色</Option>
|
<Option value="orange">橙色</Option>
|
||||||
@ -134,7 +136,8 @@ let Demo = React.createClass({
|
|||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="性别">
|
label="性别"
|
||||||
|
>
|
||||||
<RadioGroup {...radioProps}>
|
<RadioGroup {...radioProps}>
|
||||||
<Radio value="male">男</Radio>
|
<Radio value="male">男</Radio>
|
||||||
<Radio value="female">女</Radio>
|
<Radio value="female">女</Radio>
|
||||||
@ -144,44 +147,53 @@ let Demo = React.createClass({
|
|||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="兴趣爱好">
|
label="兴趣爱好"
|
||||||
|
>
|
||||||
<Checkbox {...getFieldProps('eat', {
|
<Checkbox {...getFieldProps('eat', {
|
||||||
valuePropName: 'checked',
|
valuePropName: 'checked',
|
||||||
})}>吃饭饭</Checkbox>
|
})}
|
||||||
|
>吃饭饭</Checkbox>
|
||||||
<Checkbox {...getFieldProps('sleep', {
|
<Checkbox {...getFieldProps('sleep', {
|
||||||
valuePropName: 'checked',
|
valuePropName: 'checked',
|
||||||
})}>睡觉觉</Checkbox>
|
})}
|
||||||
|
>睡觉觉</Checkbox>
|
||||||
<Checkbox {...getFieldProps('beat', {
|
<Checkbox {...getFieldProps('beat', {
|
||||||
valuePropName: 'checked',
|
valuePropName: 'checked',
|
||||||
})}>打豆豆</Checkbox>
|
})}
|
||||||
|
>打豆豆</Checkbox>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="生日">
|
label="生日"
|
||||||
|
>
|
||||||
<DatePicker {...birthdayProps} />
|
<DatePicker {...birthdayProps} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="选一个时间">
|
label="选一个时间"
|
||||||
|
>
|
||||||
<TimePicker {...timeProps} />
|
<TimePicker {...timeProps} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="8~12间的质数">
|
label="8~12间的质数"
|
||||||
|
>
|
||||||
<InputNumber {...primeNumberProps} min={8} max={12} />
|
<InputNumber {...primeNumberProps} min={8} max={12} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="选择地址">
|
label="选择地址"
|
||||||
|
>
|
||||||
<Cascader {...addressProps} options={address} />
|
<Cascader {...addressProps} options={address} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
wrapperCol={{ span: 12, offset: 7 }} >
|
wrapperCol={{ span: 12, offset: 7 }}
|
||||||
|
>
|
||||||
<Button type="primary" onClick={this.handleSubmit}>确定</Button>
|
<Button type="primary" onClick={this.handleSubmit}>确定</Button>
|
||||||
|
|
||||||
<Button type="ghost" onClick={this.handleReset}>重置</Button>
|
<Button type="ghost" onClick={this.handleReset}>重置</Button>
|
||||||
|
@ -22,7 +22,8 @@ ReactDOM.render(
|
|||||||
labelCol={{ span: 5 }}
|
labelCol={{ span: 5 }}
|
||||||
wrapperCol={{ span: 12 }}
|
wrapperCol={{ span: 12 }}
|
||||||
validateStatus="error"
|
validateStatus="error"
|
||||||
help="请输入数字和字母组合">
|
help="请输入数字和字母组合"
|
||||||
|
>
|
||||||
<Input defaultValue="无效选择" id="error" />
|
<Input defaultValue="无效选择" id="error" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
@ -30,7 +31,8 @@ ReactDOM.render(
|
|||||||
label="警告校验"
|
label="警告校验"
|
||||||
labelCol={{ span: 5 }}
|
labelCol={{ span: 5 }}
|
||||||
wrapperCol={{ span: 12 }}
|
wrapperCol={{ span: 12 }}
|
||||||
validateStatus="warning">
|
validateStatus="warning"
|
||||||
|
>
|
||||||
<Input defaultValue="前方高能预警" id="warning" />
|
<Input defaultValue="前方高能预警" id="warning" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
@ -40,7 +42,8 @@ ReactDOM.render(
|
|||||||
wrapperCol={{ span: 12 }}
|
wrapperCol={{ span: 12 }}
|
||||||
hasFeedback
|
hasFeedback
|
||||||
validateStatus="validating"
|
validateStatus="validating"
|
||||||
help="信息审核中...">
|
help="信息审核中..."
|
||||||
|
>
|
||||||
<Input defaultValue="我是被校验的内容" id="validating" />
|
<Input defaultValue="我是被校验的内容" id="validating" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
@ -49,7 +52,8 @@ ReactDOM.render(
|
|||||||
labelCol={{ span: 5 }}
|
labelCol={{ span: 5 }}
|
||||||
wrapperCol={{ span: 12 }}
|
wrapperCol={{ span: 12 }}
|
||||||
hasFeedback
|
hasFeedback
|
||||||
validateStatus="success">
|
validateStatus="success"
|
||||||
|
>
|
||||||
<Input defaultValue="我是正文" id="success" />
|
<Input defaultValue="我是正文" id="success" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
@ -58,7 +62,8 @@ ReactDOM.render(
|
|||||||
labelCol={{ span: 5 }}
|
labelCol={{ span: 5 }}
|
||||||
wrapperCol={{ span: 12 }}
|
wrapperCol={{ span: 12 }}
|
||||||
hasFeedback
|
hasFeedback
|
||||||
validateStatus="warning">
|
validateStatus="warning"
|
||||||
|
>
|
||||||
<Input defaultValue="前方高能预警" id="warning" />
|
<Input defaultValue="前方高能预警" id="warning" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
@ -68,14 +73,16 @@ ReactDOM.render(
|
|||||||
wrapperCol={{ span: 12 }}
|
wrapperCol={{ span: 12 }}
|
||||||
hasFeedback
|
hasFeedback
|
||||||
validateStatus="error"
|
validateStatus="error"
|
||||||
help="请输入数字和字母组合">
|
help="请输入数字和字母组合"
|
||||||
|
>
|
||||||
<Input defaultValue="无效选择" id="error" />
|
<Input defaultValue="无效选择" id="error" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
label="行内校验"
|
label="行内校验"
|
||||||
labelCol={{ span: 5 }}
|
labelCol={{ span: 5 }}
|
||||||
help>
|
help
|
||||||
|
>
|
||||||
<Col span="6">
|
<Col span="6">
|
||||||
<FormItem validateStatus="error" help="请选择正确日期">
|
<FormItem validateStatus="error" help="请选择正确日期">
|
||||||
<DatePicker />
|
<DatePicker />
|
||||||
|
@ -99,12 +99,14 @@ export default class Input extends React.Component {
|
|||||||
case 'textarea':
|
case 'textarea':
|
||||||
return (
|
return (
|
||||||
<textarea {...props} placeholder={placeholder}
|
<textarea {...props} placeholder={placeholder}
|
||||||
className={inputClassName} onKeyDown={this.handleKeyDown} ref="input" />
|
className={inputClassName} onKeyDown={this.handleKeyDown} ref="input"
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
default:
|
default:
|
||||||
return (
|
return (
|
||||||
<input {...props} placeholder={placeholder}
|
<input {...props} placeholder={placeholder}
|
||||||
className={inputClassName} onKeyDown={this.handleKeyDown} ref="input" />
|
className={inputClassName} onKeyDown={this.handleKeyDown} ref="input"
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -46,7 +46,8 @@ const SearchInput = React.createClass({
|
|||||||
<div className="ant-search-input-wrapper" style={style}>
|
<div className="ant-search-input-wrapper" style={style}>
|
||||||
<InputGroup className={searchCls}>
|
<InputGroup className={searchCls}>
|
||||||
<Input {...restProps} value={this.state.value} onChange={this.handleInputChange}
|
<Input {...restProps} value={this.state.value} onChange={this.handleInputChange}
|
||||||
onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} onPressEnter={this.handleSearch} />
|
onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} onPressEnter={this.handleSearch}
|
||||||
|
/>
|
||||||
<div className="ant-input-group-wrap">
|
<div className="ant-input-group-wrap">
|
||||||
<Button icon="search" className={btnCls} size={size} onClick={this.handleSearch} />
|
<Button icon="search" className={btnCls} size={size} onClick={this.handleSearch} />
|
||||||
</div>
|
</div>
|
||||||
@ -58,6 +59,7 @@ const SearchInput = React.createClass({
|
|||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<SearchInput placeholder="input search text"
|
<SearchInput placeholder="input search text"
|
||||||
onSearch={value => console.log(value)} style={{ width: 200 }} />
|
onSearch={value => console.log(value)} style={{ width: 200 }}
|
||||||
|
/>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -77,7 +77,8 @@ const Page = React.createClass({
|
|||||||
showSearch
|
showSearch
|
||||||
titles={['', '']}
|
titles={['', '']}
|
||||||
targetKeys={[]}
|
targetKeys={[]}
|
||||||
render={item => item.title} />
|
render={item => item.title}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}>
|
<div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}>
|
||||||
<Calendar fullscreen={false} />
|
<Calendar fullscreen={false} />
|
||||||
|
@ -26,7 +26,8 @@ const App = React.createClass({
|
|||||||
return (
|
return (
|
||||||
<Menu onClick={this.handleClick}
|
<Menu onClick={this.handleClick}
|
||||||
selectedKeys={[this.state.current]}
|
selectedKeys={[this.state.current]}
|
||||||
mode="horizontal">
|
mode="horizontal"
|
||||||
|
>
|
||||||
<Menu.Item key="mail">
|
<Menu.Item key="mail">
|
||||||
<Icon type="mail" />导航一
|
<Icon type="mail" />导航一
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
|
@ -36,7 +36,8 @@ const Sider = React.createClass({
|
|||||||
onOpen={this.onToggle}
|
onOpen={this.onToggle}
|
||||||
onClose={this.onToggle}
|
onClose={this.onToggle}
|
||||||
selectedKeys={[this.state.current]}
|
selectedKeys={[this.state.current]}
|
||||||
mode="inline">
|
mode="inline"
|
||||||
|
>
|
||||||
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
|
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
|
||||||
<Menu.Item key="1">选项1</Menu.Item>
|
<Menu.Item key="1">选项1</Menu.Item>
|
||||||
<Menu.Item key="2">选项2</Menu.Item>
|
<Menu.Item key="2">选项2</Menu.Item>
|
||||||
|
@ -28,7 +28,8 @@ const Sider = React.createClass({
|
|||||||
style={{ width: 240 }}
|
style={{ width: 240 }}
|
||||||
defaultOpenKeys={['sub1']}
|
defaultOpenKeys={['sub1']}
|
||||||
selectedKeys={[this.state.current]}
|
selectedKeys={[this.state.current]}
|
||||||
mode="inline">
|
mode="inline"
|
||||||
|
>
|
||||||
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
|
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
|
||||||
<MenuItemGroup title="分组1">
|
<MenuItemGroup title="分组1">
|
||||||
<Menu.Item key="1">选项1</Menu.Item>
|
<Menu.Item key="1">选项1</Menu.Item>
|
||||||
|
@ -30,7 +30,8 @@ const Sider = React.createClass({
|
|||||||
<Menu
|
<Menu
|
||||||
style={{ width: 240 }}
|
style={{ width: 240 }}
|
||||||
defaultOpenKeys={['sub1']}
|
defaultOpenKeys={['sub1']}
|
||||||
mode={this.state.mode}>
|
mode={this.state.mode}
|
||||||
|
>
|
||||||
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
|
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
|
||||||
<MenuItemGroup title="分组1">
|
<MenuItemGroup title="分组1">
|
||||||
<Menu.Item key="1">选项1</Menu.Item>
|
<Menu.Item key="1">选项1</Menu.Item>
|
||||||
|
@ -37,7 +37,8 @@ const Sider = React.createClass({
|
|||||||
style={{ width: 240 }}
|
style={{ width: 240 }}
|
||||||
defaultOpenKeys={['sub1']}
|
defaultOpenKeys={['sub1']}
|
||||||
selectedKeys={[this.state.current]}
|
selectedKeys={[this.state.current]}
|
||||||
mode="inline">
|
mode="inline"
|
||||||
|
>
|
||||||
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
|
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
|
||||||
<Menu.Item key="1">选项1</Menu.Item>
|
<Menu.Item key="1">选项1</Menu.Item>
|
||||||
<Menu.Item key="2">选项2</Menu.Item>
|
<Menu.Item key="2">选项2</Menu.Item>
|
||||||
|
@ -78,21 +78,24 @@ export default class Modal extends React.Component {
|
|||||||
<Button key="cancel"
|
<Button key="cancel"
|
||||||
type="ghost"
|
type="ghost"
|
||||||
size="large"
|
size="large"
|
||||||
onClick={this.handleCancel}>
|
onClick={this.handleCancel}
|
||||||
|
>
|
||||||
{cancelText || '取消'}
|
{cancelText || '取消'}
|
||||||
</Button>,
|
</Button>,
|
||||||
<Button key="confirm"
|
<Button key="confirm"
|
||||||
type="primary"
|
type="primary"
|
||||||
size="large"
|
size="large"
|
||||||
loading={props.confirmLoading}
|
loading={props.confirmLoading}
|
||||||
onClick={this.handleOk}>
|
onClick={this.handleOk}
|
||||||
|
>
|
||||||
{okText || '确定'}
|
{okText || '确定'}
|
||||||
</Button>,
|
</Button>,
|
||||||
];
|
];
|
||||||
let footer = props.footer || defaultFooter;
|
let footer = props.footer || defaultFooter;
|
||||||
return (
|
return (
|
||||||
<Dialog onClose={this.handleCancel} footer={footer} {...props}
|
<Dialog onClose={this.handleCancel} footer={footer} {...props}
|
||||||
visible={props.visible} mousePosition={mousePosition} />
|
visible={props.visible} mousePosition={mousePosition}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -122,7 +122,8 @@ export default function confirm(config) {
|
|||||||
footer=""
|
footer=""
|
||||||
maskTransitionName="fade"
|
maskTransitionName="fade"
|
||||||
style={style}
|
style={style}
|
||||||
width={width}>
|
width={width}
|
||||||
|
>
|
||||||
<div style={{ zoom: 1, overflow: 'hidden' }}>{body} {footer}</div>
|
<div style={{ zoom: 1, overflow: 'hidden' }}>{body} {footer}</div>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
, div, function () {
|
, div, function () {
|
||||||
|
@ -46,7 +46,8 @@ const Test = React.createClass({
|
|||||||
visible={this.state.visible}
|
visible={this.state.visible}
|
||||||
onOk={this.handleOk}
|
onOk={this.handleOk}
|
||||||
confirmLoading={this.state.confirmLoading}
|
confirmLoading={this.state.confirmLoading}
|
||||||
onCancel={this.handleCancel}>
|
onCancel={this.handleCancel}
|
||||||
|
>
|
||||||
<p>{this.state.ModalText}</p>
|
<p>{this.state.ModalText}</p>
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
|
@ -34,7 +34,8 @@ const App = React.createClass({
|
|||||||
<div>
|
<div>
|
||||||
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
|
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
|
||||||
<Modal title="第一个 Modal" visible={this.state.visible}
|
<Modal title="第一个 Modal" visible={this.state.visible}
|
||||||
onOk={this.handleOk} onCancel={this.handleCancel}>
|
onOk={this.handleOk} onCancel={this.handleCancel}
|
||||||
|
>
|
||||||
<p>对话框的内容</p>
|
<p>对话框的内容</p>
|
||||||
<p>对话框的内容</p>
|
<p>对话框的内容</p>
|
||||||
<p>对话框的内容</p>
|
<p>对话框的内容</p>
|
||||||
|
@ -43,7 +43,8 @@ const Test = React.createClass({
|
|||||||
<Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
|
<Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
|
||||||
提 交
|
提 交
|
||||||
</Button>,
|
</Button>,
|
||||||
]}>
|
]}
|
||||||
|
>
|
||||||
<p>对话框的内容</p>
|
<p>对话框的内容</p>
|
||||||
<p>对话框的内容</p>
|
<p>对话框的内容</p>
|
||||||
<p>对话框的内容</p>
|
<p>对话框的内容</p>
|
||||||
|
@ -33,7 +33,8 @@ const LocalizedModal = React.createClass({
|
|||||||
<Button type="primary" onClick={this.showModal}>Show Modal</Button>
|
<Button type="primary" onClick={this.showModal}>Show Modal</Button>
|
||||||
<Modal title="Modal" visible={this.state.visible}
|
<Modal title="Modal" visible={this.state.visible}
|
||||||
onOk={this.handleOk} onCancel={this.handleCancel}
|
onOk={this.handleOk} onCancel={this.handleCancel}
|
||||||
okText="OK" cancelText="Cancel">
|
okText="OK" cancelText="Cancel"
|
||||||
|
>
|
||||||
<p>Bla bla ...</p>
|
<p>Bla bla ...</p>
|
||||||
<p>Bla bla ...</p>
|
<p>Bla bla ...</p>
|
||||||
<p>Bla bla ...</p>
|
<p>Bla bla ...</p>
|
||||||
|
@ -30,7 +30,8 @@ const App = React.createClass({
|
|||||||
style={{ top: 20 }}
|
style={{ top: 20 }}
|
||||||
visible={this.state.modal1Visible}
|
visible={this.state.modal1Visible}
|
||||||
onOk={() => this.setModal1Visible(false)}
|
onOk={() => this.setModal1Visible(false)}
|
||||||
onCancel={() => this.setModal1Visible(false)}>
|
onCancel={() => this.setModal1Visible(false)}
|
||||||
|
>
|
||||||
<p>对话框的内容</p>
|
<p>对话框的内容</p>
|
||||||
<p>对话框的内容</p>
|
<p>对话框的内容</p>
|
||||||
<p>对话框的内容</p>
|
<p>对话框的内容</p>
|
||||||
@ -41,7 +42,8 @@ const App = React.createClass({
|
|||||||
wrapClassName="vertical-center-modal"
|
wrapClassName="vertical-center-modal"
|
||||||
visible={this.state.modal2Visible}
|
visible={this.state.modal2Visible}
|
||||||
onOk={() => this.setModal2Visible(false)}
|
onOk={() => this.setModal2Visible(false)}
|
||||||
onCancel={() => this.setModal2Visible(false)}>
|
onCancel={() => this.setModal2Visible(false)}
|
||||||
|
>
|
||||||
<p>对话框的内容</p>
|
<p>对话框的内容</p>
|
||||||
<p>对话框的内容</p>
|
<p>对话框的内容</p>
|
||||||
<p>对话框的内容</p>
|
<p>对话框的内容</p>
|
||||||
|
@ -36,7 +36,8 @@ export default class Pagination extends React.Component {
|
|||||||
selectPrefixCls="ant-select"
|
selectPrefixCls="ant-select"
|
||||||
{...this.props}
|
{...this.props}
|
||||||
locale={locale}
|
locale={locale}
|
||||||
className={className} />
|
className={className}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -13,7 +13,8 @@ ReactDOM.render(
|
|||||||
selectComponentClass={Select}
|
selectComponentClass={Select}
|
||||||
total={80}
|
total={80}
|
||||||
showTotal={total => `共 ${total} 条`}
|
showTotal={total => `共 ${total} 条`}
|
||||||
pageSize={20} defaultCurrent={1} />,
|
pageSize={20} defaultCurrent={1}
|
||||||
|
/>,
|
||||||
mountNode
|
mountNode
|
||||||
);
|
);
|
||||||
````
|
````
|
||||||
|
@ -44,7 +44,8 @@ let App = React.createClass({
|
|||||||
<div>
|
<div>
|
||||||
<Popconfirm title="确定要删除这个任务吗?"
|
<Popconfirm title="确定要删除这个任务吗?"
|
||||||
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
|
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
|
||||||
onConfirm={this.confirm} onCancel={this.cancel}>
|
onConfirm={this.confirm} onCancel={this.cancel}
|
||||||
|
>
|
||||||
<a href="#">删除某任务</a>
|
<a href="#">删除某任务</a>
|
||||||
</Popconfirm>
|
</Popconfirm>
|
||||||
<br />
|
<br />
|
||||||
|
@ -89,7 +89,8 @@ export default class Popconfirm extends React.Component {
|
|||||||
transitionName={this.props.transitionName}
|
transitionName={this.props.transitionName}
|
||||||
visible={this.state.visible}
|
visible={this.state.visible}
|
||||||
trigger={trigger}
|
trigger={trigger}
|
||||||
overlay={overlay}>
|
overlay={overlay}
|
||||||
|
>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
);
|
);
|
||||||
|
@ -30,7 +30,8 @@ const App = React.createClass({
|
|||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<Popover content={content} title="标题" trigger="click"
|
<Popover content={content} title="标题" trigger="click"
|
||||||
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}>
|
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
|
||||||
|
>
|
||||||
<Button type="primary">点击弹出卡片</Button>
|
<Button type="primary">点击弹出卡片</Button>
|
||||||
</Popover>
|
</Popover>
|
||||||
);
|
);
|
||||||
|
@ -22,7 +22,8 @@ export default class Popover extends React.Component {
|
|||||||
builtinPlacements={placements}
|
builtinPlacements={placements}
|
||||||
ref="tooltip"
|
ref="tooltip"
|
||||||
{...this.props}
|
{...this.props}
|
||||||
overlay={this.getOverlay()}>
|
overlay={this.getOverlay()}
|
||||||
|
>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
);
|
);
|
||||||
|
@ -76,7 +76,8 @@ export default class Line extends React.Component {
|
|||||||
progress = (
|
progress = (
|
||||||
<div className={`${prefixCls}-inner`} style={circleStyle}>
|
<div className={`${prefixCls}-inner`} style={circleStyle}>
|
||||||
<Circle percent={percent} strokeWidth={strokeWidth || 6}
|
<Circle percent={percent} strokeWidth={strokeWidth || 6}
|
||||||
strokeColor={statusColorMap[progressStatus]} trailColor={trailColor} />
|
strokeColor={statusColorMap[progressStatus]} trailColor={trailColor}
|
||||||
|
/>
|
||||||
{progressInfo}
|
{progressInfo}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -48,7 +48,8 @@ const Test = React.createClass({
|
|||||||
animConfig={[
|
animConfig={[
|
||||||
{ opacity: [1, 0], translateY: [0, 50] },
|
{ opacity: [1, 0], translateY: [0, 50] },
|
||||||
{ opacity: [1, 0], translateY: [0, -50] },
|
{ opacity: [1, 0], translateY: [0, -50] },
|
||||||
]}>
|
]}
|
||||||
|
>
|
||||||
{list}
|
{list}
|
||||||
</QueueAnim>
|
</QueueAnim>
|
||||||
</div>
|
</div>
|
||||||
|
@ -47,7 +47,8 @@ const Test = React.createClass({
|
|||||||
<QueueAnim className="demo-content"
|
<QueueAnim className="demo-content"
|
||||||
key="demo"
|
key="demo"
|
||||||
type={['right', 'left']}
|
type={['right', 'left']}
|
||||||
ease={['easeOutQuart', 'easeInOutQuart']}>
|
ease={['easeOutQuart', 'easeInOutQuart']}
|
||||||
|
>
|
||||||
{list}
|
{list}
|
||||||
</QueueAnim>
|
</QueueAnim>
|
||||||
</div>
|
</div>
|
||||||
|
@ -34,7 +34,8 @@ const Test = React.createClass({
|
|||||||
style={{ width: 200 }}
|
style={{ width: 200 }}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
filterOption={false}
|
filterOption={false}
|
||||||
placeholder="请输入账户名">
|
placeholder="请输入账户名"
|
||||||
|
>
|
||||||
{this.state.options}
|
{this.state.options}
|
||||||
</Select>
|
</Select>
|
||||||
);
|
);
|
||||||
|
@ -22,7 +22,8 @@ ReactDOM.render(
|
|||||||
<Select multiple
|
<Select multiple
|
||||||
style={{ width: '100%' }}
|
style={{ width: '100%' }}
|
||||||
placeholder="Please select"
|
placeholder="Please select"
|
||||||
defaultValue={['a10', 'c12']} onChange={handleChange}>
|
defaultValue={['a10', 'c12']} onChange={handleChange}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</Select>
|
</Select>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
|
@ -18,7 +18,8 @@ ReactDOM.render(
|
|||||||
<Select defaultValue="lucy"
|
<Select defaultValue="lucy"
|
||||||
style={{ width: 200 }}
|
style={{ width: 200 }}
|
||||||
showSearch={false}
|
showSearch={false}
|
||||||
onChange={handleChange}>
|
onChange={handleChange}
|
||||||
|
>
|
||||||
<OptGroup label="Manager">
|
<OptGroup label="Manager">
|
||||||
<Option value="jack">jack</Option>
|
<Option value="jack">jack</Option>
|
||||||
<Option value="lucy">lucy</Option>
|
<Option value="lucy">lucy</Option>
|
||||||
|
@ -88,7 +88,8 @@ const SearchInput = React.createClass({
|
|||||||
filterOption={false}
|
filterOption={false}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
onFocus={this.handleFocusBlur}
|
onFocus={this.handleFocusBlur}
|
||||||
onBlur={this.handleFocusBlur}>
|
onBlur={this.handleFocusBlur}
|
||||||
|
>
|
||||||
{options}
|
{options}
|
||||||
</Select>
|
</Select>
|
||||||
<div className="ant-input-group-wrap">
|
<div className="ant-input-group-wrap">
|
||||||
|
@ -19,7 +19,8 @@ ReactDOM.render(
|
|||||||
placeholder="请选择人员"
|
placeholder="请选择人员"
|
||||||
optionFilterProp="children"
|
optionFilterProp="children"
|
||||||
notFoundContent="无法找到"
|
notFoundContent="无法找到"
|
||||||
onChange={handleChange}>
|
onChange={handleChange}
|
||||||
|
>
|
||||||
<Option value="jack">杰克</Option>
|
<Option value="jack">杰克</Option>
|
||||||
<Option value="lucy">露西</Option>
|
<Option value="lucy">露西</Option>
|
||||||
<Option value="tom">汤姆</Option>
|
<Option value="tom">汤姆</Option>
|
||||||
|
@ -22,7 +22,8 @@ ReactDOM.render(
|
|||||||
<Select tags
|
<Select tags
|
||||||
style={{ width: '100%' }}
|
style={{ width: '100%' }}
|
||||||
searchPlaceholder="标签模式"
|
searchPlaceholder="标签模式"
|
||||||
onChange={handleChange}>
|
onChange={handleChange}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</Select>
|
</Select>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
|
@ -44,7 +44,8 @@ export default class Select extends React.Component {
|
|||||||
<RcSelect {...this.props}
|
<RcSelect {...this.props}
|
||||||
className={cls}
|
className={cls}
|
||||||
optionLabelProp={optionLabelProp || 'children'}
|
optionLabelProp={optionLabelProp || 'children'}
|
||||||
notFoundContent={notFoundContent} />
|
notFoundContent={notFoundContent}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -27,7 +27,8 @@ const IntegerStep = React.createClass({
|
|||||||
</Col>
|
</Col>
|
||||||
<Col span={4}>
|
<Col span={4}>
|
||||||
<InputNumber min={1} max={20} style={{ marginLeft: '16px' }}
|
<InputNumber min={1} max={20} style={{ marginLeft: '16px' }}
|
||||||
value={this.state.inputValue} onChange={this.onChange} />
|
value={this.state.inputValue} onChange={this.onChange}
|
||||||
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
@ -53,7 +54,8 @@ const DecimalStep = React.createClass({
|
|||||||
</Col>
|
</Col>
|
||||||
<Col span={4}>
|
<Col span={4}>
|
||||||
<InputNumber min={0} max={1} style={{ marginLeft: '16px' }} step={0.01}
|
<InputNumber min={0} max={1} style={{ marginLeft: '16px' }} step={0.01}
|
||||||
value={this.state.inputValue} onChange={this.onChange} />
|
value={this.state.inputValue} onChange={this.onChange}
|
||||||
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
|
@ -19,7 +19,8 @@ const Card = React.createClass({
|
|||||||
const container = (
|
const container = (
|
||||||
<Alert message="消息提示的文案"
|
<Alert message="消息提示的文案"
|
||||||
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
||||||
type="info" />
|
type="info"
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
@ -12,7 +12,8 @@ ReactDOM.render(
|
|||||||
<Spin tip="正在读取数据...">
|
<Spin tip="正在读取数据...">
|
||||||
<Alert message="消息提示的文案"
|
<Alert message="消息提示的文案"
|
||||||
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
||||||
type="info" />
|
type="info"
|
||||||
|
/>
|
||||||
</Spin>
|
</Spin>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -89,7 +89,8 @@ const Test = React.createClass({
|
|||||||
dataSource={this.state.data}
|
dataSource={this.state.data}
|
||||||
pagination={this.state.pagination}
|
pagination={this.state.pagination}
|
||||||
loading={this.state.loading}
|
loading={this.state.loading}
|
||||||
onChange={this.handleTableChange} />
|
onChange={this.handleTableChange}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -25,6 +25,7 @@ ReactDOM.render(
|
|||||||
<Table columns={columns}
|
<Table columns={columns}
|
||||||
expandedRowRender={record => <p>{record.description}</p>}
|
expandedRowRender={record => <p>{record.description}</p>}
|
||||||
dataSource={data}
|
dataSource={data}
|
||||||
className="table" />
|
className="table"
|
||||||
|
/>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -61,7 +61,8 @@ const App = React.createClass({
|
|||||||
<div>
|
<div>
|
||||||
<div style={{ marginBottom: 16 }}>
|
<div style={{ marginBottom: 16 }}>
|
||||||
<Button type="primary" onClick={this.start}
|
<Button type="primary" onClick={this.start}
|
||||||
disabled={!hasSelected} loading={loading}>操作</Button>
|
disabled={!hasSelected} loading={loading}
|
||||||
|
>操作</Button>
|
||||||
<span style={{ marginLeft: 8 }}>{hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''}</span>
|
<span style={{ marginLeft: 8 }}>{hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''}</span>
|
||||||
</div>
|
</div>
|
||||||
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
|
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
|
||||||
|
@ -113,16 +113,19 @@ export default class FilterMenu extends React.Component {
|
|||||||
prefixCls="ant-dropdown-menu"
|
prefixCls="ant-dropdown-menu"
|
||||||
onSelect={this.setSelectedKeys}
|
onSelect={this.setSelectedKeys}
|
||||||
onDeselect={this.setSelectedKeys}
|
onDeselect={this.setSelectedKeys}
|
||||||
selectedKeys={this.state.selectedKeys}>
|
selectedKeys={this.state.selectedKeys}
|
||||||
|
>
|
||||||
{this.renderMenus(column.filters)}
|
{this.renderMenus(column.filters)}
|
||||||
</Menu>
|
</Menu>
|
||||||
<div className="ant-table-filter-dropdown-btns">
|
<div className="ant-table-filter-dropdown-btns">
|
||||||
<a className="ant-table-filter-dropdown-link confirm"
|
<a className="ant-table-filter-dropdown-link confirm"
|
||||||
onClick={this.handleConfirm}>
|
onClick={this.handleConfirm}
|
||||||
|
>
|
||||||
{locale.filterConfirm}
|
{locale.filterConfirm}
|
||||||
</a>
|
</a>
|
||||||
<a className="ant-table-filter-dropdown-link clear"
|
<a className="ant-table-filter-dropdown-link clear"
|
||||||
onClick={this.handleClearFilters}>
|
onClick={this.handleClearFilters}
|
||||||
|
>
|
||||||
{locale.filterReset}
|
{locale.filterReset}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -137,7 +140,8 @@ export default class FilterMenu extends React.Component {
|
|||||||
overlay={menus}
|
overlay={menus}
|
||||||
visible={this.state.visible}
|
visible={this.state.visible}
|
||||||
onVisibleChange={this.onVisibleChange}
|
onVisibleChange={this.onVisibleChange}
|
||||||
closeOnSelect={false}>
|
closeOnSelect={false}
|
||||||
|
>
|
||||||
<Icon title={locale.filterTitle} type="filter" className={dropdownSelectedClass} />
|
<Icon title={locale.filterTitle} type="filter" className={dropdownSelectedClass} />
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
);
|
);
|
||||||
|
@ -430,7 +430,8 @@ export default class Table extends React.Component {
|
|||||||
return (
|
return (
|
||||||
<Radio disabled={props.disabled} onClick={stopPropagation}
|
<Radio disabled={props.disabled} onClick={stopPropagation}
|
||||||
onChange={(e) => this.handleRadioSelect(record, rowIndex, e)}
|
onChange={(e) => this.handleRadioSelect(record, rowIndex, e)}
|
||||||
value={rowIndex} checked={checked} />
|
value={rowIndex} checked={checked}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -449,7 +450,8 @@ export default class Table extends React.Component {
|
|||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<Checkbox checked={checked} disabled={props.disabled} onClick={stopPropagation}
|
<Checkbox checked={checked} disabled={props.disabled} onClick={stopPropagation}
|
||||||
onChange={(e) => this.handleSelect(record, rowIndex, e)} />
|
onChange={(e) => this.handleSelect(record, rowIndex, e)}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -498,7 +500,8 @@ export default class Table extends React.Component {
|
|||||||
const checkboxAll = (
|
const checkboxAll = (
|
||||||
<Checkbox checked={checked}
|
<Checkbox checked={checked}
|
||||||
disabled={checkboxAllDisabled}
|
disabled={checkboxAllDisabled}
|
||||||
onChange={this.handleSelectAllRow} />
|
onChange={this.handleSelectAllRow}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
selectionColumn = {
|
selectionColumn = {
|
||||||
key: 'selection-column',
|
key: 'selection-column',
|
||||||
@ -544,7 +547,8 @@ export default class Table extends React.Component {
|
|||||||
filterDropdown = (
|
filterDropdown = (
|
||||||
<FilterDropdown locale={locale} column={column}
|
<FilterDropdown locale={locale} column={column}
|
||||||
selectedKeys={colFilters}
|
selectedKeys={colFilters}
|
||||||
confirmFilter={this.handleFilter} />
|
confirmFilter={this.handleFilter}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (column.sorter) {
|
if (column.sorter) {
|
||||||
@ -561,12 +565,14 @@ export default class Table extends React.Component {
|
|||||||
<div className="ant-table-column-sorter">
|
<div className="ant-table-column-sorter">
|
||||||
<span className={`ant-table-column-sorter-up ${isAscend ? 'on' : 'off'}`}
|
<span className={`ant-table-column-sorter-up ${isAscend ? 'on' : 'off'}`}
|
||||||
title="↑"
|
title="↑"
|
||||||
onClick={() => this.toggleSortOrder('ascend', column)}>
|
onClick={() => this.toggleSortOrder('ascend', column)}
|
||||||
|
>
|
||||||
<Icon type="caret-up" />
|
<Icon type="caret-up" />
|
||||||
</span>
|
</span>
|
||||||
<span className={`ant-table-column-sorter-down ${isDescend ? 'on' : 'off'}`}
|
<span className={`ant-table-column-sorter-down ${isDescend ? 'on' : 'off'}`}
|
||||||
title="↓"
|
title="↓"
|
||||||
onClick={() => this.toggleSortOrder('descend', column)}>
|
onClick={() => this.toggleSortOrder('descend', column)}
|
||||||
|
>
|
||||||
<Icon type="caret-down" />
|
<Icon type="caret-down" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -612,7 +618,8 @@ export default class Table extends React.Component {
|
|||||||
onChange={this.handlePageChange}
|
onChange={this.handlePageChange}
|
||||||
total={total}
|
total={total}
|
||||||
size={size}
|
size={size}
|
||||||
onShowSizeChange={this.handleShowSizeChange} /> : null;
|
onShowSizeChange={this.handleShowSizeChange}
|
||||||
|
/> : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
prepareParamsArguments(state) {
|
prepareParamsArguments(state) {
|
||||||
@ -729,7 +736,8 @@ export default class Table extends React.Component {
|
|||||||
columns={columns}
|
columns={columns}
|
||||||
className={classString}
|
className={classString}
|
||||||
expandIconColumnIndex={(columns[0] && columns[0].key === 'selection-column') ? 1 : 0}
|
expandIconColumnIndex={(columns[0] && columns[0].key === 'selection-column') ? 1 : 0}
|
||||||
expandIconAsCell={expandIconAsCell} />
|
expandIconAsCell={expandIconAsCell}
|
||||||
|
/>
|
||||||
{emptyText}
|
{emptyText}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -54,7 +54,8 @@ const Demo = React.createClass({
|
|||||||
<Button type="ghost" onClick={this.add}>新增</Button>
|
<Button type="ghost" onClick={this.add}>新增</Button>
|
||||||
</div>
|
</div>
|
||||||
<Tabs hideAdd onChange={this.onChange} activeKey={this.state.activeKey}
|
<Tabs hideAdd onChange={this.onChange} activeKey={this.state.activeKey}
|
||||||
type="editable-card" onEdit={this.onEdit}>
|
type="editable-card" onEdit={this.onEdit}
|
||||||
|
>
|
||||||
{this.state.panes}
|
{this.state.panes}
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
|
@ -50,7 +50,8 @@ const Demo = React.createClass({
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Tabs onChange={this.onChange} activeKey={this.state.activeKey}
|
<Tabs onChange={this.onChange} activeKey={this.state.activeKey}
|
||||||
type="editable-card" onEdit={this.onEdit}>
|
type="editable-card" onEdit={this.onEdit}
|
||||||
|
>
|
||||||
{this.state.panes}
|
{this.state.panes}
|
||||||
</Tabs>
|
</Tabs>
|
||||||
);
|
);
|
||||||
|
@ -25,7 +25,8 @@ const Demo = React.createClass({
|
|||||||
<div style={{ marginBottom: 16 }}>
|
<div style={{ marginBottom: 16 }}>
|
||||||
页签位置:
|
页签位置:
|
||||||
<Select value={this.state.tabPosition} onChange={this.changeTabPosition}
|
<Select value={this.state.tabPosition} onChange={this.changeTabPosition}
|
||||||
dropdownMatchSelectWidth={false}>
|
dropdownMatchSelectWidth={false}
|
||||||
|
>
|
||||||
<Option value="top">top</Option>
|
<Option value="top">top</Option>
|
||||||
<Option value="bottom">bottom</Option>
|
<Option value="bottom">bottom</Option>
|
||||||
<Option value="left">left</Option>
|
<Option value="left">left</Option>
|
||||||
|
@ -77,7 +77,8 @@ export default class Tabs extends React.Component {
|
|||||||
className={className}
|
className={className}
|
||||||
tabBarExtraContent={tabBarExtraContent}
|
tabBarExtraContent={tabBarExtraContent}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
animation={animation}>
|
animation={animation}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</RcTabs>
|
</RcTabs>
|
||||||
);
|
);
|
||||||
|
@ -58,7 +58,8 @@ export default class Tag extends React.Component {
|
|||||||
showProp="data-show"
|
showProp="data-show"
|
||||||
transitionName={`${prefixCls}-zoom`}
|
transitionName={`${prefixCls}-zoom`}
|
||||||
transitionAppear
|
transitionAppear
|
||||||
onEnd={this.animationEnd}>
|
onEnd={this.animationEnd}
|
||||||
|
>
|
||||||
{this.state.closed ? null : (
|
{this.state.closed ? null : (
|
||||||
<div data-show={!this.state.closing} {...restProps} className={classString}>
|
<div data-show={!this.state.closing} {...restProps} className={classString}>
|
||||||
<span className={`${prefixCls}-text`}>{children}</span>
|
<span className={`${prefixCls}-text`}>{children}</span>
|
||||||
|
@ -83,7 +83,8 @@ export default class Tooltip extends React.Component {
|
|||||||
onVisibleChange={this.onVisibleChange}
|
onVisibleChange={this.onVisibleChange}
|
||||||
onPopupAlign={this.onPopupAlign}
|
onPopupAlign={this.onPopupAlign}
|
||||||
ref="tooltip"
|
ref="tooltip"
|
||||||
{...this.props}>
|
{...this.props}
|
||||||
|
>
|
||||||
{visible ? cloneElement(children, { className: childrenCls }) : children}
|
{visible ? cloneElement(children, { className: childrenCls }) : children}
|
||||||
</RcTooltip>
|
</RcTooltip>
|
||||||
);
|
);
|
||||||
|
@ -41,7 +41,8 @@ const App = React.createClass({
|
|||||||
renderFooter() {
|
renderFooter() {
|
||||||
return (
|
return (
|
||||||
<Button type="ghost" size="small" style={{ float: 'right', margin: 5 }}
|
<Button type="ghost" size="small" style={{ float: 'right', margin: 5 }}
|
||||||
onClick={this.getMock}>
|
onClick={this.getMock}
|
||||||
|
>
|
||||||
刷新
|
刷新
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
@ -59,7 +60,8 @@ const App = React.createClass({
|
|||||||
targetKeys={this.state.targetKeys}
|
targetKeys={this.state.targetKeys}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
render={item => `${item.title}-${item.description}`}
|
render={item => `${item.title}-${item.description}`}
|
||||||
footer={this.renderFooter} />
|
footer={this.renderFooter}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -45,7 +45,8 @@ const App = React.createClass({
|
|||||||
dataSource={this.state.mockData}
|
dataSource={this.state.mockData}
|
||||||
targetKeys={this.state.targetKeys}
|
targetKeys={this.state.targetKeys}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
render={item => item.title} />
|
render={item => item.title}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -61,7 +61,8 @@ const App = React.createClass({
|
|||||||
}}
|
}}
|
||||||
targetKeys={this.state.targetKeys}
|
targetKeys={this.state.targetKeys}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
render={this.renderItem} />
|
render={this.renderItem}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -46,7 +46,8 @@ const App = React.createClass({
|
|||||||
notFoundContent="xxxxxx"
|
notFoundContent="xxxxxx"
|
||||||
targetKeys={this.state.targetKeys}
|
targetKeys={this.state.targetKeys}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
render={item => item.title} />
|
render={item => item.title}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -254,14 +254,16 @@ export default class Transfer extends React.Component {
|
|||||||
notFoundContent={notFoundContent}
|
notFoundContent={notFoundContent}
|
||||||
body={body}
|
body={body}
|
||||||
footer={footer}
|
footer={footer}
|
||||||
prefixCls={`${prefixCls}-list`} />
|
prefixCls={`${prefixCls}-list`}
|
||||||
|
/>
|
||||||
<Operation rightActive={rightActive}
|
<Operation rightActive={rightActive}
|
||||||
rightArrowText={operations[0]}
|
rightArrowText={operations[0]}
|
||||||
moveToRight={this.moveToRight}
|
moveToRight={this.moveToRight}
|
||||||
leftActive={leftActive}
|
leftActive={leftActive}
|
||||||
leftArrowText={operations[1]}
|
leftArrowText={operations[1]}
|
||||||
moveToLeft={this.moveToLeft}
|
moveToLeft={this.moveToLeft}
|
||||||
className={`${prefixCls}-operation`} />
|
className={`${prefixCls}-operation`}
|
||||||
|
/>
|
||||||
<List titleText={titles[1]}
|
<List titleText={titles[1]}
|
||||||
dataSource={rightDataSource}
|
dataSource={rightDataSource}
|
||||||
filter={rightFilter}
|
filter={rightFilter}
|
||||||
@ -279,7 +281,8 @@ export default class Transfer extends React.Component {
|
|||||||
notFoundContent={notFoundContent}
|
notFoundContent={notFoundContent}
|
||||||
body={body}
|
body={body}
|
||||||
footer={footer}
|
footer={footer}
|
||||||
prefixCls={`${prefixCls}-list`} />
|
prefixCls={`${prefixCls}-list`}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -93,7 +93,8 @@ export default class TransferList extends React.Component {
|
|||||||
return (
|
return (
|
||||||
<span ref="checkbox"
|
<span ref="checkbox"
|
||||||
className={checkboxCls}
|
className={checkboxCls}
|
||||||
onClick={(!props.disabled) && this.handleSelectAll}>
|
onClick={(!props.disabled) && this.handleSelectAll}
|
||||||
|
>
|
||||||
{customEle}
|
{customEle}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
@ -188,11 +189,13 @@ export default class TransferList extends React.Component {
|
|||||||
onChange={this.handleFilter}
|
onChange={this.handleFilter}
|
||||||
handleClear={this.handleClear}
|
handleClear={this.handleClear}
|
||||||
placeholder={searchPlaceholder || '请输入搜索内容'}
|
placeholder={searchPlaceholder || '请输入搜索内容'}
|
||||||
value={filter} />
|
value={filter}
|
||||||
|
/>
|
||||||
</div> : null}
|
</div> : null}
|
||||||
<Animate component="ul"
|
<Animate component="ul"
|
||||||
transitionName={this.state.mounted ? `${prefixCls}-highlight` : ''}
|
transitionName={this.state.mounted ? `${prefixCls}-highlight` : ''}
|
||||||
transitionLeave={false}>
|
transitionLeave={false}
|
||||||
|
>
|
||||||
{showItems.length > 0
|
{showItems.length > 0
|
||||||
? showItems
|
? showItems
|
||||||
: <div className={`${prefixCls}-body-not-found`}>{notFoundContent || '列表为空'}</div>}
|
: <div className={`${prefixCls}-body-not-found`}>{notFoundContent || '列表为空'}</div>}
|
||||||
|
@ -31,7 +31,8 @@ export default class Search extends React.Component {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<input placeholder={placeholder} className={`${prefixCls} ant-input`} value={value} ref="input"
|
<input placeholder={placeholder} className={`${prefixCls} ant-input`} value={value} ref="input"
|
||||||
onChange={this.handleChange} />
|
onChange={this.handleChange}
|
||||||
|
/>
|
||||||
{value && value.length > 0 ?
|
{value && value.length > 0 ?
|
||||||
<a href="#" className={`${prefixCls}-action`} onClick={this.handleClear}>
|
<a href="#" className={`${prefixCls}-action`} onClick={this.handleClear}>
|
||||||
<Icon type="cross-circle" />
|
<Icon type="cross-circle" />
|
||||||
|
@ -27,7 +27,8 @@ const Demo = React.createClass({
|
|||||||
placeholder="请选择"
|
placeholder="请选择"
|
||||||
allowClear
|
allowClear
|
||||||
treeDefaultExpandAll
|
treeDefaultExpandAll
|
||||||
onChange={this.onChange}>
|
onChange={this.onChange}
|
||||||
|
>
|
||||||
<TreeNode value="parent 1" title="parent 1" key="0-1">
|
<TreeNode value="parent 1" title="parent 1" key="0-1">
|
||||||
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
|
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
|
||||||
<TreeNode value="leaf1" title="my leaf" key="random" />
|
<TreeNode value="leaf1" title="my leaf" key="random" />
|
||||||
|
@ -45,7 +45,8 @@ const Demo = React.createClass({
|
|||||||
treeData={treeData}
|
treeData={treeData}
|
||||||
placeholder="请选择"
|
placeholder="请选择"
|
||||||
treeDefaultExpandAll
|
treeDefaultExpandAll
|
||||||
onChange={this.onChange} />
|
onChange={this.onChange}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -50,7 +50,8 @@ export default class TreeSelect extends React.Component {
|
|||||||
<RcTreeSelect {...this.props}
|
<RcTreeSelect {...this.props}
|
||||||
treeCheckable={checkable}
|
treeCheckable={checkable}
|
||||||
className={cls}
|
className={cls}
|
||||||
notFoundContent={notFoundContent} />
|
notFoundContent={notFoundContent}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -86,7 +86,8 @@ const Demo = React.createClass({
|
|||||||
onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}
|
onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}
|
||||||
autoExpandParent={this.state.autoExpandParent}
|
autoExpandParent={this.state.autoExpandParent}
|
||||||
onCheck={this.onCheck} checkedKeys={this.state.checkedKeys}
|
onCheck={this.onCheck} checkedKeys={this.state.checkedKeys}
|
||||||
onSelect={this.onSelect} selectedKeys={this.state.selectedKeys}>
|
onSelect={this.onSelect} selectedKeys={this.state.selectedKeys}
|
||||||
|
>
|
||||||
{loop(gData)}
|
{loop(gData)}
|
||||||
</Tree>
|
</Tree>
|
||||||
);
|
);
|
||||||
|
@ -35,7 +35,8 @@ const Demo = React.createClass({
|
|||||||
defaultExpandedKeys={this.state.defaultExpandedKeys}
|
defaultExpandedKeys={this.state.defaultExpandedKeys}
|
||||||
defaultSelectedKeys={this.state.defaultSelectedKeys}
|
defaultSelectedKeys={this.state.defaultSelectedKeys}
|
||||||
defaultCheckedKeys={this.state.defaultCheckedKeys}
|
defaultCheckedKeys={this.state.defaultCheckedKeys}
|
||||||
onSelect={this.onSelect} onCheck={this.onCheck}>
|
onSelect={this.onSelect} onCheck={this.onCheck}
|
||||||
|
>
|
||||||
<TreeNode title="parent 1" key="0-0">
|
<TreeNode title="parent 1" key="0-0">
|
||||||
<TreeNode title="parent 1-0" key="0-0-0" disabled>
|
<TreeNode title="parent 1-0" key="0-0-0" disabled>
|
||||||
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
|
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
|
||||||
|
@ -101,7 +101,8 @@ const Demo = React.createClass({
|
|||||||
return (
|
return (
|
||||||
<Tree defaultExpandedKeys={this.state.expandedKeys} openAnimation={{}} draggable
|
<Tree defaultExpandedKeys={this.state.expandedKeys} openAnimation={{}} draggable
|
||||||
onDragEnter={this.onDragEnter}
|
onDragEnter={this.onDragEnter}
|
||||||
onDrop={this.onDrop}>
|
onDrop={this.onDrop}
|
||||||
|
>
|
||||||
{loop(this.state.gData)}
|
{loop(this.state.gData)}
|
||||||
</Tree>
|
</Tree>
|
||||||
);
|
);
|
||||||
|
@ -246,7 +246,8 @@ export default class Upload extends React.Component {
|
|||||||
<UploadList listType={this.props.listType}
|
<UploadList listType={this.props.listType}
|
||||||
items={this.state.fileList}
|
items={this.state.fileList}
|
||||||
onPreview={this.handlePreview}
|
onPreview={this.handlePreview}
|
||||||
onRemove={this.handleManualRemove} />
|
onRemove={this.handleManualRemove}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (type === 'drag') {
|
if (type === 'drag') {
|
||||||
@ -259,7 +260,8 @@ export default class Upload extends React.Component {
|
|||||||
<div className={`${prefixCls} ${prefixCls}-drag ${dragUploadingClass} ${draggingClass}`}
|
<div className={`${prefixCls} ${prefixCls}-drag ${dragUploadingClass} ${draggingClass}`}
|
||||||
onDrop={this.onFileDrop}
|
onDrop={this.onFileDrop}
|
||||||
onDragOver={this.onFileDrop}
|
onDragOver={this.onFileDrop}
|
||||||
onDragLeave={this.onFileDrop}>
|
onDragLeave={this.onFileDrop}
|
||||||
|
>
|
||||||
<RcUpload {...props}>
|
<RcUpload {...props}>
|
||||||
<div className={`${prefixCls}-drag-container`}>
|
<div className={`${prefixCls}-drag-container`}>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
|
@ -73,7 +73,8 @@ export default class UploadList extends React.Component {
|
|||||||
className={`${prefixCls}-list-item-thumbnail`}
|
className={`${prefixCls}-list-item-thumbnail`}
|
||||||
onClick={e => this.handlePreview(file, e)}
|
onClick={e => this.handlePreview(file, e)}
|
||||||
href={file.url}
|
href={file.url}
|
||||||
target="_blank">
|
target="_blank"
|
||||||
|
>
|
||||||
<img src={file.thumbUrl || file.url} alt={file.name} />
|
<img src={file.thumbUrl || file.url} alt={file.name} />
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
@ -101,7 +102,8 @@ export default class UploadList extends React.Component {
|
|||||||
<a
|
<a
|
||||||
onClick={(e) => this.handlePreview(file, e)}
|
onClick={(e) => this.handlePreview(file, e)}
|
||||||
href={file.url} target="_blank"
|
href={file.url} target="_blank"
|
||||||
className={`${prefixCls}-list-item-name`}>
|
className={`${prefixCls}-list-item-name`}
|
||||||
|
>
|
||||||
{file.name}
|
{file.name}
|
||||||
</a>
|
</a>
|
||||||
) : <span className={`${prefixCls}-list-item-name`}>{file.name}</span>
|
) : <span className={`${prefixCls}-list-item-name`}>{file.name}</span>
|
||||||
@ -114,7 +116,8 @@ export default class UploadList extends React.Component {
|
|||||||
onClick={(e) => this.handlePreview(file, e)}
|
onClick={(e) => this.handlePreview(file, e)}
|
||||||
href={file.url}
|
href={file.url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
style={{ pointerEvents: file.url ? '' : 'none' }}>
|
style={{ pointerEvents: file.url ? '' : 'none' }}
|
||||||
|
>
|
||||||
<Icon type="eye-o" />
|
<Icon type="eye-o" />
|
||||||
</a>
|
</a>
|
||||||
<Icon type="delete" onClick={() => this.handleClose(file)} />
|
<Icon type="delete" onClick={() => this.handleClose(file)} />
|
||||||
|
@ -15,16 +15,19 @@ function PreviewImageBox({ cover, coverMeta, imgs, style, previewVisible,
|
|||||||
return (
|
return (
|
||||||
<div className="preview-image-box"
|
<div className="preview-image-box"
|
||||||
style={style}
|
style={style}
|
||||||
onClick={onClick}>
|
onClick={onClick}
|
||||||
|
>
|
||||||
<div className={`preview-image-wrapper ${coverMeta.isGood && 'good'} ${coverMeta.isBad && 'bad'}`}>
|
<div className={`preview-image-wrapper ${coverMeta.isGood && 'good'} ${coverMeta.isBad && 'bad'}`}>
|
||||||
<img className={coverMeta.className} src={coverMeta.src} alt={coverMeta.alt} />
|
<img className={coverMeta.className} src={coverMeta.src} alt={coverMeta.alt} />
|
||||||
</div>
|
</div>
|
||||||
<div className="preview-image-title">{coverMeta.alt}</div>
|
<div className="preview-image-title">{coverMeta.alt}</div>
|
||||||
<div className="preview-image-description"
|
<div className="preview-image-description"
|
||||||
dangerouslySetInnerHTML={{ __html: coverMeta.description }} />
|
dangerouslySetInnerHTML={{ __html: coverMeta.description }}
|
||||||
|
/>
|
||||||
|
|
||||||
<Modal className="image-modal" width={960} visible={previewVisible} title={null} footer={null}
|
<Modal className="image-modal" width={960} visible={previewVisible} title={null} footer={null}
|
||||||
onCancel={onCancel}>
|
onCancel={onCancel}
|
||||||
|
>
|
||||||
<Carousel className={`${onlyOneImg ? 'image-modal-single' : ''}`} adaptiveHeight>
|
<Carousel className={`${onlyOneImg ? 'image-modal-single' : ''}`} adaptiveHeight>
|
||||||
{comparable ? cover : imgs}
|
{comparable ? cover : imgs}
|
||||||
</Carousel>
|
</Carousel>
|
||||||
|
@ -12,7 +12,8 @@ export default function VideoPlayer({ video }) {
|
|||||||
</div>
|
</div>
|
||||||
<div className="preview-image-title">{alt}</div>
|
<div className="preview-image-title">{alt}</div>
|
||||||
<div className="preview-image-description"
|
<div className="preview-image-description"
|
||||||
dangerouslySetInnerHTML={{ __html: description }} />
|
dangerouslySetInnerHTML={{ __html: description }}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -42,13 +42,15 @@ export default class ComponentDoc extends React.Component {
|
|||||||
leftChildren.push(
|
leftChildren.push(
|
||||||
<Demo {...demoData}
|
<Demo {...demoData}
|
||||||
key={index} utils={props.utils}
|
key={index} utils={props.utils}
|
||||||
expand={expand} pathname={location.pathname} />
|
expand={expand} pathname={location.pathname}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
rightChildren.push(
|
rightChildren.push(
|
||||||
<Demo {...demoData}
|
<Demo {...demoData}
|
||||||
key={index} utils={props.utils}
|
key={index} utils={props.utils}
|
||||||
expand={expand} pathname={location.pathname} />
|
expand={expand} pathname={location.pathname}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -89,7 +91,8 @@ export default class ComponentDoc extends React.Component {
|
|||||||
<h2>
|
<h2>
|
||||||
代码演示
|
代码演示
|
||||||
<Icon type="appstore" className={expandTriggerClass}
|
<Icon type="appstore" className={expandTriggerClass}
|
||||||
title="展开全部代码" onClick={this.handleExpandToggle} />
|
title="展开全部代码" onClick={this.handleExpandToggle}
|
||||||
|
/>
|
||||||
</h2>
|
</h2>
|
||||||
</section>
|
</section>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
|
@ -78,10 +78,12 @@ export default class Demo extends React.Component {
|
|||||||
{introChildren}
|
{introChildren}
|
||||||
<span className="collapse anticon anticon-circle-o-right"
|
<span className="collapse anticon anticon-circle-o-right"
|
||||||
onClick={this.handleCodeExapnd}
|
onClick={this.handleCodeExapnd}
|
||||||
unselectable="none" />
|
unselectable="none"
|
||||||
|
/>
|
||||||
</section>
|
</section>
|
||||||
<section className={highlightClass}
|
<section className={highlightClass}
|
||||||
key="code">
|
key="code"
|
||||||
|
>
|
||||||
<div className="highlight">
|
<div className="highlight">
|
||||||
{props.utils.toReactComponent(highlightedCode)}
|
{props.utils.toReactComponent(highlightedCode)}
|
||||||
</div>
|
</div>
|
||||||
@ -91,7 +93,8 @@ export default class Demo extends React.Component {
|
|||||||
<pre>
|
<pre>
|
||||||
<code className="css" dangerouslySetInnerHTML={{
|
<code className="css" dangerouslySetInnerHTML={{
|
||||||
__html: highlightedStyle,
|
__html: highlightedStyle,
|
||||||
}} />
|
}}
|
||||||
|
/>
|
||||||
</pre>
|
</pre>
|
||||||
</div> :
|
</div> :
|
||||||
null
|
null
|
||||||
|
@ -163,7 +163,8 @@ export default class MainContent extends React.Component {
|
|||||||
<Col lg={4} md={6} sm={24} xs={24}>
|
<Col lg={4} md={6} sm={24} xs={24}>
|
||||||
<Menu className="aside-container" mode="inline"
|
<Menu className="aside-container" mode="inline"
|
||||||
defaultOpenKeys={Object.keys(utils.getMenuItems(moduleData, locale))}
|
defaultOpenKeys={Object.keys(utils.getMenuItems(moduleData, locale))}
|
||||||
selectedKeys={[activeMenuItem]}>
|
selectedKeys={[activeMenuItem]}
|
||||||
|
>
|
||||||
{menuItems}
|
{menuItems}
|
||||||
</Menu>
|
</Menu>
|
||||||
</Col>
|
</Col>
|
||||||
@ -179,7 +180,8 @@ export default class MainContent extends React.Component {
|
|||||||
<Row>
|
<Row>
|
||||||
<Col lg={{ span: 20, offset: 4 }}
|
<Col lg={{ span: 20, offset: 4 }}
|
||||||
md={{ span: 18, offset: 6 }}
|
md={{ span: 18, offset: 6 }}
|
||||||
sm={24} xs={24}>
|
sm={24} xs={24}
|
||||||
|
>
|
||||||
<section className="prev-next-nav">
|
<section className="prev-next-nav">
|
||||||
{
|
{
|
||||||
!!prev ?
|
!!prev ?
|
||||||
|
@ -30,7 +30,8 @@ export default class Banner extends React.Component {
|
|||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<GitHubButton key="github-button" type="stargazers"
|
<GitHubButton key="github-button" type="stargazers"
|
||||||
namespace="ant-design" repo="ant-design" />
|
namespace="ant-design" repo="ant-design"
|
||||||
|
/>
|
||||||
</QueueAnim>
|
</QueueAnim>
|
||||||
<Icon type="down" className="down" />
|
<Icon type="down" className="down" />
|
||||||
</ScrollElement>
|
</ScrollElement>
|
||||||
|
@ -21,9 +21,11 @@ export default function Page1() {
|
|||||||
return (
|
return (
|
||||||
<ScrollOverPack scrollName="page1" className="content-wrapper page" playScale={1} replay scrollEvent={onScrollEvent}>
|
<ScrollOverPack scrollName="page1" className="content-wrapper page" playScale={1} replay scrollEvent={onScrollEvent}>
|
||||||
<TweenOne key="image" className="image1 image-wrapper" animation={{ x: 0, opacity: 1, duration: 550 }}
|
<TweenOne key="image" className="image1 image-wrapper" animation={{ x: 0, opacity: 1, duration: 550 }}
|
||||||
style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ reverse: true }} />
|
style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ reverse: true }}
|
||||||
|
/>
|
||||||
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse
|
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse
|
||||||
hideProps={{ child: null }}>
|
hideProps={{ child: null }}
|
||||||
|
>
|
||||||
<h2 key="h2">最佳实践</h2>
|
<h2 key="h2">最佳实践</h2>
|
||||||
<p key="p" style={{ maxWidth: 310 }}>近一年的中后台设计实践,积累了大量的优秀案例。</p>
|
<p key="p" style={{ maxWidth: 310 }}>近一年的中后台设计实践,积累了大量的优秀案例。</p>
|
||||||
<div key="button">
|
<div key="button">
|
||||||
|
@ -10,7 +10,8 @@ export default function Page2() {
|
|||||||
<ScrollOverPack scrollName="page2" className="content-wrapper page" playScale={1} replay>
|
<ScrollOverPack scrollName="page2" className="content-wrapper page" playScale={1} replay>
|
||||||
<QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type="bottom"
|
<QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type="bottom"
|
||||||
leaveReverse
|
leaveReverse
|
||||||
hideProps={{ child: null }}>
|
hideProps={{ child: null }}
|
||||||
|
>
|
||||||
<h2 key="h2">设计模式</h2>
|
<h2 key="h2">设计模式</h2>
|
||||||
<p key="p" style={{ maxWidth: 260 }}>总结中后台设计中反复出现的问题,并提供相应的解决方案。</p>
|
<p key="p" style={{ maxWidth: 260 }}>总结中后台设计中反复出现的问题,并提供相应的解决方案。</p>
|
||||||
<div key="button">
|
<div key="button">
|
||||||
@ -23,7 +24,8 @@ export default function Page2() {
|
|||||||
</div>
|
</div>
|
||||||
</QueueAnim>
|
</QueueAnim>
|
||||||
<TweenOne key="image" className="image2 image-wrapper" animation={{ x: 0, opacity: 1, delay: 300, duration: 550 }}
|
<TweenOne key="image" className="image2 image-wrapper" animation={{ x: 0, opacity: 1, delay: 300, duration: 550 }}
|
||||||
style={{ transform: 'translateX(100px)', opacity: 0 }} hideProps={{ reverse: true }} />
|
style={{ transform: 'translateX(100px)', opacity: 0 }} hideProps={{ reverse: true }}
|
||||||
|
/>
|
||||||
</ScrollOverPack>
|
</ScrollOverPack>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user