рдореИрдВ рдПрдХ рдиреМрд╕рд┐рдЦрд┐рдпрд╛ рд╣реВрдВ, рдореИрдВ Meteor JS
рдкрд░ рдЖрдзрд╛рд░рд┐рдд рд╣реВрдВред
рдКрдВрдЪрд╛рдИ рдХрд╛ 100% рд▓реЗрдЖрдЙрдЯ рдХреИрд╕реЗ рд╕реЗрдЯ рдХрд░реЗрдВ (рд╕реНрдХреНрд░реАрди)
import React from 'react';
import {LocaleProvider} from 'antd';
import enUS from 'antd/lib/locale-provider/en_US';
import {Layout, Menu, Icon, Breadcrumb} from 'antd';
const {Header, Sider, Content, Footer} = Layout;
import {Row, Col} from 'antd';
import {Dropdown} from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
import {FlowRouter} from 'meteor/kadira:flow-router';
export default class App2 extends React.Component {
state = {
collapsed: false,
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
};
linkTo = (item) => {
console.log(item);
FlowRouter.go(item.key);
};
render() {
const style = {
logoImg: {
width: "40px",
marginRight: "8px"
},
logoTitle: {
verticalAlign: "text-bottom",
fontSize: "16px",
textTransform: "uppercase",
display: "inline-block",
}
};
const menuHead = (
<Menu>
<Menu.Item>
<a rel="noopener noreferrer" href="http://www.alipay.com/">Profile</a>
</Menu.Item>
<Menu.Item>
<a rel="noopener noreferrer" href="http://www.taobao.com/">Logout</a>
</Menu.Item>
</Menu>
);
return (
<LocaleProvider locale={enUS}>
<Layout>
<Sider
trigger={null}
collapsible
collapsed={this.state.collapsed}
>
<div className="logo">
<img src="/antd-logo.svg" style={style.logoImg}/>
<span style={style.logoTitle}>
METEOR ANTD
</span>
</div>
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} onClick={this.linkTo}>
<Menu.Item key="App.home">
<Icon type="home"/>
<span className="nav-text">Home</span>
</Menu.Item>
<Menu.Item key="App.form">
<Icon type="video-camera"/>
<span className="nav-text">Form</span>
</Menu.Item>
<Menu.Item key="3">
<Icon type="upload"/>
<span className="nav-text">nav 3</span>
</Menu.Item>
<SubMenu key="sub1" title={<span><Icon type="mail"/><span>Navigation One</span></span>}>
<Menu.Item key="4">Option 1</Menu.Item>
<Menu.Item key="5">Option 2</Menu.Item>
<Menu.Item key="6">Option 3</Menu.Item>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="mail"/><span>Navigation One</span></span>}>
<MenuItemGroup title="Item 1">
<Menu.Item key="7">Option 1</Menu.Item>
<Menu.Item key="8">Option 2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="Item 2">
<Menu.Item key="9">Option 3</Menu.Item>
<Menu.Item key="10">Option 4</Menu.Item>
</MenuItemGroup>
</SubMenu>
</Menu>
</Sider>
<Layout>
<Header style={{background: '#fff', padding: 0}}>
<Row>
<Col span={12}>
<Icon
className="trigger"
type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={this.toggle}
/>
</Col>
<Col span={12}>
<Dropdown overlay={menuHead} placement="bottomRight">
<a className="ant-dropdown-link" href="#">
Username <Icon type="down"/>
</a>
</Dropdown>
</Col>
</Row>
</Header>
<Content style={{margin: '0 16px'}}>
<Breadcrumb style={{margin: '12px 0'}}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<div style={{background: '#fff', padding: 24, minHeight: 360}}>
{this.props.content}
</div>
</Content>
<Footer style={{textAlign: 'center'}}>
Ant Design ┬й2016 Created by Ant UED
</Footer>
</Layout>
</Layout>
</LocaleProvider>
);
}
}
рдЪреАрдВрдЯреА рдбрд┐рдЬрд╛рдЗрди рдЯреАрдо рдмрдЧ рдХрд╛ рдкрддрд╛ рд▓рдЧрд╛рдиреЗ рдпрд╛ рдЪреАрдВрдЯреА рдбрд┐рдЬрд╛рдЗрди рдХреА рдпреЛрдЬрдирд╛рдУрдВ рдкрд░ рдЪрд░реНрдЪрд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЧрд┐рдЯрд╣рдм рдореБрджреНрджреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреА рд╣реИред рдЗрд╕рд▓рд┐рдП, рдХреГрдкрдпрд╛ рдпрд╣рд╛рдВ рдЙрдкрдпреЛрдЧ рд╕рдВрдмрдВрдзреА рдкреНрд░рд╢реНрди рди рдкреВрдЫреЗрдВред рдЖрдк рд╕реНрдЯреИрдХ рдУрд╡рд░рдлрд╝реНрд▓реЛ рдпрд╛ рд╕реЗрдЧрдореЗрдВрдЯ рдлреЙрд▓реНрдЯ рдореЗрдВ рдкреНрд░рд╢реНрди рдкреВрдЫрдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рдлрд┐рд░ рдЕрдкрдиреЗ рдкреНрд░рд╢реНрдиреЛрдВ рдкрд░ рдЯреИрдЧ antd
рдФрд░ react
рдХрд░реЗрдВред рд╕рд╣рдпреЛрдЧ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж!
рдХреНрд╖рдорд╛ рдХрд░реЗрдВ, рдзрдиреНрдпрд╡рд╛рджред
@thearabbit рдХреНрдпрд╛ рдЖрдкрдиреЗ рдЕрдкрдирд╛ рдкреНрд░рд╢реНрди рдкреЛрд╕реНрдЯ рдХрд┐рдпрд╛ рдФрд░ рдХреЛрдИ рдЙрддреНрддрд░ рдорд┐рд▓рд╛? рдпрджрд┐ рд╕рдВрднрд╡ рд╣реЛ рддреЛ рдХреГрдкрдпрд╛ рдЙрд╕рдХрд╛ рдПрдХ рд▓рд┐рдВрдХ рд╕рд╛рдЭрд╛ рдХрд░реЗрдВред рдзрдиреНрдпрд╡рд╛рдж
рд╕рдорд╛рдзрд╛рди рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреЛрдИ рдЦрдмрд░?
рдЕрдм рдореИрдВ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдБ
state = {
windowHeight: window.innerHeight
};
componentDidMount() {
window.addEventListener('resize', this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
handleResize = (e) => {
this.setState({windowHeight: window.innerHeight})
};
------------
render(){
const minHeight = this.state.windowHeight - 172;
return (
<div id="container" style={{background: '#fff', padding: 24, minHeight: minHeight}}>
{children}
</div>
рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ:
<Layout style={{height:"100vh"}}>
рдЬрдм рдЖрдк рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рд╡рд┐рдВрдбреЛрдЬрд╝ рдКрдВрдЪрд╛рдИ рдХрд╛ рдЖрдХрд╛рд░ рдмрджрд▓рддреЗ рд╣реИрдВ рддреЛ рдЗрд╕рдореЗрдВ рд╕рдорд╕реНрдпрд╛ рд╣реЛрддреА рд╣реИ?
рд╣рд╛рдБ, @thearabbit рдпрд╣ рдХрд░рддрд╛ рд╣реИ
рдореИрдВрдиреЗ рдЬреЛ рдХрд┐рдпрд╛ рд╡рд╣ рд╕рдордЭ рдореЗрдВ рдЖрддрд╛ рд╣реИ:
bodyStyle={{ height: "100vh", overflow: "auto" }}
рдЪреАрдВрдЯреА рдбрд┐рдЬрд╛рдЗрди рдЯреАрдо рдмрдЧ рдХрд╛ рдкрддрд╛ рд▓рдЧрд╛рдиреЗ рдпрд╛ рдЪреАрдВрдЯреА рдбрд┐рдЬрд╛рдЗрди рдХреА рдпреЛрдЬрдирд╛рдУрдВ рдкрд░ рдЪрд░реНрдЪрд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЧрд┐рдЯрд╣рдм рдореБрджреНрджреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреА рд╣реИред рдЗрд╕рд▓рд┐рдП, рдХреГрдкрдпрд╛ рдпрд╣рд╛рдВ рдЙрдкрдпреЛрдЧ рд╕рдВрдмрдВрдзреА рдкреНрд░рд╢реНрди рди рдкреВрдЫреЗрдВред рдЖрдк рд╕реНрдЯреИрдХ рдУрд╡рд░рдлрд╝реНрд▓реЛ рдпрд╛ рд╕реЗрдЧрдореЗрдВрдЯ рдлреЙрд▓реНрдЯ рдореЗрдВ рдкреНрд░рд╢реНрди рдкреВрдЫрдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рдлрд┐рд░ рдЕрдкрдиреЗ рдкреНрд░рд╢реНрдиреЛрдВ рдкрд░ рдЯреИрдЧ
antd
рдФрд░react
рдХрд░реЗрдВред рд╕рд╣рдпреЛрдЧ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж!
рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЛ рдкреНрд░рд╢реНрдирдХрд░реНрддрд╛ рдХреЛ рд╕рдореНрдорд╛рди рджреЗрдирд╛ рдЪрд╛рд╣рд┐рдП
рдХреНрдпрд╛ 100% рдХреА рдКрдВрдЪрд╛рдИ рдХреЗ рд▓рд┐рдП рдХреЛрдИ рд╡рд░реНрдЧ рдХрд╛ рдирд╛рдо рд╣реИ? рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рдореЗрдВ, рдКрдВрдЪрд╛рдИ 100% рдХреЗ рд▓рд┐рдП рдПрдХ рд╡рд░реНрдЧ 'h-100' рд╣реИ
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ:
<Layout style={{height:"100vh"}}>