Ant-design: Cara mengatur 100% tata letak ketinggian

Dibuat pada 17 Feb 2017  ·  12Komentar  ·  Sumber: ant-design/ant-design

Saya seorang pemula, saya mendasarkan pada Meteor JS .
Cara mengatur 100% tata letak ketinggian (layar)

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

Komentar yang paling membantu

Ini bekerja untuk saya:
<Layout style={{height:"100vh"}}>

Semua 12 komentar

Tim Ant Design menggunakan masalah GitHub untuk melacak bug atau mendiskusikan rencana Ant Design. Jadi, tolong jangan ajukan pertanyaan penggunaan di sini. Anda dapat mencoba mengajukan pertanyaan di Stack Overflow atau Segment Fault , lalu menerapkan tag antd dan react pada pertanyaan Anda. Terimakasih atas kerjasamanya!

Maaf, terima kasih.

@thearabbit Apakah Anda memposting pertanyaan Anda dan mendapat jawaban? Silakan bagikan tautan ke sana jika memungkinkan. Terima kasih

ada kabar tentang solusinya?

Sekarang saya menggunakan

    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>

Ini bekerja untuk saya:
<Layout style={{height:"100vh"}}>

Apakah ada masalah ketika Anda mengubah ukuran tinggi jendela secara manual?

Ya, @thearabbit memang begitu

Apa yang saya lakukan masuk akal:

bodyStyle={{ height: "100vh", overflow: "auto" }}

Tim Ant Design menggunakan masalah GitHub untuk melacak bug atau mendiskusikan rencana Ant Design. Jadi, tolong jangan ajukan pertanyaan penggunaan di sini. Anda dapat mencoba mengajukan pertanyaan di Stack Overflow atau Segment Fault , lalu menerapkan tag antd dan react pada pertanyaan Anda. Terimakasih atas kerjasamanya!

saya pikir Anda harus menghormati penanya

Apakah ada nama kelas untuk ketinggian 100%? Misalnya, di bootstrap, ada kelas 'h-100' untuk tinggi 100%

Apakah halaman ini membantu?
0 / 5 - 0 peringkat