feat(tab): add prop scrollable

varletjs · Mar 21, 2023 · 26ccf6a · 26ccf6a
1 parent 7e56950
commit 26ccf6a
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/packages/varlet-ui/src/tabs/Tabs.vue b/packages/varlet-ui/src/tabs/Tabs.vue
@@ -113,7 +113,7 @@ export default defineComponent({
     }
 
     const watchScrollable = () => {
-      scrollable.value = tabList.length >= 5
+      scrollable.value = props.scrollable === 'always' || tabList.length >= 5
     }
 
     const moveIndicator = ({ element }: TabProvider) => {

diff --git a/packages/varlet-ui/src/tabs/docs/en-US.md b/packages/varlet-ui/src/tabs/docs/en-US.md
@@ -291,7 +291,7 @@ const active = ref(0)
 | `sticky-z-index`   | Sticky layouts z-index                                                       | _number_ | `10`          |
 | `safe-area`        | Whether to enable bottom safe area adaptation                                | _boolean_ | `false`      |
 | `offset-top`       | Distance offset top                                                          | _string \| number_      | `0`          |
-
+| `scrollable`       | Whether to enable scrollable, optional value of `auto` `always`              | _string_ | `auto`      |
 #### Tab Props
 
 | Prop       | Description            | Type               | Default |

diff --git a/packages/varlet-ui/src/tabs/docs/zh-CN.md b/packages/varlet-ui/src/tabs/docs/zh-CN.md
@@ -291,6 +291,7 @@ const active = ref(0)
 | `sticky-z-index`   | 粘性布局的层级                                | _number_ | `10`         |
 | `safe-area`        | 是否开启底部安全区适配                            | _boolean_ | `false`      |
 | `offset-top`       | 吸顶距离                                   | _string \| number_      | `0`          |
+| `scrollable`       | 是否开启滚动，可选值为 `auto` `always`           | _string_       | `auto`          |
 
 #### Tab Props
 

diff --git a/packages/varlet-ui/src/tabs/props.ts b/packages/varlet-ui/src/tabs/props.ts
@@ -6,6 +6,10 @@ function directionValidator(direction: string) {
   return ['horizontal', 'vertical'].includes(direction)
 }
 
+function scrollableValidator(scrollable: string) {
+  return ['auto', 'always'].includes(scrollable)
+}
+
 export const props = {
   active: {
     type: [String, Number],
@@ -58,6 +62,11 @@ export const props = {
     type: Boolean,
     default: false,
   },
+  scrollable: {
+    type: String as PropType<'auto' | 'always'>,
+    default: 'auto',
+    validator: scrollableValidator,
+  },
   onClick: defineListenerProp<(active: string | number) => void>(),
   onChange: defineListenerProp<(active: string | number) => void>(),
   'onUpdate:active': defineListenerProp<(active: string | number) => void>(),