μ λ μ΄λ³΄μμ΄λ©° 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%μ λν ν΄λμ€ μ΄λ¦μ΄ μμ΅λκΉ? μλ₯Ό λ€μ΄ λΆνΈμ€νΈλ©μλ λμ΄ 100%μ λν ν΄λμ€ 'h-100'μ΄ μμ΅λλ€.
κ°μ₯ μ μ©ν λκΈ
μ΄κ²μ λλ₯Ό μν΄ μλν©λλ€.
<Layout style={{height:"100vh"}}>