antd#Layout JavaScript Examples

NavAndHeader = (props) => {
	const { userId, fetchUserOrganizations, selectedOrganization, ...rest } = props;

	useEffect(() => {
		userId && fetchUserOrganizations(userId);
	}, [selectedOrganization, userId]);

	return (
		<Layout className="nav-header">
			<DashboardNav {...rest} />
			<Content>
				<DashboardHeader />
				{props.children}
			</Content>
		</Layout>
	);
}

function Base () {
  return (
    <Layout>
      <Content theme='light' style={{'minHeight': '90vh'}} className="background-white">
        <MainRouter />
      </Content>
      <Footer className={isSmall ?  'center mobile-footer' : 'background-white web-footer'}>
        <PageFooter />
      </Footer>
    </Layout>
  )
}

render() {
    return (
      <Layout className="layout-style">
        <FileUnknownOutlined style={{ fontSize: "400%", marginBottom: "2vh" }} />
        <h2>Welcome to Limbo.</h2>
        <h3>There is nothing here. Really.</h3>
        <p>You probably ended up here because you tried to access a page you did not have access to or tried to access a page that does not exist.</p>
        <p>Click on any of the links on the menu to return to society.</p>
        <p>If you believe this is an error, please contact an admin.</p>
      </Layout>
    );
  }

App = () => (
  <Layout>
    <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
      <div className="logo" />
      <Menu theme="light" mode="horizontal" defaultSelectedKeys={['1']}>
        <Menu.Item key="logo"><img className="ant-menu-item" src={"qiskitflow_logo.png"}/></Menu.Item>
        <Menu.Item key="1"> 
          Experiments
        </Menu.Item>
      </Menu>
    </Header>
    <Content className="site-layout" style={{ padding: '0 50px', marginTop: 64 }}>
      <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>QiskitFlow</Breadcrumb.Item>
        <Breadcrumb.Item>Experiments</Breadcrumb.Item>
      </Breadcrumb>
      <div className="site-layout-background" style={{ padding: 24, minHeight: "80vh", backgroundColor: "white" }}>
       <ExperimentsPage />
      </div>
    </Content>
    <Footer style={{ textAlign: 'center' }}>QiskitFlow ©2020 </Footer>
  </Layout>
)

render() {
    const theme = this.props.theme;
    const rotation = -Math.random() * 45;
    const rotation2 = -rotation;
    return (
      <div>
        <div
          style={{
            height: AppLayout.borderWidth,
            backgroundColor: theme.seperator,
          }}
        />
        <Layout
          hasSider={false}
          style={{
            height: AppLayout.simpleSecondaryPageHeight,
          }}
        >
          <Content
            width="100%"
            style={{
              paddingTop: '0px',
              backgroundColor: theme.foreground,
              borderLeftStyle: 'none',
            }}
          ></Content>
        </Layout>
      </div>
    );
  }

Main = (props) => {
  const { tagsView } = props;
  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider />
      <Layout>
        <Header />
        {tagsView ? <TagsView /> : null}
        <Content />
        <RightPanel />
      </Layout>
    </Layout>
  );
}

App = () => {
	const [data, setdata] = useState(null);
	useEffect(() => {
		axios.get('http://localhost:5000/tweets').then((tweets) => {
			setdata(tweets.data);
			console.log(tweets.data);
		});
	}, []);

	return (
		<Layout style={{ minHeight: '100vh' }}>
			<SiderDemo />
			<Layout className='site-layout'>
				<Header className='heading' style={{ margin: 0, color: 'floralwhite', backgroundColor: '#001529' }}>
					Twitter SOS
				</Header>
				<Content style={{ margin: '0 16px' }}>
					<div className='site-layout-background' style={{ padding: 24, minHeight: 360 }}>
						{data ? data.map((tweet) => <TweetCard tweet={tweet} />) : ' '}
					</div>
				</Content>
				<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
			</Layout>
		</Layout>
	);
}

function ProtectedRoutes() {

  return (
    <Layout>
      <Layout>
        {/*<Sider/>*/}
        <Layout>
          {/*<AppHeader>*/}
          <Content>
            <Switch>
              <Suspense fallback={<div>Loading...</div>}>
                {routes.map(({component: Component, path, exact}, index) => (
                  <Route path={`/${path}`} key={index} exact={exact}>
                    <Component/>
                  </Route>
                ))}
              </Suspense>
            </Switch>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}

function Home() {
  return (
      <div className="mainLayout1" >
        <Layout className="mainLayout">
        <Header>
            <AppHeader/>
        </Header>
        <Content>
            <AppHome/>
        </Content>
        <Footer>
            <AppFooter/>  
        </Footer>      
        </Layout>
      </div>

  );
}

ReactDOM.render((
  <Router>
    <Layout>
      <Header className='header'>DTDesign-React数据映射组件</Header>
      <Layout>
        <Com />
      </Layout>
    </Layout>
  </Router>
), document.getElementById('main'));

ReactDOM.render((
  <Router>
    <Layout>
      <Header className='header'>DTDesign-React数据血缘图</Header>
      <Layout>
        <Com />
      </Layout>
    </Layout>
  </Router>
), document.getElementById('main'));

ReactDOM.render((
  <Router>
    <Layout>
      <Header className='header'>DTDesign-React运维/监控图</Header>
      <Layout>
        <Demo />
      </Layout>
    </Layout>
  </Router>
), document.getElementById('main'));

ReactDOM.render((
  <Router>
    <Layout>
      <Header className='header'>DTDesign-React可视化建模组件</Header>
      <Layout>
        <Component/>
      </Layout>
    </Layout>
  </Router>
), document.getElementById('main'));

function App({ actions, selectedStream, stream, path }) {
  const changeLanguage = language => {
    i18n.changeLanguage(language);
  };
  return (
    <Layout style={{ height: '100vh' }}>
      <Sider theme="light" width={400} className="sider">
        <Title level={3}>Websocket Demo</Title>
        <SelectionPanel actions={actions} selectedStream={selectedStream} />
      </Sider>
      <Content className="content">
        <SubscriptionPanel stream={stream} path={path} selectedStream={selectedStream} />
      </Content>
      <Footer>
        <Select defaultValue="en" style={{ width: 150 }} onChange={v => changeLanguage(v)}>
          <Option value="en">English</Option>
          <Option value="cn">中文</Option>
        </Select>
      </Footer>
    </Layout>
  );
}

render() {
    const { children = {} } = this.props
    return (
      <ConfigProvider locale={zhCN}>
        <Layout>
          <Content style={{ minHeight: '100vh' }}>{children}</Content>
        </Layout>
      </ConfigProvider>
    )
  }

render() {
    // 设置Sider的minHeight可以使左右自适应对齐
    return (
      <div id='page'>
        <Layout>
            <Header style={{background: '#fff', padding: '0 16px'}} theme='light'>
              <HeaderBar collapsed={this.state.collapsed} onToggle={this.toggle}/>
            </Header>
            <Layout>
              <Sider collapsible
                  trigger={null}
                  collapsed={this.state.collapsed}
                  >
                <SiderNav/>
              </Sider>
              <Content> 
                <ContentMain/>
              </Content>
            </Layout>
            <Footer style={{textAlign: 'center'}}>React-Admin ©2018 Created by [email protected] <a target='_blank' href='https://github.com/zhangZhiHao1996/react-admin-master'>github地址</a></Footer>
        </Layout>
      </div>
    );
  }

// import { useNetworkState } from "react-use";

function App() {
  // const [isOnline] = useNetwork();
  // // const networkState = useNetworkState();

  // if (!isOnline) {
  //   notification.config({
  //     duration: 0,
  //   });
  //   notification.error({
  //     message: "No internet connection",
  //     description: "Cannot connect to the server, Check your internet network",
  //   });
  // }

  const { isLoggedIn } = useSelector(selectAuth);

  if (!isLoggedIn) return <Router />;
  else {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Navigation />
        <Layout style={{ minHeight: '100vh' }}>
          <HeaderContent />
          <Router isLoggedIn={true} />
        </Layout>
      </Layout>
    );
  }
}

export default function CrudLayout({
  children,
  config,
  sidePanelTopContent,
  sidePanelBottomContent,
  fixHeaderPanel,
}) {
  return (
    <DefaultLayout>
      <Layout style={{ minHeight: "100vh" }}>
        <SidePanel
          config={config}
          topContent={sidePanelTopContent}
          bottomContent={sidePanelBottomContent}
          fixHeaderPanel={fixHeaderPanel}
        ></SidePanel>
        <Layout className="site-layout">
          <HeaderContent />
          <Content
            className="site-layout-background"
            style={{
              padding: "50px 40px",
              margin: "50px auto",
              width: "100%",
              maxWidth: "1000px",
            }}
          >
            {children}
          </Content>
        </Layout>
      </Layout>
    </DefaultLayout>
  );
}

render() {
    // 设置Sider的minHeight可以使左右自适应对齐
    return (
      <div id="page">
        <Layout>
          <Sider collapsible trigger={null} collapsed={this.state.collapsed}>
            <SiderNav />
          </Sider>
          <Layout>
            <Header style={{ background: '#fff', padding: '0 16px' }}>
              <HeaderBar
                collapsed={this.state.collapsed}
                onToggle={this.toggle}
              />
            </Header>
            <Content>
              <ContentMain />
            </Content>
            <Footer style={{ textAlign: 'center' }}>
              Copyright©2020 All Right Reserved-管理员界面{' '}
              <a target="_blank" href="https://github.com/imtsuki/aircon">
                github地址
              </a>
            </Footer>
          </Layout>
        </Layout>
      </div>
    );
  }

{ Sider } = Layout

{ Header } = Layout

{ Content, Footer } = Layout

render() {
        return (

            <Layout className="form-style">

                <Modal
                    title={null}
                    visible={this.state.previewModal}
                    footer={null}
                    bodyStyle={{ textAlign: "center" }}
                    onCancel={() => { this.setState({ previewModal: false }) }}
                >
                    <Tabs defaultActiveKey="challenge">
                        <TabPane
                            tab={<span><ProfileOutlined /> Challenge</span>}
                            key="challenge"
                        >
                            {this.state.challengeWriteup !== "" && (
                                <Tooltip title="View writeups for this challenge">
                                    <Button shape="circle" size="large" style={{ position: "absolute", right: "2ch" }} type="primary" icon={<SolutionOutlined />} onClick={() => { window.open(this.state.challengeWriteup) }} />
                                </Tooltip>
                            )}
                            {this.state.challengeWriteup === "" && (
                                <Tooltip title="Writeups are not available for this challenge">
                                    <Button disabled shape="circle" size="large" style={{ position: "absolute", right: "2ch" }} type="primary" icon={<SolutionOutlined />} />
                                </Tooltip>
                            )}
                            <h1 style={{ fontSize: "150%" }}>{this.state.previewChallenge.name}</h1>
                            <div>
                                {this.state.challengeTags}
                            </div>
                            <h2 style={{ color: "#1765ad", marginTop: "2vh", marginBottom: "6vh", fontSize: "200%" }}>{this.state.previewChallenge.points}</h2>

                            <div className="challengeModal">
                                <MarkdownRender>{this.state.previewChallenge.description}</MarkdownRender>
                            </div>

                            <div style={{ marginTop: "6vh", display: "flex", flexDirection: "column" }}>
                                {this.state.challengeHints}
                            </div>
                            <div style={{ display: "flex", justifyContent: "center" }}>
                                <Input style={{ width: "45ch" }} defaultValue="" placeholder={"Enter a flag"} />
                                <Button type="primary" icon={<FlagOutlined />}>Submit</Button>
                            </div>
                            <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", marginTop: "2vh" }}>
                                <p>Challenge Author: <em>You</em></p>
                                <p style={{ color: "#d87a16", fontWeight: 500 }}>Attempts Remaining: {this.state.previewChallenge.max_attempts}</p>
                            </div>
                        </TabPane>
                    </Tabs>


                </Modal>
                <div style={{ display: "flex", alignItems: "center", alignContent: "center" }}>
                    <Button type="primary" onClick={this.props.handleBack} icon={<LeftOutlined />} style={{ maxWidth: "20ch", marginBottom: "3vh", marginRight: "2vw" }}>Back</Button>
                    <h1 style={{ fontSize: "180%" }}> <FlagTwoTone /> Create New Challenge</h1>

                </div>
                <CreateChallengeForm allCat={this.props.allCat} challenges={this.props.challenges} handleCreateBack={this.props.handleCreateBack.bind(this)} previewChallenge={this.previewChallenge.bind(this)} state={this.state} loadingStatus={this.state.loading} setState={this.setState.bind(this)}></CreateChallengeForm>
            </Layout>
        );
    }

{ Header, Content, Footer } = Layout

render() {
    const theme = this.props.theme;
    return (
      <div>
        <Layout
          hasSider
          style={{
            height: AppLayout.simpleSecondaryPageHeight,
          }}
        >
          <Sider
            width={AppLayout.tradePanelWidth}
            style={{
              padding: '0px',
              background: theme.sidePanelBackground,
              borderStyle: 'none',
            }}
            trigger={null}
            breakpoint="sm"
            collapsedWidth="0"
          >
            <Scroller
              style={{
                borderTop: '1px solid ' + theme.seperator,
              }}
            >
              {this.props.navigation}
            </Scroller>
          </Sider>
          <Content
            width="100%"
            style={{
              backgroundColor: theme.background,
              borderLeftStyle: 'none',
            }}
          >
            <div
              style={{
                marginLeft: 'auto',
                marginRight: 'auto',
                width: '740px',
                height: '100%',
                background: this.getContainerBackground(),
                backgroundSize: '40px 40px',
              }}
            >
              <MarkdownWrapper>
                <ReactMarkdown
                  escapeHtml={false}
                  source={this.state.markdown}
                />
              </MarkdownWrapper>
            </div>
          </Content>
        </Layout>
      </div>
    );
  }

{ Content } = Layout

{ Header, Content, Footer } = Layout

{ Content } = Layout

{ Header, Content, Footer } = Layout