generated from uiwjs/react-monorepo-template
-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4379792
commit 0f224c5
Showing
32 changed files
with
2,227 additions
and
141 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
{ | ||
"singleQuote": true, | ||
"trailingComma": "all", | ||
"printWidth": 120, | ||
"overrides": [ | ||
{ | ||
"files": ".prettierrc", | ||
"options": { "parser": "json" } | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
Layout 布局 | ||
=== | ||
|
||
协助进行页面级整体布局。 | ||
|
||
> ⚠️ 注意:采用 flex 布局实现,请注意[浏览器兼容性](http://caniuse.com/#search=flex)问题。 | ||
<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--> | ||
<!--rehype--> | ||
```jsx | ||
import { Layout } from 'uiw'; | ||
// or | ||
import Layout from '@uiw/react-layout'; | ||
const { Header, Footer, Sider, Content } = Layout; | ||
``` | ||
|
||
## 基本用法 | ||
|
||
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
```jsx | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import { Layout } from '@uiw/react-layout'; | ||
const { Header, Footer, Sider, Content } = Layout; | ||
|
||
const stylHeader = { color: '#fff' } | ||
const stylSider = { background: '#484a4e', color: '#fff', lineHeight: `120px`, textAlign: 'center' } | ||
const stylConten = { textAlign: 'center', background: 'rgba(16, 142, 233, 1)', minHeight: 120, lineHeight: '120px', color: '#fff' } | ||
|
||
function Demo() { | ||
const [collapsed, setCollapsed] = React.useState(false) | ||
return ( | ||
<div> | ||
<Layout style={{ marginBottom: 20 }}> | ||
<Sider collapsed={collapsed} style={stylSider}>Sider</Sider> | ||
<Layout> | ||
<Header style={stylHeader}> | ||
<button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '展开 Sider' : '缩进 Sider'}</button> | ||
</Header> | ||
<Content style={stylConten}>Content</Content> | ||
<Footer>Footer</Footer> | ||
</Layout> | ||
</Layout> | ||
|
||
<Layout style={{ marginBottom: 20 }}> | ||
<Header style={stylHeader}>Header</Header> | ||
<Content style={stylConten}>Content</Content> | ||
<Footer>Footer</Footer> | ||
</Layout> | ||
|
||
<Layout style={{ marginBottom: 20 }}> | ||
<Header style={stylHeader}>Header</Header> | ||
<Layout> | ||
<Sider style={stylSider}>Sider</Sider> | ||
<Content style={stylConten}>Content</Content> | ||
</Layout> | ||
<Footer>Footer</Footer> | ||
</Layout> | ||
|
||
<Layout style={{ marginBottom: 20 }}> | ||
<Header style={stylHeader}>Header</Header> | ||
<Layout> | ||
<Content style={stylConten}>Content</Content> | ||
<Sider style={stylSider}>Sider</Sider> | ||
</Layout> | ||
<Footer>Footer</Footer> | ||
</Layout> | ||
</div> | ||
); | ||
} | ||
|
||
ReactDOM.render(<Demo />, _mount_); | ||
``` | ||
|
||
|
||
## Layout | ||
|
||
布局容器,其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身,可以放在任何父容器中。 | ||
|
||
* `Header`:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在 `Layout` 中。 | ||
* `Sider`:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素,只能放在 `Layout` 中。 | ||
* `Content`:内容部分,自带默认样式,其下可嵌套任何元素,只能放在 `Layout` 中。 | ||
* `Footer`:底部布局,自带默认样式,其下可嵌套任何元素,只能放在 `Layout` 中。 | ||
|
||
| 参数 | 说明 | 类型 | 默认值 | | ||
|--------- |-------- |--------- |-------- | | ||
| className | 容器 className | string | - | | ||
| style | 指定样式 | CSSProperties | - | | ||
| theme | 主题颜色 | `light`、`dark` | `dark` | | ||
| hasSider | 表示子元素里有 Sider,一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - | | ||
|
||
## Layout.Sider | ||
|
||
| 参数 | 说明 | 类型 | 默认值 | | ||
|--------- |-------- |--------- |-------- | | ||
| className | 容器 className | string | - | | ||
| style | 指定样式 | CSSProperties | - | | ||
| collapsed | 当前收起状态 | boolean | - | | ||
| collapsedWidth | 收缩宽度,设置为 `0` | boolean | `80` | | ||
| width | 宽度 | number/string | 200 | | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,66 +1,100 @@ | ||
react-monorepo-template | ||
Layout | ||
=== | ||
|
||
Simple [React](https://github.com/facebook/react) package development project example template. | ||
|
||
## Directory Structure | ||
|
||
```bash | ||
├── LICENSE | ||
├── README.md -> core/README.md | ||
├── core # 📦 package @uiw/react-monorepo-template | ||
│ ├── README.md | ||
│ ├── cjs # 🔄 Compiled cjs directory | ||
│ ├── esm # 🔄 Compiled esm directory | ||
│ ├── src # Package source directory | ||
│ ├── dist.css # 🔄 compile less to css | ||
│ ├── package.json # name => @uiw/react-monorepo-template | ||
│ └── tsconfig.json | ||
├── lerna.json | ||
├── package.json | ||
├── tsconfig.json | ||
├── test # ⛑ test case | ||
└── website # 🐝 Package example test, website | ||
├── README.md | ||
├── package.json | ||
├── public | ||
├── src | ||
└── tsconfig.json | ||
``` | ||
|
||
## Development | ||
Handling the overall layout of a page. | ||
|
||
1. Install | ||
> ⚠️ Note: Implemented with flex layout, please pay attention to [browser compatibility](http://caniuse.com/#search=flex) issues. | ||
<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--> | ||
```bash | ||
npm install | ||
<!--rehype--> | ||
```jsx | ||
import { Layout } from 'uiw'; | ||
// or | ||
import Layout from '@uiw/react-layout'; | ||
const { Header, Footer, Sider, Content } = Layout; | ||
``` | ||
|
||
2. Dependencies in the installation package and example | ||
|
||
```bash | ||
npm run hoist | ||
## Basic Usage | ||
|
||
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true--> | ||
```jsx | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import { Layout } from '@uiw/react-layout'; | ||
const { Header, Footer, Sider, Content } = Layout; | ||
|
||
const stylHeader = { color: '#fff' } | ||
const stylSider = { background: '#484a4e', color: '#fff', lineHeight: `120px`, textAlign: 'center' } | ||
const stylConten = { textAlign: 'center', background: 'rgba(16, 142, 233, 1)', minHeight: 120, lineHeight: '120px', color: '#fff' } | ||
|
||
function Demo() { | ||
const [collapsed, setCollapsed] = React.useState(false) | ||
return ( | ||
<div> | ||
<Layout style={{ marginBottom: 20 }}> | ||
<Sider collapsed={collapsed} style={stylSider}>Sider</Sider> | ||
<Layout> | ||
<Header style={stylHeader}> | ||
<button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '>>' : '<<'}</button> | ||
</Header> | ||
<Content style={stylConten}>Content</Content> | ||
<Footer>Footer</Footer> | ||
</Layout> | ||
</Layout> | ||
|
||
<Layout style={{ marginBottom: 20 }}> | ||
<Header style={stylHeader}>Header</Header> | ||
<Content style={stylConten}>Content</Content> | ||
<Footer>Footer</Footer> | ||
</Layout> | ||
|
||
<Layout style={{ marginBottom: 20 }}> | ||
<Header style={stylHeader}>Header</Header> | ||
<Layout> | ||
<Sider style={stylSider}>Sider</Sider> | ||
<Content style={stylConten}>Content</Content> | ||
</Layout> | ||
<Footer>Footer</Footer> | ||
</Layout> | ||
|
||
<Layout> | ||
<Header style={stylHeader}>Header</Header> | ||
<Layout> | ||
<Content style={stylConten}>Content</Content> | ||
<Sider style={stylSider}>Sider</Sider> | ||
</Layout> | ||
<Footer>Footer</Footer> | ||
</Layout> | ||
</div> | ||
); | ||
} | ||
|
||
ReactDOM.render(<Demo />, _mount_); | ||
``` | ||
|
||
3. To develop, run the self-reloading build: | ||
|
||
```bash | ||
npm run build # Compile packages 📦 @uiw/react-monorepo-template | ||
npm run watch # Real-time compilation 📦 @uiw/react-monorepo-template | ||
``` | ||
## Layout | ||
|
||
4. Run Document Website Environment: | ||
布局容器,其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身,可以放在任何父容器中。 | ||
|
||
```bash | ||
npm run start | ||
``` | ||
* `Header`:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在 `Layout` 中。 | ||
* `Sider`:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素,只能放在 `Layout` 中。 | ||
* `Content`:内容部分,自带默认样式,其下可嵌套任何元素,只能放在 `Layout` 中。 | ||
* `Footer`:底部布局,自带默认样式,其下可嵌套任何元素,只能放在 `Layout` 中。 | ||
|
||
5. To contribute, please fork repos, add your patch and tests for it (in the `test/` folder) and submit a pull request. | ||
| 参数 | 说明 | 类型 | 默认值 | | ||
|--------- |-------- |--------- |-------- | | ||
| className | 容器 className | string | - | | ||
| style | 指定样式 | CSSProperties | - | | ||
| theme | 主题颜色 | `light`、`dark` | `dark` | | ||
| hasSider | 表示子元素里有 Sider,一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - | | ||
|
||
``` | ||
npm run test | ||
``` | ||
## Layout.Sider | ||
|
||
## License | ||
| 参数 | 说明 | 类型 | 默认值 | | ||
|--------- |-------- |--------- |-------- | | ||
| className | 容器 className | string | - | | ||
| style | 指定样式 | CSSProperties | - | | ||
| collapsed | 当前收起状态 | boolean | - | | ||
| collapsedWidth | 收缩宽度,设置为 `0` | boolean | `80` | | ||
| width | 宽度 | number/string | 200 | | ||
|
||
Licensed under the MIT License. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import React from 'react'; | ||
|
||
export interface ContentProps extends React.HTMLAttributes<HTMLElement> { | ||
prefixCls?: string; | ||
children?: React.ReactNode; | ||
} | ||
|
||
export default (props: ContentProps = {}) => { | ||
const { prefixCls = 'w-layout-content', className, children, ...other } = props; | ||
return ( | ||
<main className={[prefixCls, className].filter(Boolean).join(' ').trim()} {...other}> | ||
{children} | ||
</main> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import React from 'react'; | ||
|
||
export interface FooterProps extends React.HTMLAttributes<HTMLElement> { | ||
prefixCls?: string; | ||
children?: React.ReactNode; | ||
} | ||
|
||
export default (props: FooterProps = {}) => { | ||
const { prefixCls = 'w-layout-footer', className, children, ...other } = props; | ||
return ( | ||
<footer className={[prefixCls, className].filter(Boolean).join(' ').trim()} {...other}> | ||
{children} | ||
</footer> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import React from 'react'; | ||
|
||
export interface HeaderProps extends React.HTMLAttributes<HTMLElement> { | ||
prefixCls?: string; | ||
children?: React.ReactNode; | ||
} | ||
|
||
export default (props: HeaderProps = {}) => { | ||
const { prefixCls = 'w-layout-header', className, children, ...other } = props; | ||
return ( | ||
<header className={[prefixCls, className].filter(Boolean).join(' ').trim()} {...other}> | ||
{children} | ||
</header> | ||
); | ||
}; |
Oops, something went wrong.