Skip to content

Commit

Permalink
website: upgrade markdown preview example.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaywcjlove
jaywcjlove committed Oct 10, 2022
1 parent 19421f3 commit 15df512
Show file tree
Hide file tree
Showing 144 changed files with 4,621 additions and 5,703 deletions.
18 changes: 9 additions & 9 deletions package.json
View file
Expand Up @@ -4,12 +4,12 @@
"homepage": "https://uiwjs.github.io",
"private": true,
"scripts": {
"lib": "lerna exec --scope @uiw/react-form -- tsbb build --target react",
"lib:css": "lerna exec --scope @uiw/react-form -- compile-less -d src -o esm",
"lib:css:dist": "lerna exec --scope @uiw/react-form -- compile-less -d src -o lib --combine=dist.css",
"lib:css:watch": "lerna exec --scope @uiw/react-form -- compile-less -d src -o esm --watch",
"lib:watch": "lerna exec --scope @uiw/react-form -- tsbb watch & npm run lib:css:watch",
"lib:bootstrap": "lerna bootstrap --hoist --scope @uiw/react-form",
"lib": "lerna exec --scope @uiw/react-descriptions -- tsbb build --target react",
"lib:css": "lerna exec --scope @uiw/react-descriptions -- compile-less -d src -o esm",
"lib:css:dist": "lerna exec --scope @uiw/react-descriptions -- compile-less -d src -o lib --combine=dist.css",
"lib:css:watch": "lerna exec --scope @uiw/react-descriptions -- compile-less -d src -o esm --watch",
"lib:watch": "lerna exec --scope @uiw/react-descriptions -- tsbb watch & npm run lib:css:watch",
"lib:bootstrap": "lerna bootstrap --hoist --scope @uiw/react-descriptions",
"lib:build": "npm run lib && npm run lib:css && npm run lib:css:dist",
"//>>>>>>>>>>>>": "<<<<<<<<<<",
"watch:other:lib": "lerna exec --parallel --scope @uiw/* --ignore @uiw/doc -- tsbb watch",
Expand Down Expand Up @@ -63,15 +63,15 @@
"node": ">=16.0.0"
},
"devDependencies": {
"@kkt/less-modules": "~7.1.1",
"@kkt/ncc": "~1.0.8",
"@kkt/less-modules": "~7.2.1",
"@kkt/ncc": "~1.0.15",
"@types/react": "~18.0.0",
"@types/react-dom": "~18.0.0",
"@types/react-test-renderer": "~18.0.0",
"@types/react-transition-group": "~4.4.4",
"compile-less-cli": "~1.8.11",
"husky": "~7.0.4",
"kkt": "~7.1.5",
"kkt": "~7.2.1",
"lerna": "~4.0.0",
"lint-staged": "~12.3.4",
"prettier": "~2.6.0",
Expand Down
40 changes: 20 additions & 20 deletions packages/react-affix/README.md
View file
Expand Up @@ -15,36 +15,36 @@ import Affix from '@uiw/react-affix';

### 基本用法

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Affix, Button } from 'uiw';

ReactDOM.render(
<Affix offsetTop={60}>
<Button type="primary">1 当按钮距离顶部距离为 0，按钮被钉在顶部</Button>
</Affix>,
_mount_
);
export default function Demo() {
return (
<Affix offsetTop={60}>
<Button type="primary">1 当按钮距离顶部距离为 0，按钮被钉在顶部</Button>
</Affix>
)
}
```

### 钉在底部

这个实例需要你缩小窗口高度，就可以测试看效果啦。

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Affix, Button } from 'uiw';

ReactDOM.render(
<Affix offsetBottom={10} onChange={(affixed) => {
console.log('affixed::', affixed);
}}>
<Button type="primary" style={{ marginLeft: 20 }}>2 当按钮距离底部距离为 0，按钮被钉在底部</Button>
</Affix>,
_mount_
);
export default function Demo() {
return (
<Affix offsetBottom={10} onChange={(affixed) => {
console.log('affixed::', affixed);
}}>
<Button type="primary" style={{ marginLeft: 20 }}>2 当按钮距离底部距离为 0，按钮被钉在底部</Button>
</Affix>
)
}
```

### Props
Expand Down
36 changes: 12 additions & 24 deletions packages/react-alert/README.md
View file
Expand Up @@ -15,10 +15,8 @@ import Alert from '@uiw/react-alert';

## 基本用法

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
```jsx mdx:preview
import React from 'react';
import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
Expand Down Expand Up @@ -63,17 +61,15 @@ class Demo extends React.Component {
)
}
}
ReactDOM.render(<Demo />, _mount_);
export default Demo
```

## 延迟关闭对话框

这里是利用 `Promise` 等它执行完成再去关闭窗口

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
```jsx mdx:preview
import React from 'react';
import ReactDOM from 'react-dom';
import { Alert, Button } from 'uiw';

class Demo extends React.Component {
Expand Down Expand Up @@ -118,17 +114,15 @@ class Demo extends React.Component {
)
}
}
ReactDOM.render(<Demo />, _mount_);
export default Demo
```

## 带图标的弹出框

通过设置 `icon` 和 `type` 参数设置带状态的弹出对话框。

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
```jsx mdx:preview
import React from 'react';
import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
Expand Down Expand Up @@ -213,16 +207,14 @@ class Demo extends React.Component {
)
}
}
ReactDOM.render(<Demo />, _mount_);
export default Demo
```


## 带标题的弹出框

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
```jsx mdx:preview
import React from 'react';
import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
Expand Down Expand Up @@ -312,17 +304,15 @@ class Demo extends React.Component {
)
}
}
ReactDOM.render(<Demo />, _mount_);
export default Demo
```

### 自定义按钮

这个对话框有两个按钮，单击 **`确定按钮`** 或 **`取消按钮`** 后，此对话框将关闭，将不触发 ~~`onConfirm`~~ 或 ~~`onCancel`~~ 事件。因为这俩按钮是自定义按钮。你可以正对自定义按钮外面的对象定义 `className="w-alert-footer"` 将显示默认样式。

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
```jsx mdx:preview
import React from 'react';
import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
Expand Down Expand Up @@ -364,15 +354,13 @@ class Demo extends React.Component {
)
}
}
ReactDOM.render(<Demo />, _mount_);
export default Demo
```

### 不显示遮罩层

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
```jsx mdx:preview
import React from 'react';
import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
Expand Down Expand Up @@ -409,7 +397,7 @@ class Demo extends React.Component {
)
}
}
ReactDOM.render(<Demo />, _mount_);
export default Demo
```

## Props
Expand Down
24 changes: 12 additions & 12 deletions packages/react-auto-link/README.md
View file
Expand Up @@ -15,20 +15,20 @@ import AutoLink from '@uiw/react-auto-link';

### 基础用法

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { AutoLink } from 'uiw';

ReactDOM.render(
<div>
<AutoLink
text="uiw uiwjs uiw https://github.com/uiwjs uiwjs http://github.com/uiwjs"
target="__blank"
/>
</div>,
_mount_
);
export default function Demo() {
return (
<div>
<AutoLink
text="uiw uiwjs uiw https://github.com/uiwjs uiwjs http://github.com/uiwjs"
target="__blank"
/>
</div>
)
}
```

## API
Expand Down
97 changes: 48 additions & 49 deletions packages/react-avatar/README.md
View file
Expand Up @@ -17,58 +17,57 @@ import Avatar from '@uiw/react-avatar';

头像有四种尺寸，两种形状可选。

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Avatar, Icon } from 'uiw';

ReactDOM.render(
<div>
<div style={{ paddingBottom: 20 }}>
<Avatar size="large" icon={<Icon type="user"/>} />
<Avatar icon="user" />
<Avatar size="small" icon="user" />
<Avatar size="mini" icon={<Icon type="user"/>} />
</div>
export default function Demo() {
return (
<div>
<Avatar shape="square" size="large" icon="user" />
<Avatar shape="square" icon="user" />
<Avatar shape="square" size="small" icon="user" />
<Avatar shape="square" size="mini" icon="user" />
<div style={{ paddingBottom: 20 }}>
<Avatar size="large" icon={<Icon type="user"/>} />
<Avatar icon="user" />
<Avatar size="small" icon="user" />
<Avatar size="mini" icon={<Icon type="user"/>} />
</div>
<div>
<Avatar shape="square" size="large" icon="user" />
<Avatar shape="square" icon="user" />
<Avatar shape="square" size="small" icon="user" />
<Avatar shape="square" size="mini" icon="user" />
</div>
</div>
</div>,
_mount_
);
)
}
```

## 其它类型

支持三种类型：Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Avatar, Icon } from 'uiw';

ReactDOM.render(
<div>
<Avatar icon={<Icon type="user"/>} />
<Avatar>U</Avatar>
<Avatar src="https://avatars2.githubusercontent.com/u/1680273?s=40&v=4" />
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
<Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
</div>,
_mount_
);
export default function Demo() {
return (
<div>
<Avatar icon={<Icon type="user"/>} />
<Avatar>U</Avatar>
<Avatar src="https://avatars2.githubusercontent.com/u/1680273?s=40&v=4" />
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
<Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
</div>
)
}
```

## 图片支持

在组件上使用`onError`事件，处理显示错误的图片。

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Avatar, Icon } from 'uiw';

const App = () => {
Expand Down Expand Up @@ -96,27 +95,27 @@ const App = () => {
)
}

ReactDOM.render(<App />, _mount_);
export default App;
```

## 带徽标的头像

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Avatar, Badge } from 'uiw';

ReactDOM.render(
<div>
<span style={{ marginRight: 24 }}>
<Badge count={1}><Avatar shape="square" icon="user" /></Badge>
</span>
<span>
<Badge dot><Avatar shape="square" icon="user" /></Badge>
</span>
</div>,
_mount_
);
export default function Demo() {
return (
<div>
<span style={{ marginRight: 24 }}>
<Badge count={1}><Avatar shape="square" icon="user" /></Badge>
</span>
<span>
<Badge dot><Avatar shape="square" icon="user" /></Badge>
</span>
</div>
)
}
```

## Props
Expand Down

0 comments on commit 15df512

Please sign in to comment.