fix: review

jdf2e · Dec 26, 2024 · a6c6a7a · a6c6a7a
1 parent c7f1018
commit a6c6a7a
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 0 deletions.
diff --git a/src/packages/sidebar/demo.taro.tsx b/src/packages/sidebar/demo.taro.tsx
@@ -8,6 +8,7 @@ import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
+import Demo6 from './demos/taro/demo6'
 
 const TabsDemo = () => {
   const [translated] = useTranslate({
@@ -17,13 +18,15 @@ const TabsDemo = () => {
       matchByValue: '根据value匹配',
       multiTitle: '多个标题',
       setDuration: '设置滚动动画时长',
+      padding: '内容区域留白边距',
     },
     'en-US': {
       basic: 'Basic Usage',
       disabled: 'Disabled',
       matchByValue: 'Match By Value',
       multiTitle: 'Multiple Titles',
       setDuration: 'Set Scroll Animation Duration',
+      padding: 'Set Content Padding',
     },
   })
 
@@ -43,6 +46,8 @@ const TabsDemo = () => {
         <Demo4 />
         <View className="h2">{translated.setDuration}</View>
         <Demo5 />
+        <View className="h2">{translated.padding}</View>
+        <Demo6 />
       </ScrollView>
     </>
   )

diff --git a/src/packages/sidebar/demo.tsx b/src/packages/sidebar/demo.tsx
@@ -5,6 +5,7 @@ import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
 import Demo5 from './demos/h5/demo5'
+import Demo6 from './demos/h5/demo6'
 
 const SideNavBarDemo = () => {
   const [translated] = useTranslate({
@@ -14,13 +15,15 @@ const SideNavBarDemo = () => {
       matchByValue: '根据value匹配',
       multiTitle: '多个标题',
       setDuration: '设置滚动动画时长',
+      padding: '内容区域留白边距',
     },
     'en-US': {
       basic: 'Basic Usage',
       disabled: 'Disabled',
       matchByValue: 'Match By Value',
       multiTitle: 'Multiple Titles',
       setDuration: 'Set Scroll Animation Duration',
+      padding: 'Set Content Padding',
     },
   })
 
@@ -37,6 +40,8 @@ const SideNavBarDemo = () => {
         <Demo4 />
         <h2>{translated.setDuration}</h2>
         <Demo5 />
+        <h2>{translated.padding}</h2>
+        <Demo6 />
       </div>
     </>
   )

diff --git a/src/packages/sidebar/demos/h5/demo6.tsx b/src/packages/sidebar/demos/h5/demo6.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import { ConfigProvider, SideBar } from '@nutui/nutui-react'
+
+const Demo6 = () => {
+  const [value, setValue] = useState<number | string>('0')
+  const list = Array.from(new Array(3).keys())
+  return (
+    <ConfigProvider theme={{ nutuiSidebarItemPadding: '0 0' }}>
+      <SideBar
+        style={{ height: 300 }}
+        value={value}
+        contentDuration={500}
+        sidebarDuration={300}
+        onChange={(value) => {
+          setValue(value)
+        }}
+      >
+        {list.map((item) => (
+          <SideBar.Item key={item} title={`Opt ${item + 1}`}>
+            Content {item + 1}
+          </SideBar.Item>
+        ))}
+      </SideBar>
+    </ConfigProvider>
+  )
+}
+export default Demo6
diff --git a/src/packages/sidebar/demos/taro/demo6.tsx b/src/packages/sidebar/demos/taro/demo6.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import { ConfigProvider, SideBar } from '@nutui/nutui-react-taro'
+
+const Demo6 = () => {
+  const [value, setValue] = useState<number | string>('0')
+  const list = Array.from(new Array(3).keys())
+  return (
+    <ConfigProvider theme={{ nutuiSidebarItemPadding: '0 0' }}>
+      <SideBar
+        style={{ height: 300 }}
+        value={value}
+        contentDuration={500}
+        sidebarDuration={300}
+        onChange={(value) => {
+          setValue(value)
+        }}
+      >
+        {list.map((item) => (
+          <SideBar.Item key={item} title={`Opt ${item + 1}`}>
+            Content {item + 1}
+          </SideBar.Item>
+        ))}
+      </SideBar>
+    </ConfigProvider>
+  )
+}
+export default Demo6
diff --git a/src/packages/sidebar/doc.en-US.md b/src/packages/sidebar/doc.en-US.md
@@ -84,6 +84,7 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-sidebar-background-color | Sidebar navigation background color | `$color-background` |
 | \--nutui-sidebar-border-radius | Rounded corners of the sidebar | `0` |
 | \--nutui-sidebar-width | Sidebar width | `104px` |
+| \--nutui-sidebar-max-width | Sidebar max width | `128px` |
 | \--nutui-sidebar-title-height | Sidebar title height | `52px` |
 | \--nutui-sidebar-inactive-font-size | Font size in normal state | `$font-size-base` |
 | \--nutui-sidebar-active-font-size | Font size in active state | `$font-size-l` |

diff --git a/src/packages/sidebar/doc.md b/src/packages/sidebar/doc.md
@@ -84,6 +84,7 @@ import { SideBar } from '@nutui/nutui-react'
 | \--nutui-sidebar-background-color | 侧边栏导航背景色 | `$color-background` |
 | \--nutui-sidebar-border-radius | 侧边栏的圆角 | `0` |
 | \--nutui-sidebar-width | 侧边栏宽度 | `104px` |
+| \--nutui-sidebar-max-width | 侧边栏最大宽度 | `128px` |
 | \--nutui-sidebar-title-height | 侧边栏标题高度 | `52px` |
 | \--nutui-sidebar-inactive-font-size | 普通状态下的字体大小 | `$font-size-base` |
 | \--nutui-sidebar-active-font-size | 激活状态下的字体大小 | `$font-size-l` |

diff --git a/src/packages/sidebar/doc.taro.md b/src/packages/sidebar/doc.taro.md
@@ -84,6 +84,7 @@ import { SideBar } from '@nutui/nutui-react-taro'
 | \--nutui-sidebar-background-color | 侧边栏导航背景色 | `$color-background` |
 | \--nutui-sidebar-border-radius | 侧边栏的圆角 | `0` |
 | \--nutui-sidebar-width | 侧边栏宽度 | `104px` |
+| \--nutui-sidebar-max-width | 侧边栏最大宽度 | `128` |
 | \--nutui-sidebar-title-height | 侧边栏标题高度 | `52px` |
 | \--nutui-sidebar-inactive-font-size | 普通状态下的字体大小 | `$font-size-base` |
 | \--nutui-sidebar-active-font-size | 激活状态下的字体大小 | `$font-size-l` |

diff --git a/src/packages/sidebar/doc.zh-TW.md b/src/packages/sidebar/doc.zh-TW.md
@@ -84,6 +84,7 @@ import { SideBar } from '@nutui/nutui-react'
 | \--nutui-sidebar-background-color | 側邊欄導航背景色 | `$color-background` |
 | \--nutui-sidebar-border-radius | 側邊欄的圓角 | `0` |
 | \--nutui-sidebar-width | 側邊欄寬度 | `104px` |
+| \--nutui-sidebar-max-width | 側邊欄最大寬度 | `128px` |
 | \--nutui-sidebar-title-height | 側邊欄標題高度 | `52px` |
 | \--nutui-sidebar-inactive-font-size | 普通狀態下的字體大小 | `$font-size-base` |
 | \--nutui-sidebar-active-font-size | 激活狀態下的字體大小 | `$font-size-l` |

diff --git a/src/packages/sidebar/sidebar.scss b/src/packages/sidebar/sidebar.scss
@@ -18,6 +18,7 @@
     border-radius: $sidebar-border-radius;
     height: 100%;
     width: $sidebar-width;
+    max-width: $sidebar-max-width;
     flex-shrink: 0;
     &::-webkit-scrollbar {
       display: none;

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -2152,6 +2152,7 @@ $sidebar-background-color: var(
 ) !default;
 $sidebar-border-radius: var(--nutui-sidebar-border-radius, 0) !default;
 $sidebar-width: var(--nutui-sidebar-width, 104px) !default;
+$sidebar-max-width: var(--nutui-sidebar-max-width, 128px) !default;
 $sidebar-title-height: var(--nutui-sidebar-title-height, 52px) !default;
 $sidebar-inactive-font-size: var(
   --nutui-sidebar-inactive-font-size,