Skip to content

Commit 0f224c5

Browse files
jaywcjlovejaywcjlove
committed
init project.
1 parent 4379792 commit 0f224c5

32 files changed

+2227
-141
lines changed

‎.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "all",
4+
"printWidth": 120,
5+
"overrides": [
6+
{
7+
"files": ".prettierrc",
8+
"options": { "parser": "json" }
9+
}
10+
]
11+
}

‎core/README-zh.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
Layout 布局
2+
===
3+
4+
协助进行页面级整体布局。
5+
6+
> ⚠️ 注意：采用 flex 布局实现，请注意[浏览器兼容性](http://caniuse.com/#search=flex)问题。
7+
<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
8+
9+
<!--rehype-->
10+
```jsx
11+
import { Layout } from 'uiw';
12+
// or
13+
import Layout from '@uiw/react-layout';
14+
const { Header, Footer, Sider, Content } = Layout;
15+
```
16+
17+
## 基本用法
18+
19+
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
20+
```jsx
21+
import React from 'react';
22+
import ReactDOM from 'react-dom';
23+
import { Layout } from '@uiw/react-layout';
24+
const { Header, Footer, Sider, Content } = Layout;
25+
26+
const stylHeader = { color: '#fff' }
27+
const stylSider = { background: '#484a4e', color: '#fff', lineHeight: `120px`, textAlign: 'center' }
28+
const stylConten = { textAlign: 'center', background: 'rgba(16, 142, 233, 1)', minHeight: 120, lineHeight: '120px', color: '#fff' }
29+
30+
function Demo() {
31+
const [collapsed, setCollapsed] = React.useState(false)
32+
return (
33+
<div>
34+
<Layout style={{ marginBottom: 20 }}>
35+
<Sider collapsed={collapsed} style={stylSider}>Sider</Sider>
36+
<Layout>
37+
<Header style={stylHeader}>
38+
<button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '展开 Sider' : '缩进 Sider'}</button>
39+
</Header>
40+
<Content style={stylConten}>Content</Content>
41+
<Footer>Footer</Footer>
42+
</Layout>
43+
</Layout>
44+
45+
<Layout style={{ marginBottom: 20 }}>
46+
<Header style={stylHeader}>Header</Header>
47+
<Content style={stylConten}>Content</Content>
48+
<Footer>Footer</Footer>
49+
</Layout>
50+
51+
<Layout style={{ marginBottom: 20 }}>
52+
<Header style={stylHeader}>Header</Header>
53+
<Layout>
54+
<Sider style={stylSider}>Sider</Sider>
55+
<Content style={stylConten}>Content</Content>
56+
</Layout>
57+
<Footer>Footer</Footer>
58+
</Layout>
59+
60+
<Layout style={{ marginBottom: 20 }}>
61+
<Header style={stylHeader}>Header</Header>
62+
<Layout>
63+
<Content style={stylConten}>Content</Content>
64+
<Sider style={stylSider}>Sider</Sider>
65+
</Layout>
66+
<Footer>Footer</Footer>
67+
</Layout>
68+
</div>
69+
);
70+
}
71+
72+
ReactDOM.render(<Demo />, _mount_);
73+
```
74+
75+
76+
## Layout
77+
78+
布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身，可以放在任何父容器中。
79+
80+
* `Header`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
81+
* `Sider`：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 `Layout` 中。
82+
* `Content`：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
83+
* `Footer`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
84+
85+
| 参数 | 说明 | 类型 | 默认值 |
86+
|--------- |-------- |--------- |-------- |
87+
| className | 容器 className | string | - |
88+
| style | 指定样式 | CSSProperties | - |
89+
| theme | 主题颜色 | `light`、`dark` | `dark` |
90+
| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
91+
92+
## Layout.Sider
93+
94+
| 参数 | 说明 | 类型 | 默认值 |
95+
|--------- |-------- |--------- |-------- |
96+
| className | 容器 className | string | - |
97+
| style | 指定样式 | CSSProperties | - |
98+
| collapsed | 当前收起状态 | boolean | - |
99+
| collapsedWidth | 收缩宽度，设置为 `0` | boolean | `80` |
100+
| width | 宽度 | number/string | 200 |
101+

‎core/README.md‎

Lines changed: 86 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,100 @@
1-
react-monorepo-template
1+
Layout
22
===
33

4-
Simple [React](https://github.com/facebook/react) package development project example template.
5-
6-
## Directory Structure
7-
8-
```bash
9-
├── LICENSE
10-
├── README.md -> core/README.md
11-
├── core # 📦 package @uiw/react-monorepo-template
12-
│ ├── README.md
13-
│ ├── cjs # 🔄 Compiled cjs directory
14-
│ ├── esm # 🔄 Compiled esm directory
15-
│ ├── src # Package source directory
16-
│ ├── dist.css # 🔄 compile less to css
17-
│ ├── package.json # name => @uiw/react-monorepo-template
18-
│ └── tsconfig.json
19-
├── lerna.json
20-
├── package.json
21-
├── tsconfig.json
22-
├── test # ⛑ test case
23-
└── website # 🐝 Package example test, website
24-
├── README.md
25-
├── package.json
26-
├── public
27-
├── src
28-
└── tsconfig.json
29-
```
30-
31-
## Development
4+
Handling the overall layout of a page.
325

33-
1. Install
6+
> ⚠️ Note: Implemented with flex layout, please pay attention to [browser compatibility](http://caniuse.com/#search=flex) issues.
7+
<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
348
35-
```bash
36-
npm install
9+
<!--rehype-->
10+
```jsx
11+
import { Layout } from 'uiw';
12+
// or
13+
import Layout from '@uiw/react-layout';
14+
const { Header, Footer, Sider, Content } = Layout;
3715
```
3816

39-
2. Dependencies in the installation package and example
40-
41-
```bash
42-
npm run hoist
17+
## Basic Usage
18+
19+
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->
20+
```jsx
21+
import React from 'react';
22+
import ReactDOM from 'react-dom';
23+
import { Layout } from '@uiw/react-layout';
24+
const { Header, Footer, Sider, Content } = Layout;
25+
26+
const stylHeader = { color: '#fff' }
27+
const stylSider = { background: '#484a4e', color: '#fff', lineHeight: `120px`, textAlign: 'center' }
28+
const stylConten = { textAlign: 'center', background: 'rgba(16, 142, 233, 1)', minHeight: 120, lineHeight: '120px', color: '#fff' }
29+
30+
function Demo() {
31+
const [collapsed, setCollapsed] = React.useState(false)
32+
return (
33+
<div>
34+
<Layout style={{ marginBottom: 20 }}>
35+
<Sider collapsed={collapsed} style={stylSider}>Sider</Sider>
36+
<Layout>
37+
<Header style={stylHeader}>
38+
<button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '>>' : '<<'}</button>
39+
</Header>
40+
<Content style={stylConten}>Content</Content>
41+
<Footer>Footer</Footer>
42+
</Layout>
43+
</Layout>
44+
45+
<Layout style={{ marginBottom: 20 }}>
46+
<Header style={stylHeader}>Header</Header>
47+
<Content style={stylConten}>Content</Content>
48+
<Footer>Footer</Footer>
49+
</Layout>
50+
51+
<Layout style={{ marginBottom: 20 }}>
52+
<Header style={stylHeader}>Header</Header>
53+
<Layout>
54+
<Sider style={stylSider}>Sider</Sider>
55+
<Content style={stylConten}>Content</Content>
56+
</Layout>
57+
<Footer>Footer</Footer>
58+
</Layout>
59+
60+
<Layout>
61+
<Header style={stylHeader}>Header</Header>
62+
<Layout>
63+
<Content style={stylConten}>Content</Content>
64+
<Sider style={stylSider}>Sider</Sider>
65+
</Layout>
66+
<Footer>Footer</Footer>
67+
</Layout>
68+
</div>
69+
);
70+
}
71+
72+
ReactDOM.render(<Demo />, _mount_);
4373
```
4474

45-
3. To develop, run the self-reloading build:
46-
47-
```bash
48-
npm run build # Compile packages 📦 @uiw/react-monorepo-template
49-
npm run watch # Real-time compilation 📦 @uiw/react-monorepo-template
50-
```
75+
## Layout
5176

52-
4. Run Document Website Environment:
77+
布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身，可以放在任何父容器中。
5378

54-
```bash
55-
npm run start
56-
```
79+
* `Header`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
80+
* `Sider`：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 `Layout` 中。
81+
* `Content`：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
82+
* `Footer`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
5783

58-
5. To contribute, please fork repos, add your patch and tests for it (in the `test/` folder) and submit a pull request.
84+
| 参数 | 说明 | 类型 | 默认值 |
85+
|--------- |-------- |--------- |-------- |
86+
| className | 容器 className | string | - |
87+
| style | 指定样式 | CSSProperties | - |
88+
| theme | 主题颜色 | `light`、`dark` | `dark` |
89+
| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
5990

60-
```
61-
npm run test
62-
```
91+
## Layout.Sider
6392

64-
## License
93+
| 参数 | 说明 | 类型 | 默认值 |
94+
|--------- |-------- |--------- |-------- |
95+
| className | 容器 className | string | - |
96+
| style | 指定样式 | CSSProperties | - |
97+
| collapsed | 当前收起状态 | boolean | - |
98+
| collapsedWidth | 收缩宽度，设置为 `0` | boolean | `80` |
99+
| width | 宽度 | number/string | 200 |
65100

66-
Licensed under the MIT License.

‎core/package.json‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
2-
"name": "@uiw/react-monorepo-template",
3-
"version": "1.0.0",
4-
"description": "React Monorepo Template.",
2+
"name": "@uiw/react-layout",
3+
"version": "4.9.9",
4+
"description": "React layout component.",
55
"author": "Kenny Wong <[email protected]>",
6-
"homepage": "https://uiwjs.github.io/react-monorepo-template",
6+
"homepage": "https://uiwjs.github.io/react-layout",
77
"repository": {
88
"type": "git",
9-
"url": "https://github.com/uiwjs/react-monorepo-template.git"
9+
"url": "https://github.com/uiwjs/react-layout.git"
1010
},
1111
"license": "MIT",
1212
"main": "./cjs/index.js",
@@ -21,22 +21,23 @@
2121
"access": "public"
2222
},
2323
"keywords": [
24-
"react-monorepo-template",
25-
"react.js",
26-
"react",
27-
"template",
28-
"monorepo",
29-
"monorepo-template",
24+
"layout",
25+
"react-layout",
26+
"design",
3027
"uiw",
3128
"uiw-react",
29+
"react.js",
30+
"react",
3231
"react-component",
3332
"component",
3433
"components",
3534
"ui",
3635
"css",
3736
"uikit",
3837
"react-ui",
39-
"framework"
38+
"framework",
39+
"front-end",
40+
"frontend"
4041
],
4142
"peerDependencies": {
4243
"react": ">=16.9.0",

‎core/src/Content.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
3+
export interface ContentProps extends React.HTMLAttributes<HTMLElement> {
4+
prefixCls?: string;
5+
children?: React.ReactNode;
6+
}
7+
8+
export default (props: ContentProps = {}) => {
9+
const { prefixCls = 'w-layout-content', className, children, ...other } = props;
10+
return (
11+
<main className={[prefixCls, className].filter(Boolean).join(' ').trim()} {...other}>
12+
{children}
13+
</main>
14+
);
15+
};

‎core/src/Footer.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
3+
export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
4+
prefixCls?: string;
5+
children?: React.ReactNode;
6+
}
7+
8+
export default (props: FooterProps = {}) => {
9+
const { prefixCls = 'w-layout-footer', className, children, ...other } = props;
10+
return (
11+
<footer className={[prefixCls, className].filter(Boolean).join(' ').trim()} {...other}>
12+
{children}
13+
</footer>
14+
);
15+
};

‎core/src/Header.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
3+
export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
4+
prefixCls?: string;
5+
children?: React.ReactNode;
6+
}
7+
8+
export default (props: HeaderProps = {}) => {
9+
const { prefixCls = 'w-layout-header', className, children, ...other } = props;
10+
return (
11+
<header className={[prefixCls, className].filter(Boolean).join(' ').trim()} {...other}>
12+
{children}
13+
</header>
14+
);
15+
};

0 commit comments

Comments
 (0)