antd#Layout JavaScript Examples

The following examples show how to use antd#Layout. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: NavAndHeader.js From video-journal-for-teams-fe with MIT License

6 votes

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

Example #2

Source File: Base.js From Cowin-Notification-System with MIT License

6 votes

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

Example #3

Source File: oops.js From ctf_platform with MIT License

6 votes

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

Example #4

Source File: App.js From QiskitFlow with Apache License 2.0

6 votes

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

Example #5

Source File: SwapPages.js From dexwebapp with Apache License 2.0

6 votes

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

Example #6

Source File: index.jsx From react-antd-admin-template with MIT License

6 votes

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

Example #7

Source File: App.js From twitterSOS with GNU General Public License v3.0

6 votes

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

Example #8

Source File: ProtectedRoutes.js From cra-template-redux-auth-starter with MIT License

6 votes

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

Example #9

Source File: home.js From portfolyo-mern with MIT License

6 votes

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

  );
}

Example #10

Source File: index.jsx From data-mapping-component with MIT License

6 votes

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

Example #11

Source File: index.jsx From react-lineage-dag with MIT License

6 votes

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

Example #12

Source File: index.jsx From react-monitor-dag with MIT License

6 votes

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

Example #13

Source File: index.jsx From react-visual-modeling with MIT License

6 votes

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

Example #14

Source File: App.js From websocket-demo with MIT License

6 votes

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

Example #15

Source File: index.js From AgileTC with Apache License 2.0

6 votes

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

Example #16

Source File: index.js From discern with BSD 3-Clause "New" or "Revised" License

6 votes

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

Example #17

Source File: index.jsx From erp-crm with MIT License

6 votes

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

Example #18

Source File: index.jsx From starter-antd-admin-crud-auth-mern with MIT License

6 votes

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

Example #19

Source File: index.js From aircon with GNU General Public License v3.0

6 votes

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

Example #20

Source File: SiderMenu.js From acy-dex-interface with MIT License

5 votes

{ Sider } = Layout

Example #21

Source File: DashboardHeader.js From video-journal-for-teams-fe with MIT License

5 votes

{ Header } = Layout

Example #22

Source File: Base.js From Cowin-Notification-System with MIT License

5 votes

{ Content, Footer } = Layout

Example #23

Source File: adminChallengeCreate.js From ctf_platform with MIT License

5 votes

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

Example #24

Source File: App.js From QiskitFlow with Apache License 2.0

5 votes

{ Header, Content, Footer } = Layout

Example #25

Source File: MarkdownPage.js From dexwebapp with Apache License 2.0

5 votes

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

Example #26

Source File: index.jsx From react-antd-admin-template with MIT License

5 votes

{ Content } = Layout

Example #27

Source File: App.js From twitterSOS with GNU General Public License v3.0

5 votes

{ Header, Content, Footer } = Layout

Example #28

Source File: ProtectedRoutes.js From cra-template-redux-auth-starter with MIT License

5 votes

{ Content } = Layout

Example #29

Source File: home.js From portfolyo-mern with MIT License

5 votes

{ Header, Content, Footer } = Layout