CODEWITHSUNDEEP
reactjsantd
haar
haar

Reputation: 1

React Ant: how to create Left Right Layout

Trying to learn using antd framework, I want to create a Left-Right Layout smaller to what is shown

enter image description here

how can I do that? how can I keep the first column fixed (doesn't move ) !?

Upvotes: 0

Views: 1754

Answers (2)

Aldrin
Aldrin

Reputation: 2194

Use antd layout Component for creating layouts. Codessandbox link - https://codesandbox.io/s/antd-layout-itvu6


import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Layout } from 'antd';

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

ReactDOM.render(

    <Layout>
      <Header>Header</Header>
      <Layout>
        <Sider>Sider</Sider>
        <Content>Content</Content>
      </Layout>
      <Footer>Footer</Footer>
    </Layout>
,
  document.getElementById('container'),
);

You can refer docs here - https://ant.design/components/layout/

Upvotes: 1

evolon
evolon

Reputation: 1586

Use the the rows like this:

<Row type="flex">
  <Col>Left Column</Col>
  <Col style={{flex: 1}}>Right Column</Col>
</Row>

Upvotes: 1

Related Questions