feat(packages): materials support slider-tab. closed #823

packages/materials/src/libs/page-tab/index.vue

@@ -5,6 +5,7 @@ import type { PageTabMode, PageTabProps } from '../../types';
 import { ACTIVE_COLOR, createTabCssVars } from './shared';
 import ChromeTab from './chrome-tab.vue';
 import ButtonTab from './button-tab.vue';
+import SliderTab from './slider-tab.vue';
 import SvgClose from './svg-close.vue';
 import style from './index.module.css';
 
@@ -26,7 +27,7 @@ interface Emits {
 const emit = defineEmits<Emits>();
 
 const activeTabComponent = computed(() => {
-  const { mode, chromeClass, buttonClass } = props;
+  const { mode, chromeClass, buttonClass, sliderClass } = props;
 
   const tabComponentMap = {
     chrome: {
@@ -36,6 +37,10 @@ const activeTabComponent = computed(() => {
     button: {
       component: ButtonTab,
       class: buttonClass
+    },
+    slider: {
+      component: SliderTab,
+      class: sliderClass
     }
   } satisfies Record<PageTabMode, { component: Component; class?: string }>;
 
@@ -45,7 +50,7 @@ const activeTabComponent = computed(() => {
 const cssVars = computed(() => createTabCssVars(props.activeColor));
 
 const bindProps = computed(() => {
-  const { chromeClass: _chromeCls, buttonClass: _btnCls, ...rest } = props;
+  const { chromeClass: _chromeCls, buttonClass: _btnCls, sliderClass: _sliderCls, ...rest } = props;
 
   return rest;
 });