Ant-design: كيفية تعيين تخطيط الارتفاع بنسبة 100٪

تم إنشاؤها على ١٧ فبراير ٢٠١٧  ·  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>
        );
    }
}
Usage

التعليق الأكثر فائدة

هذا يناسبني:
<Layout style={{height:"100vh"}}>

ال 12 كومينتر

يستخدم فريق 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٪؟ على سبيل المثال ، في bootstrap ، هناك فئة "h-100" للارتفاع بنسبة 100٪

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات