doc(Tabs): 文档更新

uiwjs · Feb 28, 2023 · ff1f74d · ff1f74d
1 parent 690f3e1
commit ff1f74d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 72 deletions.
diff --git a/packages/core/src/Tabs/README.md b/packages/core/src/Tabs/README.md
@@ -8,100 +8,56 @@ Tabs 选项卡
 
 ### 基础示例
 
-```jsx  mdx:preview
-import React, { Fragment } from 'react';
+```jsx
+import React, { Fragment,useState } from 'react';
+import { View } from 'react-native'
 import { Tabs } from '@uiw/react-native';
 const { Item } = Tabs
 function Demo() {
+  const [value,setValue]= useState(0)
   return (
-    <Fragment>
-      <Tabs >
-        <Item
-          title="喜欢"
-        />
-        <Tabs.Item
-          title="关注"
-        />
-        <Tabs.Item
-          title="信息"
-        />
-        <Tabs.Item
-          title="我的"
-        />
-        <Tabs.Item
-          title="偏好"
-        />
+      <Tabs onChange={(value)=>setValue(value)} value={value}>
+        <Item title="喜欢" />
+        <Tabs.Item title="关注" />
+        <Tabs.Item title="信息" />
+        <Tabs.Item title="我的" />
+        <Tabs.Item title="偏好" />
       </Tabs>
-    </Fragment>
   );
 }
 export default Demo
 ```
 ### 使用 Icon
 
-```jsx  mdx:preview
-import React, { Fragment } from 'react';
+```jsx
+import React, { useState } from 'react';
 import { Tabs, Icon } from '@uiw/react-native';
 function Demo() {
+  const [value,setValue]= useState(0)
   return (
-    <Fragment>
-     <Tabs>
-      <Tabs.Item
-        title="喜欢"
-        icon='heart-on'
-      />
-      <Tabs.Item
-        title="关注"
-        icon={<Icon name='star-on' color="#fff" size={24} />}
-      />
-      <Tabs.Item
-        title="信息"
-        icon='mail'
-      />
+     <Tabs onChange={(value)=>setValue(value)} value={value}>
+      <Tabs.Item title="喜欢" icon='heart-on' />
+      <Tabs.Item title="关注" icon={<Icon name='star-on' color={value===1?'#035bb6':'red'} size={24} />} />
+      <Tabs.Item title="信息" icon='mail' />
     </Tabs>
-    </Fragment>
   );
 }
 export default Demo
 ```
 
-### 使用文字和不使用文字
+### 选中色更改
 
-```jsx  mdx:preview
-import React, { Fragment } from 'react';
+```jsx
+import React, { useState } from 'react';
 import { Tabs, Icon } from '@uiw/react-native';
-import Spacing from '@uiw/react-native/lib/Spacing';
-
 function Demo() {
+  const [value,setValue]= useState(0)
   return (
-    <Fragment>
-     <Tabs>
-      <Tabs.Item
-        icon='home'
-      />
-      <Tabs.Item
-        icon={<Icon name='bell' color="#fff" size={24} />}
-      />
-      <Tabs.Item
-        icon='user'
-      />
-    </Tabs>
-    <Spacing />
-    <Tabs>
-      <Tabs.Item
-        title='主页'
-        icon='home'
-      />
-      <Tabs.Item
-        title='提醒'
-        icon={<Icon name='bell' color="#fff" size={24} />}
-      />
-      <Tabs.Item
-        title='我的'
-        icon='user'
-      />
+     <Tabs onChange={(value)=>setValue(value)} value={value} activeColor="red">
+      <Tabs.Item title="喜欢" icon='heart-on' />
+      <Tabs.Item title="关注" icon={<Icon name='star-on' color={value===1?'#035bb6':'red'} size={24} />} />
+      <Tabs.Item title="信息" icon='mail' />
     </Tabs>
-    </Fragment>
   );
 }
 export default Demo
@@ -134,7 +90,6 @@ export default Demo
 | `titleSize` | 文字大小 | number | - |
 | `iconSize` | icon 大小 | number | - |
 | `borderWidth` | border 宽度 | number | - |
-| `borderBottom` | border 底部距离 | number | - |
 | `borderHeight` | border 粗细 | number | - |
 
 
diff --git a/packages/core/src/Tabs/TabsItem.tsx b/packages/core/src/Tabs/TabsItem.tsx
@@ -17,8 +17,6 @@ export interface TabsItemStyle {
   iconSize?: number;
   /** border 宽度 */
   borderWidth?: number;
-  /** border 距离底部距离一般与 Tabs paddingBottom 相等 */
-  borderBottom?: number;
   /** border 粗细 */
   borderHeight?: number;
 }