antd#Layout TypeScript 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: BasicLayout.tsx From react_admin with MIT License

6 votes

BasicLayout: React.FC<Iprops> = (props) => {
  const [collapsed, setCollapsed] = useState(false);
  const onLogout = () => {
    confirm({
      title: "你确定要退出登录吗?",
      icon: <ExclamationCircleOutlined />,
      onOk() {
        localStorage.removeItem("userinfo");
        console.log(props.history.replace("/"));
      },
      onCancel() {},
    });
  };

  return (
    <Layout hasSider className="page-basic">
      <MenuDefault collapsed={collapsed} />
      <Layout className="site-layout">
        <Header
          onLogout={onLogout}
          setColl={(coll) => setCollapsed(coll)}
          collapsed={collapsed}
        />
        <Bread />
        <Content
          className="site-layout-background"
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
          }}
        >
          <Routers location={props.location} />
        </Content>
        <Footer />
      </Layout>
    </Layout>
  );
}

Example #2

Source File: BasicLayout.tsx From vite-react-ts with MIT License

6 votes

BasicLayout: React.FC<{ route: IRouteConfig }> = ({ route }) => {
  const history = createBrowserHistory();

  if (!localStorage.getItem('vite-react-ts-antd-token')) {
    history.push('/user/login');
  }

  return (
    <Layout>
      <MyMenu />
      <Layout>
        <MyHeader />
        <Content style={{ height: 'calc(100vh - 60px)' }}>
          {renderRoutes(route.routes)}
        </Content>
      </Layout>
    </Layout>
  );
}

Example #3

Source File: NomalLayout.tsx From Shopping-Cart with MIT License

6 votes

NomalLayout: FC<PropTypes> = ({ children }) => {
  const { Header, Footer, Content } = Layout;

  return (
    <Layout style={LayoutStyle}>
      <Header style={HeaderStyle}>
        <MainHeader />
      </Header>
      <Content style={ContentStyle}>{children}</Content>
      <Footer style={FooterStyle}>
        <MainFooter />
      </Footer>
    </Layout>
  );
}

Example #4

Source File: Navigation.tsx From posthog-foss with MIT License

6 votes

export function Navigation({ children }: { children: any }): JSX.Element {
    const { sceneConfig } = useValues(sceneLogic)

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <TopBar />
            <SideBar>
                <Layout.Content className={!sceneConfig?.plain ? 'main-app-content' : undefined}>
                    {!sceneConfig?.plain && (
                        <>
                            {!sceneConfig?.hideDemoWarnings && <DemoWarnings />}
                            <BillingAlerts />
                            <Breadcrumbs />
                        </>
                    )}
                    {children}
                </Layout.Content>
            </SideBar>
        </Layout>
    )
}

Example #5

Source File: index.tsx From RareCamp with Apache License 2.0

6 votes

OTLayout = styled(Layout)`
  font-family: roboto, sans-serif;

  .logo {
    margin-top: 4px;
    margin-left: 4px;
    margin-bottom: 15px;
    width: 150px;
    cursor: pointer;
  }

  .ant-menu-dark.ant-menu-dark:not(.ant-menu-horant-layout-headerizontal) {
    .ant-menu-item-selected {
      background-color: #6c5ea1;
    }
  }

  .ant-layout-header {
    background-color: white;
  }
  .sub-menu {
    padding-left: 40px !important;
  }
`

Example #6

Source File: PageContent.tsx From iot-center-v2 with MIT License

6 votes

PageContent: FunctionComponent<PageContentProps> = (props) => (
  <Layout.Content
    style={{
      paddingLeft: 60,
      paddingRight: 60,
      paddingTop: 55,
      margin: 0,
      minHeight: 280,
      minWidth: 350,
      height: '100vh',
      overflowY: props.forceShowScroll ? 'scroll' : 'auto',
    }}
  >
    <PageHeader
      title={props.title}
      style={{paddingLeft: 0, paddingRight: 0, paddingTop: 0}}
      extra={props?.titleExtra}
    />
    {props.message ? (
      <Alert
        message={props.message.title}
        description={props.message.description}
        type={props.message.type}
        showIcon
        closable
      />
    ) : undefined}
    <div className="site-layout-background" style={{minHeight: 360}}>
      <Spin spinning={props.spin ?? false}>{props.children}</Spin>
    </div>
  </Layout.Content>
)

Example #7

Source File: BasicLayout.tsx From dendron with GNU Affero General Public License v3.0

6 votes

export function BasicLayout(props: React.PropsWithChildren<any>) {
  return (
    <Layout>
      <br />
      <br />
      <Layout id="main-content-wrap" className="main-content-wrap">
        <Row gutter={16}>
          <Col className="gutter-row" span={2}/>
          <Col className="gutter-row" span={20}>
            <Layout.Content
              id="main-content"
              className="main-content"
              role="main"
            >
              {props.children}
            </Layout.Content>
          </Col>
          <Col className="gutter-row" span={2}/>
        </Row>
      </Layout>
    </Layout>
  );
}

Example #8

Source File: index.tsx From leek with Apache License 2.0

6 votes

export function AppLayout({ children }: any) {
  return (
    <Layout>
      <Header />
      <Content
        style={{
          padding: "0 50px",
          marginTop: 64,
        }}
      >
        {children}
        <Affix style={{ position: "fixed", bottom: 13, right: 50 }}>
          <Row>
            <Space>
              <Text code>Leek v{env.LEEK_VERSION}</Text>
              <span>-</span>
              <a
                href="https://tryleek.com"
                target="_blank"
                rel="noopener noreferrer"
              >
                Docs
              </a>
            </Space>
          </Row>
        </Affix>
      </Content>
    </Layout>
  );
}

Example #9

Source File: index.tsx From visual-layout with MIT License

6 votes

function App() {
  return (
    <PagesProvider>
      <Layout style={{ height: 'calc(100vh - 40px)' }}>
        <Layout>
          <Sider />
          <Content />
          <Drawer />
        </Layout>
      </Layout>
      <Header></Header>
    </PagesProvider>
  );
}

Example #10

Source File: index.tsx From metaplex with Apache License 2.0

6 votes

AppLayout = React.memo(function AppLayoutImpl(props: any) {
  return (
    <>
      <Layout id={'main-layout'}>
        <span id={'main-bg'}></span>
        <span id={'bg-gradient'}></span>
        <span id={'static-header-gradient'}></span>
        <span id={'static-end-gradient'}></span>
        <Header className="App-Bar">
          <AppBar />
        </Header>
        <Layout id={'width-layout'}>
          <Content
            style={{
              overflow: 'scroll',
              padding: '30px 48px ',
            }}
          >
            {props.children}
          </Content>
        </Layout>
        {/*<Footer />*/}
      </Layout>
    </>
  );
})

Example #11

Source File: layout.tsx From ui with GNU Affero General Public License v3.0

6 votes

AuthLayout: React.FC<Props> = (props) => {
  return (
    <Spin spinning={props.loading || false}>
      <Layout
        style={{
          height: '100vh',
          background: publicRuntimeConfig.mainBackground,
        }}
      >
        {props.children}
      </Layout>
    </Spin>
  )
}

Example #12

Source File: BaseLayout.tsx From condo with MIT License

6 votes

BaseLayout: React.FC<IBaseLayoutProps> = (props) => {
    const {
        style,
        children,
        className,
        menuData,
        headerAction,
        onLogoClick = () => Router.push('/'),
        TopMenuItems,
    } = props

    return (
        <Layout className={className} style={style} css={LAYOUT_CSS}>
            <SideNav menuData={menuData} onLogoClick={onLogoClick}/>
            <Layout css={SUB_LAYOUT_CSS}>
                <Header headerAction={headerAction} TopMenuItems={TopMenuItems} />
                {children}
            </Layout>
        </Layout>
    )
}

Example #13

Source File: index.tsx From surveyo with Apache License 2.0

6 votes

function Graphiql() {
  const GRAPHQL_ENDPOINT = process.env.REACT_APP_GRAPHQL_ENDPOINT;
  const {id} = useParams();
  const {getIdTokenClaims} = useAuth0();
  const graphQLFetcher = async (graphQLParams: any) => {
    const token = await getIdTokenClaims();
    return await fetch(GRAPHQL_ENDPOINT!, {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
        'X-Auth-Token': token.__raw,
      },
      body: JSON.stringify(graphQLParams),
    }).then(response => response.json());
  };

  return (
    <PageHeader ghost title="Query">
      <Layout style={{height: '80vh'}}>
        <Row style={{height: '100%'}}>
          <GraphiQL fetcher={graphQLFetcher} query={makeDefaultQuery(id)} />
        </Row>
      </Layout>
    </PageHeader>
  );
}

Example #14

Source File: home.tsx From config-generator with MIT License

6 votes

public renderLayout() {
    if (this.isReadyToRender()) {
      return <RenderLayout></RenderLayout>;
    } else {
      return (
        <Layout>
          <Skeleton active />
        </Layout>
      );
    }
  }

Example #15

Source File: index.tsx From datart with Apache License 2.0

6 votes

FreeEditor: React.FC = () => {
  const dispatch = useDispatch();
  const clearSelectedWidgets = e => {
    e.stopPropagation();
    dispatch(editWidgetInfoActions.clearSelectedWidgets());
    dispatch(editDashBoardInfoActions.changeShowBlockMask(true));
  };

  return (
    <Layout onClick={clearSelectedWidgets}>
      <Wrapper>
        <BoardToolBar />
        <Editor>
          <LayerList />
          <FreeBoardEditor />
          <SlideSetting />
        </Editor>
      </Wrapper>
    </Layout>
  );
}

Example #16

Source File: Header.tsx From wildduck-ui with MIT License

6 votes

Header = () => {
	const { setAccessToken } = useActions(appLogic);
	const logout = () => {
		sessionStorage.removeItem(accessTokenString);
		sessionStorage.removeItem(apiString);
		setAccessToken('');
	};

	/** Header Renderer */
	return (
		<Layout.Header className='header'>
			<WildDuckIcon />
			<Tooltip title='Logout'>
				<Button shape='circle' onClick={logout} icon={<LogoutOutlined />}></Button>
			</Tooltip>
		</Layout.Header>
	);
}

Example #17

Source File: index.tsx From nebula-studio with Apache License 2.0

6 votes

MainPage = () => {
  return <Layout className="nebulaStudioLayout">
    <Header menus={MENU_LIST} />
    <Switch>
      {RoutesList.map(route => <Route path={route.path} render={() => <>
        <Suspense fallback={<Spin />}>
          <Content>
            <Route component={route.component} />
          </Content>
        </Suspense>
      </>} key={route.path} exact={route.exact} />)}
      <Redirect from="/" to="/console" />
    </Switch>
  </Layout>;
}

Example #18

Source File: Header.tsx From react_admin with MIT License

5 votes

{ Header } = Layout

Example #19

Source File: index.tsx From shippo with MIT License

5 votes

{ Header, Footer, Sider, Content } = Layout

Example #20

Source File: App.tsx From generator-earth with MIT License

5 votes

render() {
        let totalPath: string = this.props.location.pathname;
        let prefixArr: RegExpMatchArray = totalPath.match(/^\/[^/]*/) || [];

        return (
            <Spin spinning={false} style={{ maxHeight: window.innerHeight }}>
                <Layout style={{ minHeight: '100vh' }}>

                    <Sider collapsible>
                        <div className="logo">金融</div>
                        <Menu theme="dark"
                              defaultSelectedKeys={[ '/' ]}
                              defaultOpenKeys={[ '/Asset', '/Funder' ]}
                              mode="inline"
                              selectedKeys={[ prefixArr[0] ]}
                        >
                            <Menu.Item key={'/'}>
                                <Icon type="book"/>
                                <span>首页</span>
                                <Link to="/"></Link>
                            </Menu.Item>

                            <SubMenu key="/page" title={<span><Icon type="book"/>测试</span>}>
                                <Item key="/Details">
                                    <span>详情信息</span>
                                    <Link to="/Details"></Link>
                                </Item>
                            </SubMenu>
                        </Menu>
                    </Sider>

                    <Layout>
                        <Header style={{ background: '#fff', textAlign: 'center' }}>
                            <h1>金融</h1>
                        </Header>
                        <Content style={{ margin: '0 16px' }}>
                            <Switch>
                                {/* 首页 */}
                                <Route exact path="/" component={Home}/>

                                {/* 对账管理 */}
                                <Route path="/Details" component={Details}/>

                            </Switch>
                        </Content>
                    </Layout>

                </Layout>
            </Spin>
        )
    }

Example #21

Source File: App.tsx From jmix-frontend with Apache License 2.0

5 votes

App = observer(() => {
  const mainStore = useMainStore();
  const { initialized, locale, loginRequired } = mainStore;

  useDefaultTabHotkeys();

  if (!initialized || !locale) {
    return <CenteredLoader />;
  }

  if (loginRequired) {
    return (
      <Centered>
        <Login />
      </Centered>
    );
  }

  return (
    <Layout className={styles.mainLayout}>
      <Layout.Header>
        <AppHeader />
      </Layout.Header>
      <Layout className={styles.layoutContainer}>
        <Layout.Sider
          width={200}
          breakpoint="sm"
          collapsedWidth={0}
          className={styles.layoutSider}
        >
          <AppMenu />
        </Layout.Sider>

        <Layout className={styles.layoutContent}>
          <Layout.Content>
            <Router global routes={routes} />
          </Layout.Content>
        </Layout>
      </Layout>
    </Layout>
  );
})

Example #22

Source File: Header.tsx From vite-react-ts with MIT License

5 votes

{ Header } = Layout

Example #23

Source File: App.tsx From ppeforfree with GNU General Public License v3.0

5 votes

function App() {
  return (
    <Layout>
      <Router>
        <TopAppBar>
          <TopAppBarRow>
            <TopAppBarSection>
              <TopAppBarTitle>
                <Link to="/" className="root">
                  #ppeforfree
                </Link>
              </TopAppBarTitle>
            </TopAppBarSection>
            <TopAppBarSection alignEnd>
              <nav>
                <Link to="/">about</Link>
                <Link to="/contributors">contributors</Link>
                <a
                  href="https://discord.gg/pWF2zBf"
                  target="_blank"
                  rel="noreferrer noopener"
                >
                  join us
                </a>
                <a
                  href="http://github.com/PPEForFree"
                  target="_blank"
                  rel="noreferrer noopener"
                  className="icon icon-github"
                >
                  <img src="/github-icon.png" alt="github" />
                </a>
              </nav>
            </TopAppBarSection>
          </TopAppBarRow>
        </TopAppBar>
        <TopAppBarFixedAdjust />

        <Alert
          message="Join us!"
          description={
            <div>
              We're building a distributed team and are looking for volunteers. If you are
              interested in leveraging your skills and experience to make a significant
              contribution to a worthwhile cause during the ongoing epidemic then please
              register your interest by joining us on{" "}
              <a
                href="https://discord.gg/pWF2zBf"
                target="_blank"
                rel="noreferrer noopener"
              >
                Discord
              </a>
              .
            </div>
          }
          type="info"
          showIcon
          closable
        />

        <Content>
          <Switch>
            <Route path="/ideas" component={Ideas} />
            <Route path="/initiatives/submit" component={InitiativeSubmission} />
            <Route path="/directory" component={InitiativeDirectory} />
            <Route path="/contributors" component={Contributors} />
            <Route path="/" component={About} />
          </Switch>
        </Content>
      </Router>
    </Layout>
  );
}

Example #24

Source File: index.tsx From RareCamp with Apache License 2.0

5 votes

{ Sider, Content, Header } = Layout

Example #25

Source File: index.tsx From dnde with GNU General Public License v3.0

5 votes

{ Content } = Layout

Example #26

Source File: index.tsx From S2 with MIT License

5 votes

{ Sider, Content } = Layout

Example #27

Source File: App.tsx From iot-center-v2 with MIT License

5 votes

{Sider} = Layout

Example #28

Source File: DendronApp.tsx From dendron with GNU Affero General Public License v3.0

5 votes

{ Content } = Layout

Example #29

Source File: Layout.tsx From yugong with MIT License

5 votes

{ Header, Sider, Content } = Layout