Ant Design Layout

The layout part of ant-design

[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [][npm-url] [![NPM downloads][download-image]][download-url]

[![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![FOSSA Status][fossa-image]][fossa-url]

[![Follow Twitter][twitter-image]][twitter-url] [![Discussions][discussions-image]][discussions-url] [![Issues need help][help-wanted-image]][help-wanted-url]

English | Português | 简体中文

✨ Features

🌈 Its the layout components of ant-design library
📦 A set of high-quality React layout components out of the box.
🛡 Written in TypeScript with predictable static types.
⚙️ Whole package of design resources and development tools.
🌍 Small size.
🎨 Could be use with others UI components. No side effect.

🖥 Environment Support

Modern browsers and Internet Explorer 11 (with polyfills)
Server-side Rendering
Electron

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 Install

npm install ant-design-layout

yarn add ant-design-layout

🔨 Usage

import { Row, Col } from 'ant-design-layout';

const App = () => (
  <>
    <Row>
      <Col>Hello</Col>
    </Row>
  </>
);

And import style manually:

import 'ant-design-layout/dist/ant-design-layout.css'; // or 'ant-design-layout/dist/ant-design-layout.less'

TypeScript

ant-design-layout is written in TypeScript with complete definitions, check Use in TypeScript to getting started.

🔗 Links

⌨️ Development

Use Gitpod, a free online dev environment for GitHub.

Or clone locally:

$ git clone git@github.com:jacquesbonet/ant-design-layout.git
$ cd ant-design-layout
$ npm install
$ npm run test