Π― Π½ΠΎΠ²ΠΈΡΠΎΠΊ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ 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>
);
}
}
ΠΠΎΠΌΠ°Π½Π΄Π° Ant Design ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ GitHub Π΄Π»Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ ΠΈΠ»ΠΈ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ ΠΏΠ»Π°Π½ΠΎΠ² Ant Design. ΠΠΎΡΡΠΎΠΌΡ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π½Π΅ Π·Π°Π΄Π°Π²Π°ΠΉΡΠ΅ Π·Π΄Π΅ΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠ² ΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Π·Π°Π΄Π°ΡΡ Π²ΠΎΠΏΡΠΎΡΡ Π² Stack Overflow ΠΈΠ»ΠΈ Segment Fault , Π° Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΡΠ²ΠΎΠΈΠΌ Π²ΠΎΠΏΡΠΎΡΠ°ΠΌ ΡΠ΅Π³ΠΈ 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" }}
ΠΠΎΠΌΠ°Π½Π΄Π° Ant Design ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ GitHub Π΄Π»Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ ΠΈΠ»ΠΈ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ ΠΏΠ»Π°Π½ΠΎΠ² Ant Design. ΠΠΎΡΡΠΎΠΌΡ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π½Π΅ Π·Π°Π΄Π°Π²Π°ΠΉΡΠ΅ Π·Π΄Π΅ΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠ² ΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Π·Π°Π΄Π°ΡΡ Π²ΠΎΠΏΡΠΎΡΡ Π² Stack Overflow ΠΈΠ»ΠΈ Segment Fault , Π° Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΡΠ²ΠΎΠΈΠΌ Π²ΠΎΠΏΡΠΎΡΠ°ΠΌ ΡΠ΅Π³ΠΈ
antd
ΠΈreact
. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΡΠΎΡΡΡΠ΄Π½ΠΈΡΠ΅ΡΡΠ²ΠΎ!
Π― Π΄ΡΠΌΠ°Ρ, ΡΠ΅Π±Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠΎΡΠ²ΠΈΡΡ ΡΠ²Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ Π²ΠΎΠΏΡΠΎΡΠ°ΡΡΠ΅ΠΌΡ
ΠΡΡΡ Π»ΠΈ ΠΊΠ°ΠΊΠΎΠ΅-Π½ΠΈΠ±ΡΠ΄Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ° Π΄Π»Ρ Π²ΡΡΠΎΡΡ 100%? ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² Π±ΡΡΡΡΡΠ°ΠΏΠ΅ Π΅ΡΡΡ ΠΊΠ»Π°ΡΡ h-100 Π΄Π»Ρ Π²ΡΡΠΎΡΡ 100%.
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄Π»Ρ ΠΌΠ΅Π½Ρ:
<Layout style={{height:"100vh"}}>