https://github.com/react-widget/layout

https://react-widget.github.io/layout/
https://github.com/react-widget/layout

layout react-widget

Last synced: 7 months ago
JSON representation

https://react-widget.github.io/layout/

• Host: GitHub
• URL: https://github.com/react-widget/layout
• Owner: react-widget
• License: mit
• Created: 2018-12-02T11:56:03.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:38:18.000Z (about 3 years ago)
• Last Synced: 2025-06-25T12:55:53.058Z (7 months ago)
• Topics: layout, react-widget
• Language: TypeScript
• Homepage:
• Size: 5.31 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-widget-layout

## 安装

```

npm install --save react-widget-layout

```

## 使用

[![Edit react-widget-layout](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/elegant-sutherland-3lthx?fontsize=14&hidenavigation=1&theme=dark)

```js

import {Layout, Header, Content, Footer} from 'react-widget-layout';

import 'react-widget-layout/style'

export default () => {

    return (

        

			Header

			Content

			Footer

		

    );

}

```

## Interface

```ts

interface LayoutProps extends React.HTMLAttributes {

    /** 默认为：rw-layout */

    prefixCls?: string;

}

```

## 基本样式

```css

.rw-layout {

	display: flex;

	flex-direction: column;

	flex: auto;

}

.rw-layout-has-sider {

	flex-direction: row;

}

.rw-layout-sider,

.rw-layout-header,

.rw-layout-footer {

	flex: 0 0 auto;

}

.rw-layout-content {

	flex: auto;

}

```