Skip to content

Commit c5a56a5

Browse files
hyxingyuefeng
authored andcommitted
fix: 更改Divider分割线和ButtonGroup按钮组文档和添加文档实例
1 parent f4bc90a commit c5a56a5

File tree

2 files changed

+46
-24
lines changed

2 files changed

+46
-24
lines changed

packages/core/src/ButtonGroup/README.md

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ ButtonGroup 按钮组
33

44
用于一组按钮的排版展示。
55

6-
![](https://user-images.githubusercontent.com/57083007/137632086-8441bd1b-e8f9-4c15-828d-ad86310fdb72.png)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
7-
86
### 基础示例
97

108
<!--DemoStart-->
11-
```jsx
12-
import { Button, ButtonGroup } from '@uiw/react-native';
9+
```jsx mdx:preview
10+
import React,{ Component } from "react"
11+
import Button from '@uiw/react-native/lib/Button';
12+
import ButtonGroup from '@uiw/react-native/lib/ButtonGroup';
1313

1414
class Demo extends Component {
1515
render() {
@@ -23,15 +23,19 @@ class Demo extends Component {
2323
)
2424
}
2525
}
26+
27+
export default Demo
2628
```
27-
<!--End-->
2829

2930
### 设置边框
3031

3132
<!--DemoStart-->
32-
```jsx
33+
```jsx mdx:preview
34+
import React,{ Component } from "react"
3335
import { View } from 'react-native';
34-
import { Button, ButtonGroup } from '@uiw/react-native';
36+
import Button from '@uiw/react-native/lib/Button';
37+
import ButtonGroup from '@uiw/react-native/lib/ButtonGroup';
38+
import Spacing from '@uiw/react-native/lib/Spacing';
3539

3640
class Demo extends Component {
3741
render() {
@@ -54,15 +58,21 @@ class Demo extends Component {
5458
)
5559
}
5660
}
61+
62+
export default Demo
5763
```
5864
<!--End-->
5965

66+
6067
### 设置按钮组尺寸
6168

6269
<!--DemoStart-->
63-
```jsx
70+
```jsx mdx:preview
71+
import React,{ Component } from "react"
6472
import { View } from 'react-native';
65-
import { Button, ButtonGroup } from '@uiw/react-native';
73+
import Button from '@uiw/react-native/lib/Button';
74+
import ButtonGroup from '@uiw/react-native/lib/ButtonGroup';
75+
import Spacing from '@uiw/react-native/lib/Spacing';
6676

6777
class Demo extends Component {
6878
render() {
@@ -113,10 +123,11 @@ class Demo extends Component {
113123
)
114124
}
115125
}
126+
127+
export default Demo
116128
```
117129
<!--End-->
118130

119-
120131
### Props
121132

122133
集成继承 `Button` 组件自定义属性,外层包裹继承 [`Flex`] 组件。

packages/core/src/Divider/README.md

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
Divider 分割线
22
---
33

4-
![](https://user-images.githubusercontent.com/66067296/140264880-2e3ad121-d86f-4625-8149-7bf452b348db.png)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
5-
64
区隔内容的分割线。
75

86
### 基础示例
97

10-
```jsx
11-
import { Fragment } from 'react';
8+
```jsx mdx:preview
9+
import React,{Component, Fragment } from "react"
1210
import { View, Text } from 'react-native';
13-
import { Divider } from '@uiw/react-native';
11+
import Divider from '@uiw/react-native/lib/Divider';
1412

15-
function Demo() {
13+
class Demo extends Component {
14+
render() {
1615
return (
1716
<Fragment>
1817
<Text>分割线</Text>
@@ -22,17 +21,21 @@ function Demo() {
2221
<Text>分割线</Text>
2322
</Fragment>
2423
);
24+
}
2525
}
26+
export default Demo
27+
2628
```
2729

2830
### 分割线标题位置
2931

30-
```jsx
31-
import { Fragment } from 'react';
32+
```jsx mdx:preview
33+
import React,{Component, Fragment } from "react"
3234
import { View, Text } from 'react-native';
33-
import { Divider } from '@uiw/react-native';
35+
import Divider from '@uiw/react-native/lib/Divider';
3436

35-
function Demo() {
37+
class Demo extends Component {
38+
render() {
3639
return (
3740
<Fragment>
3841
<Text>分割线</Text>
@@ -43,22 +46,30 @@ function Demo() {
4346
<Divider label="right" orientation="right" labelStyle={{ fontWeight: 'bold' }} />
4447
</Fragment>
4548
);
49+
}
4650
}
51+
export default Demo
52+
4753
```
4854

4955
### 纵向分割线
5056

51-
```jsx
57+
```jsx mdx:preview
58+
import React,{Component} from "react"
5259
import { View, Text } from 'react-native';
53-
import { Divider } from '@uiw/react-native';
60+
import Divider from '@uiw/react-native/lib/Divider';
5461

55-
function Demo() {
62+
class Demo extends Component {
63+
render() {
5664
return (
57-
<View style={{ height: 200 }}>
65+
<View style={{ height: 200 }}>
5866
<Divider type="vertical" label="OR" />
5967
</View>
6068
);
69+
}
6170
}
71+
export default Demo
72+
6273
```
6374

6475
### props

0 commit comments

Comments
 (0)