javascript - Ant Design Layout is not working as expected

I have a React application. I have decided to add a layout using Ant Design. And i followed below example.

/ponents/layout/#ponents-layout-demo-custom-trigger

This is my ponent code. (Full.js)

import React, { Component, Fragment } from 'react'
import { Layout, Menu } from 'antd'
import Icon from '@ant-design/icons'
import './Full.css'
import ReactDOM from 'react-dom'
import DailyData from '../DailyData'
import Container from 'react-bootstrap/Container'
import Toggle from './Toggle'

const { Header, Footer, Sider, Content } = Layout;

class Full extends React.Component {

    state = {
        collapsed: false,
    };
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }

    render() {
        return (
            <Layout style={{ height: "100vh" }}>
                <Sider
                    trigger={null}
                    collapsible
                    collapsed={this.state.collapsed}
                >
                    <div className="logo" />
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        <Menu.Item key="1">
                            <Icon type="user" />
                            <span>nav 1</span>
                        </Menu.Item>
                        <Menu.Item key="2">
                            <Icon type="video-camera" />
                            <span>nav 2</span>
                        </Menu.Item>
                        <Menu.Item key="3">
                            <Icon type="upload" />
                            <span>nav 3</span>
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout>
                    <Header style={{ background: '#fff', padding: 0 }}>
                        <Icon
                            className="trigger"
                            type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                            onClick={this.toggle}
                        />
                    </Header>
                    <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
                        Content
              </Content>
                </Layout>
            </Layout>
        );
    }
}

export default Full;

I'm using this ponent as below in App.js file.

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from './ponents/layout/Header.js'
import DailyData from './ponents/DailyData.js'
import Container from 'react-bootstrap/Container'
import Toggle from './ponents/layout/Toggle.js'
import Full from './ponents/layout/Full'


class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="App">
        <Full />
      </div >
    );
  }
}

export default App;

My Full.css file as below.

#ponents-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 16px;
    cursor: pointer;
    transition: color .3s;
  }

  #ponents-layout-demo-custom-trigger .trigger:hover {
    color: #108ee9;
  }

  #ponents-layout-demo-custom-trigger .logo {
    height: 32px;
    background: #333;
    border-radius: 6px;
    margin: 16px;
  }

But the output will display like this.

I have a React application. I have decided to add a layout using Ant Design. And i followed below example.

https://2x.ant.design/ponents/layout/#ponents-layout-demo-custom-trigger

This is my ponent code. (Full.js)

import React, { Component, Fragment } from 'react'
import { Layout, Menu } from 'antd'
import Icon from '@ant-design/icons'
import './Full.css'
import ReactDOM from 'react-dom'
import DailyData from '../DailyData'
import Container from 'react-bootstrap/Container'
import Toggle from './Toggle'

const { Header, Footer, Sider, Content } = Layout;

class Full extends React.Component {

    state = {
        collapsed: false,
    };
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }

    render() {
        return (
            <Layout style={{ height: "100vh" }}>
                <Sider
                    trigger={null}
                    collapsible
                    collapsed={this.state.collapsed}
                >
                    <div className="logo" />
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        <Menu.Item key="1">
                            <Icon type="user" />
                            <span>nav 1</span>
                        </Menu.Item>
                        <Menu.Item key="2">
                            <Icon type="video-camera" />
                            <span>nav 2</span>
                        </Menu.Item>
                        <Menu.Item key="3">
                            <Icon type="upload" />
                            <span>nav 3</span>
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout>
                    <Header style={{ background: '#fff', padding: 0 }}>
                        <Icon
                            className="trigger"
                            type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                            onClick={this.toggle}
                        />
                    </Header>
                    <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
                        Content
              </Content>
                </Layout>
            </Layout>
        );
    }
}

export default Full;

I'm using this ponent as below in App.js file.

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from './ponents/layout/Header.js'
import DailyData from './ponents/DailyData.js'
import Container from 'react-bootstrap/Container'
import Toggle from './ponents/layout/Toggle.js'
import Full from './ponents/layout/Full'


class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="App">
        <Full />
      </div >
    );
  }
}

export default App;

My Full.css file as below.

#ponents-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 16px;
    cursor: pointer;
    transition: color .3s;
  }

  #ponents-layout-demo-custom-trigger .trigger:hover {
    color: #108ee9;
  }

  #ponents-layout-demo-custom-trigger .logo {
    height: 32px;
    background: #333;
    border-radius: 6px;
    margin: 16px;
  }

But the output will display like this.

Share Improve this question asked Apr 10, 2020 at 9:59 K M Dilshan Udara 1,2152 gold badges12 silver badges18 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

Remove #ponents-layout-demo-custom-trigger from CSS file and it will work.

App.css

@import "~antd/dist/antd.css";

.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}

Well, I also used Ant design Sider and I am using version 4.4.1. Not sure what you want to acheive, so I am sharing the whole code with you.

import React from 'react';
import { Route, Switch, NavLink, Redirect, withRouter } from 'react-router-dom'
import {RouteComponentProps} from "react-router";
import { Layout, Menu } from 'antd';
import {
  DesktopOutlined,
  PieChartOutlined,
  UserOutlined,
  SettingOutlined
} from '@ant-design/icons';

import Shipper from '../shipper/shipper'

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

// Type whatever you expect in 'this.props.match.params.*'
type PathParamsType = {
  param1: string,
}

// Your ponent own properties
type PropsType = RouteComponentProps<PathParamsType> & {

}

class Sidebar extends React.Component<PropsType> {

  state = {
    collapsed: false,
  };

  onCollapse = (collapsed: any) => {
    this.setState({ collapsed });
  };


  render() {
    let { pathname } = this.props.location;
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Header className="header">
          <div className="logo" />
          <Menu mode="horizontal" theme="dark" className="flex-setting">
            <SubMenu icon={<SettingOutlined />} title="Settings">
              <Menu.ItemGroup title="Basic Settings">
                <Menu.Item key="setting:2">
                  <a href={"/accounts/logout/"} target="_self">
                    Signout
                  </a>
                </Menu.Item>
              </Menu.ItemGroup>
            </SubMenu>
          </Menu>
        </Header>
        <Layout>
        <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
          {/* <div className="logo" /> */}
          <Menu theme="dark" 
          defaultSelectedKeys={['/shipper']}
          selectedKeys={[pathname]} 
          mode="inline">
            <Menu.Item key="/shipper" icon={<PieChartOutlined />}>
              <NavLink to="/shipper">
                <span>Shipper</span>
              </NavLink>
            </Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          {/* <Header className="site-layout-background" style={{ padding: 0 }} /> */}
          <Content style={{ margin: "16px 16px", background: "#fff" }}>
            <div style={{ padding: 24, background: "#fff", minHeight: 360 }}>
              <Switch>
                <Route exact path="/" render={() => (
                    <Redirect to="/shipper"/>
                )}/>
                <Route path="/shipper">
                  <Shipper />
                </Route>
              </Switch>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Copyrights &copy; 2020 All Rights Reseverd by Company.</Footer>
        </Layout>
      </Layout>
      </Layout>
    );
  }
}

export default withRouter(Sidebar);

My css is following:

.header {
  display: inherit;
}

.logo {
  height: 32px;
  width: 35px;
  margin: 16px;
  background-image: url("main-logo.jpg");
}

.flex-setting {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
}

Alot of things not necessary for you, so remove that part. Once you follow this, you will achieve something link this:

Because the example has trigger class ID # ponent-layout-demo-custom-trigger in front of it but the copied code also has # ponent-layout-demo-custom-trigger removed enter image description here

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744362398a4570534.html

javascript - Ant Design Layout is not working as expected - Stack Overflow

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Ant Design Layout is not working as expected - Stack Overflow

3 Answers 3

相关推荐