Skip to content

GitLab

A
ant-design-pro
Commit ca6453a3 authored by ι™ˆεΈ…'s avatar ι™ˆεΈ…
Browse files
Options

bugfix: fix #3576, add max-width

parent e6fe4979
Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 46 deletions
src/components/Login/demo/basic.md
View file @ ca6453a3
...@@ -18,65 +18,94 @@ class LoginDemo extends React.Component { ...@@ -18,65 +18,94 @@ class LoginDemo extends React.Component {
notice: '', notice: '',
type: 'tab2', type: 'tab2',
autoLogin: true, autoLogin: true,
} };
onSubmit = (err, values) => { onSubmit = (err, values) => {
console.log('value collected ->', { ...values, autoLogin: this.state.autoLogin }); console.log('value collected ->', {
...values,
autoLogin: this.state.autoLogin,
});
if (this.state.type === 'tab1') { if (this.state.type === 'tab1') {
this.setState({ this.setState(
notice: '', {
}, () => { notice: '',
if (!err && (values.username !== 'admin' || values.password !== '888888')) { },
setTimeout(() => { () => {
this.setState({ if (
notice: 'The combination of username and password is incorrect!', !err &&
}); (values.username !== 'admin' || values.password !== '888888')
}, 500); ) {
} setTimeout(() => {
}); this.setState({
notice:
'The combination of username and password is incorrect!',
});
}, 500);
}
},
);
} }
} };
onTabChange = (key) => { onTabChange = (key) => {
this.setState({ this.setState({
type: key, type: key,
}); });
} };
changeAutoLogin = (e) => { changeAutoLogin = (e) => {
this.setState({ this.setState({
autoLogin: e.target.checked, autoLogin: e.target.checked,
}); });
} };
render() { render() {
return ( return (
<Login <div className="login-warp">
defaultActiveKey={this.state.type} <Login
onTabChange={this.onTabChange} defaultActiveKey={this.state.type}
onSubmit={this.onSubmit} onTabChange={this.onTabChange}
> onSubmit={this.onSubmit}
<Tab key="tab1" tab="Account"> >
{ <Tab key="tab1" tab="Account">
this.state.notice && {this.state.notice && (
<Alert style={{ marginBottom: 24 }} message={this.state.notice} type="error" showIcon closable /> <Alert
} style={{ marginBottom: 24 }}
<UserName name="username" /> message={this.state.notice}
<Password name="password" /> type="error"
</Tab> showIcon
<Tab key="tab2" tab="Mobile"> closable
<Mobile name="mobile" /> />
<Captcha onGetCaptcha={() => console.log('Get captcha!')} name="captcha" /> )}
</Tab> <UserName name="username" />
<div> <Password name="password" />
<Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>Keep me logged in</Checkbox> </Tab>
<a style={{ float: 'right' }} href="">Forgot password</a> <Tab key="tab2" tab="Mobile">
</div> <Mobile name="mobile" />
<Submit>Login</Submit> <Captcha
<div> onGetCaptcha={() => console.log('Get captcha!')}
Other login methods name="captcha"
<span className="icon icon-alipay" /> />
<span className="icon icon-taobao" /> </Tab>
<span className="icon icon-weibo" /> <div>
<a style={{ float: 'right' }} href="">Register</a> <Checkbox
</div> checked={this.state.autoLogin}
</Login> onChange={this.changeAutoLogin}
>
Keep me logged in
</Checkbox>
<a style={{ float: 'right' }} href="">
Forgot password
</a>
</div>
<Submit>Login</Submit>
<div>
Other login methods
<span className="icon icon-alipay" />
<span className="icon icon-taobao" />
<span className="icon icon-weibo" />
<a style={{ float: 'right' }} href="">
Register
</a>
</div>
</Login>
</div>
); );
} }
} }
...@@ -85,6 +114,10 @@ ReactDOM.render(<LoginDemo />, mountNode); ...@@ -85,6 +114,10 @@ ReactDOM.render(<LoginDemo />, mountNode);
```` ````
<style> <style>
#scaffold-src-components-Login-demo-basic .login-warp{
max-width: 360px;
margin: auto;
}
#scaffold-src-components-Login-demo-basic .icon { #scaffold-src-components-Login-demo-basic .icon {
display: inline-block; display: inline-block;
width: 24px; width: 24px;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment