Ant-design: рдКрдВрдЪрд╛рдИ рдХрд╛ 100% рд▓реЗрдЖрдЙрдЯ рдХреИрд╕реЗ рд╕реЗрдЯ рдХрд░реЗрдВ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 17 рдлрд╝рд░ре░ 2017  ┬╖  12рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: ant-design/ant-design

рдореИрдВ рдПрдХ рдиреМрд╕рд┐рдЦрд┐рдпрд╛ рд╣реВрдВ, рдореИрдВ Meteor JS рдкрд░ рдЖрдзрд╛рд░рд┐рдд рд╣реВрдВред
рдКрдВрдЪрд╛рдИ рдХрд╛ 100% рд▓реЗрдЖрдЙрдЯ рдХреИрд╕реЗ рд╕реЗрдЯ рдХрд░реЗрдВ (рд╕реНрдХреНрд░реАрди)

image

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>
        );
    }
}

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ:
<Layout style={{height:"100vh"}}>

рд╕рднреА 12 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдЪреАрдВрдЯреА рдбрд┐рдЬрд╛рдЗрди рдЯреАрдо рдмрдЧ рдХрд╛ рдкрддрд╛ рд▓рдЧрд╛рдиреЗ рдпрд╛ рдЪреАрдВрдЯреА рдбрд┐рдЬрд╛рдЗрди рдХреА рдпреЛрдЬрдирд╛рдУрдВ рдкрд░ рдЪрд░реНрдЪрд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЧрд┐рдЯрд╣рдм рдореБрджреНрджреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреА рд╣реИред рдЗрд╕рд▓рд┐рдП, рдХреГрдкрдпрд╛ рдпрд╣рд╛рдВ рдЙрдкрдпреЛрдЧ рд╕рдВрдмрдВрдзреА рдкреНрд░рд╢реНрди рди рдкреВрдЫреЗрдВред рдЖрдк рд╕реНрдЯреИрдХ рдУрд╡рд░рдлрд╝реНрд▓реЛ рдпрд╛ рд╕реЗрдЧрдореЗрдВрдЯ рдлреЙрд▓реНрдЯ рдореЗрдВ рдкреНрд░рд╢реНрди рдкреВрдЫрдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рдлрд┐рд░ рдЕрдкрдиреЗ рдкреНрд░рд╢реНрдиреЛрдВ рдкрд░ рдЯреИрдЧ 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' рд╣реИ

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

tianyacsdn picture tianyacsdn  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

ryannealmes picture ryannealmes  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

tangsj picture tangsj  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

longhuasishen picture longhuasishen  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

AhmedSayed77 picture AhmedSayed77  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ