Merge pull request #547 from nullptr-z/dev

fix: 统一组件预览的背景色
uiwjs · Mar 1, 2023 · f29f140 · f29f140
2 parents d2e143e + 718f5f2
commit f29f140
Show file tree

Hide file tree

Showing 53 changed files with 307 additions and 286 deletions.
diff --git a/packages/core/src/ActionSheet/README.md b/packages/core/src/ActionSheet/README.md
@@ -7,7 +7,7 @@ ActionSheet 动作面板
 <!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
 
 ### 基础示例
-```jsx  mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React, { Fragment, useState } from 'react';
 import { Button, ActionSheet }  from '@uiw/react-native';
 import { ActionSheetItem } from '@uiw/react-native/lib/ActionSheet'
@@ -28,7 +28,7 @@ export default Demo
 ```
 
 ### 自定义按钮文字
-```jsx  mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React, { Fragment, useState } from 'react';
 import { Button, ActionSheet }  from '@uiw/react-native';
 import { ActionSheetItem } from '@uiw/react-native/lib/ActionSheet'

diff --git a/packages/core/src/Avatar/README.md b/packages/core/src/Avatar/README.md
@@ -6,7 +6,7 @@ Avatar 头像
 
 ### 基础示例
 
-```jsx mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import { View } from 'react-native';
 import { Avatar } from '@uiw/react-native';
 import React from 'react';
@@ -28,7 +28,7 @@ export default Demo
 
 ### 头像尺寸
 
-```jsx mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React from 'react';
 import { View } from 'react-native';
 import { Avatar } from '@uiw/react-native';
@@ -50,7 +50,7 @@ export default Demo
 
 ### 设置头像圆角
 
-```jsx mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React from 'react';
 import { View } from 'react-native';
 import { Avatar } from '@uiw/react-native';
@@ -72,10 +72,10 @@ export default Demo
 
 ### 指定头像的形状
 
-circle  圆头像  
-square  正方形头像  
+circle  圆头像
+square  正方形头像
 
-```jsx mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React from 'react';
 import { View } from 'react-native';
 import { Avatar } from '@uiw/react-native';

diff --git a/packages/core/src/Badge/README.md b/packages/core/src/Badge/README.md
@@ -5,7 +5,7 @@ Badge 标记
 ### 基础示例
 
 
-```jsx  mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React from "react"
 import { View, Text } from 'react-native';
 import { Badge } from '@uiw/react-native';
@@ -25,7 +25,7 @@ export default Demo;
 ### 设置文本内容
 
 
-```jsx  mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React from "react"
 import { View, Text } from 'react-native';
 import { Badge } from '@uiw/react-native';
@@ -45,9 +45,9 @@ export default Demo;
 
 ```
 
-### 设置颜色 
+### 设置颜色
 
-```jsx  mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React from "react"
 import { View, Text } from 'react-native';
 import { Badge } from '@uiw/react-native';
@@ -69,7 +69,7 @@ export default Demo;
 ### 设置类型
 
 
-```jsx  mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React from "react"
 import { View, Text } from 'react-native';
 import { Badge } from '@uiw/react-native';

diff --git a/packages/core/src/Button/README.md b/packages/core/src/Button/README.md
@@ -10,7 +10,7 @@ Button 按钮
 
 ### 基础实例
 
-```jsx  mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React,{ Component } from "react"
 import  { Button, Spacing, Icon } from '@uiw/react-native';
 import { Text} from 'react-native';
@@ -40,7 +40,7 @@ export default Demo
 
 ### 按钮圆角设置
 
-```jsx  mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React,{ Component } from "react"
 import  { Button, Spacing } from '@uiw/react-native';
 
@@ -60,7 +60,7 @@ export default Demo
 
 ### 不同颜色
 
-```jsx  mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React,{ Component } from "react"
 import  { Button, Spacing } from '@uiw/react-native';
 
@@ -89,7 +89,7 @@ export default Demo
 
 ### 自定义颜色
 
-```jsx  mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React,{ Component } from "react"
 import  { Button, Spacing } from '@uiw/react-native';
 
@@ -111,7 +111,7 @@ export default Demo
 ### 加载中
 
 
-```jsx  mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React,{ Component } from "react"
 import  { Button, Spacing } from '@uiw/react-native';
 
@@ -129,7 +129,7 @@ export default Demo
 
 ### 显示边框
 
-```jsx  mdx:preview
+```jsx mdx:preview&background=#bebebe29
 
 import React,{ Component } from "react"
 import  { Button, Spacing } from '@uiw/react-native';
@@ -149,7 +149,7 @@ export default Demo
 ```
 ### 按钮尺寸
 
-```jsx  mdx:preview
+```jsx mdx:preview&background=#bebebe29
 
 import React,{ Component } from "react"
 import  { Button, Spacing } from '@uiw/react-native';
@@ -173,7 +173,7 @@ export default Demo
 
 ### 自定义图标
 
-```jsx mdx:preview
+```jsx mdx:preview&background=#bebebe29
 
 import React,{ Component } from "react"
 import  { Button, Spacing, Icon } from '@uiw/react-native';

diff --git a/packages/core/src/ButtonGroup/README.md b/packages/core/src/ButtonGroup/README.md
@@ -5,8 +5,8 @@ ButtonGroup 按钮组
 
 ### 基础示例
 
-<!--DemoStart--> 
-```jsx  mdx:preview
+<!--DemoStart-->
+```jsx mdx:preview&background=#bebebe29
 import React,{ Component } from "react"
 import  {Button,ButtonGroup}  from '@uiw/react-native';
 
@@ -26,8 +26,8 @@ export default Demo
 
 ### 设置边框
 
-<!--DemoStart--> 
-```jsx  mdx:preview
+<!--DemoStart-->
+```jsx mdx:preview&background=#bebebe29
 import React,{ Component } from "react"
 import { View } from 'react-native';
 import  {Button,ButtonGroup,Spacing}  from '@uiw/react-native';
@@ -59,8 +59,8 @@ export default Demo
 
 ### 设置按钮组尺寸
 
-<!--DemoStart--> 
-```jsx  mdx:preview
+<!--DemoStart-->
+```jsx mdx:preview&background=#bebebe29
 import React,{ Component } from "react"
 import { View } from 'react-native';
 import  {Button,ButtonGroup,Spacing}  from '@uiw/react-native';

diff --git a/packages/core/src/Calendar/README.md b/packages/core/src/Calendar/README.md
@@ -1,12 +1,12 @@
-Calendar 日历 
+Calendar 日历
 ---
 
 展示日历
 
 ### 基础示例
 
-```jsx  mdx:preview
-import React from 'react';
+```jsx mdx:preview&background=#bebebe29
+import React,{Component} from 'react';
 import { View } from 'react-native';
 import { Calendar } from '@uiw/react-native';
 import Layout, { Container }  from '../Layout';
@@ -30,8 +30,8 @@ export default CalendarView
 
 ### 自定义日历颜色、农历及假日展示
 
-```jsx  mdx:preview
-import React from 'react';
+```jsx mdx:preview&background=#bebebe29
+import React,{Component} from 'react';
 import { View } from 'react-native';
 import { Calendar } from '@uiw/react-native';
 import Layout, { Container }  from '../Layout';
@@ -55,8 +55,8 @@ export default CalendarView
 
 ### 自定义日历头部及农历详情展示
 
-```jsx  mdx:preview
-import React from 'react';
+```jsx mdx:preview&background=#bebebe29
+import React,{ Component } from 'react';
 import { Text, View } from 'react-native';
 import { Calendar } from '@uiw/react-native';
 import Layout, { Container }  from '../Layout';
@@ -66,8 +66,8 @@ function CalendarView() {
      const barProps = {
       barRightText: "返回",
       title : "日历",
-      onPressBarLeft: () => navigation.goBack(), 
-      barLeftText: "今天" 
+      onPressBarLeft: () => navigation.goBack(),
+      barLeftText: "今天"
     }
     return (
         <Container>
@@ -85,8 +85,8 @@ export default CalendarView
 
 ### 隐藏头部
 
-```jsx  mdx:preview
-import React from 'react';
+```jsx mdx:preview&background=#bebebe29
+import React,{Component} from 'react';
 import { View } from 'react-native';
 import { Calendar } from '@uiw/react-native';
 import Layout, { Container }  from '../Layout';
@@ -110,8 +110,8 @@ export default CalendarView
 
 ### 自定义日期额外内容
 
-```jsx  mdx:preview
-import React from 'react';
+```jsx mdx:preview&background=#bebebe29
+import React,{Component} from 'react';
 import { View,Text } from 'react-native';
 import { Calendar } from '@uiw/react-native';
 import Layout, { Container }  from '../Layout';
@@ -135,8 +135,8 @@ export default CalendarView
 
 ### 默认value值
 
-```jsx  mdx:preview
-import React,{ useState } from 'react';
+```jsx mdx:preview&background=#bebebe29
+import React,{Component} from 'react';
 import { View,Text } from 'react-native';
 import { Calendar } from '@uiw/react-native';
 import Layout, { Container }  from '../Layout';
@@ -182,4 +182,4 @@ export default CalendarView
 | `barLeftText` | 导航左侧文本 | string | - |
 | `barRightText` | 导航右侧文本 | string | - |
 | `onPressBarLeft` | 是否显示农历及假日 | `() => void` | - |
-| `render` | 自定义导航栏 | React.ReactNode | - |
+| `render` | 自定义导航栏 | React.ReactNode | - |
diff --git a/packages/core/src/Card/README.md b/packages/core/src/Card/README.md
@@ -5,7 +5,7 @@ Card 卡片
 
 ### 基础示例
 
-```jsx mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React,{ Component } from "react"
 import { SafeAreaView, View, Image  } from 'react-native';
 import Card from '@uiw/react-native/lib/Card';
@@ -23,7 +23,7 @@ function Demo() {
 export default Demo
 ```
 ### 带标题圆角卡片
-```jsx mdx:preview
+```jsx mdx:preview&background=#bebebe29
 import React,{ Component } from "react"
 import { SafeAreaView, View, Image } from 'react-native';
 import Card from '@uiw/react-native/lib/Card';

diff --git a/packages/core/src/CardCollapse/README.md b/packages/core/src/CardCollapse/README.md
@@ -5,8 +5,8 @@ CardCollapse 可折叠卡片列表
 
 ### 基础示例
 
-<!--DemoStart--> 
-```jsx mdx:preview
+<!--DemoStart-->
+```jsx mdx:preview&background=#bebebe29
 import React,{ Component } from 'react';
 import { ScrollView, View,Image } from 'react-native';
 import { CardCollapse } from '@uiw/react-native';
@@ -25,7 +25,7 @@ function Demo() {
   const renderItem = (_, index) => {
     return (
       <View key={index} style={{ padding: 20,backgroundColor: '#fff'}}>
-          <Image source={{uri: contents[index]}} style={{ height: 120 }} /> 
+          <Image source={{uri: contents[index]}} style={{ height: 120 }} />
       </View>
     );
   }
@@ -52,8 +52,8 @@ export default Demo
 
 ### 默认不折叠
 
-<!--DemoStart--> 
-```jsx mdx:preview
+<!--DemoStart-->
+```jsx mdx:preview&background=#bebebe29
 import React,{ Component } from 'react';
 import { ScrollView, View,Image } from 'react-native';
 import { CardCollapse } from '@uiw/react-native';
@@ -72,7 +72,7 @@ function Demo() {
   const renderItem = (_, index) => {
     return (
       <View key={index} style={{ padding: 20,backgroundColor: '#fff'}}>
-          <Image source={{uri: contents[index]}} style={{ height: 120 }} /> 
+          <Image source={{uri: contents[index]}} style={{ height: 120 }} />
       </View>
     );
   }
@@ -98,8 +98,8 @@ export default Demo
 ```
 ### 卡片圆角
 
-<!--DemoStart--> 
-```jsx mdx:preview
+<!--DemoStart-->
+```jsx mdx:preview&background=#bebebe29
 import React,{ Component } from 'react';
 import { ScrollView, View,Image } from 'react-native';
 import { CardCollapse } from '@uiw/react-native';
@@ -118,7 +118,7 @@ function Demo() {
   const renderItem = (_, index) => {
     return (
       <View key={index} style={{ padding: 20,backgroundColor: '#fff'}}>
-          <Image source={{uri: contents[index]}} style={{ height: 120 }} /> 
+          <Image source={{uri: contents[index]}} style={{ height: 120 }} />
       </View>
     );
   }