diff --git a/packages/ui-core/src/components/Tabs/Tabs.less b/packages/ui-core/src/components/Tabs/Tabs.less index d8a10f8e0..12d6c8def 100644 --- a/packages/ui-core/src/components/Tabs/Tabs.less +++ b/packages/ui-core/src/components/Tabs/Tabs.less @@ -20,22 +20,10 @@ } &__swiper-wrapper { - display: flex; - width: 100%; - } - - &__swiper { - .fontFamily(); - .h5(); position: relative; - display: inline-block; + display: flex; width: 100%; - padding: 4px; - border-radius: 12px; - overflow: hidden; - - background-color: var(--spbSky0); &:before, &:after { @@ -46,6 +34,7 @@ z-index: 1; width: 64px; + border-radius: 0 12px 12px 0; background: linear-gradient(270deg, var(--stcBlack5) 0%, transparent 64%); @@ -63,18 +52,32 @@ } } - &__swiper_beginning { + &__swiper-wrapper_beginning { &:before { display: none; } } - &__swiper_end { + &__swiper-wrapper_end { &:after { display: none; } } + &__swiper { + .fontFamily(); + .h5(); + position: relative; + + display: inline-block; + width: 100%; + padding: 4px; + border-radius: 12px; + overflow: hidden; + + background-color: var(--spbSky0); + } + &__slide { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); diff --git a/packages/ui-core/src/components/Tabs/Tabs.tsx b/packages/ui-core/src/components/Tabs/Tabs.tsx index 14a176aea..471acfacd 100644 --- a/packages/ui-core/src/components/Tabs/Tabs.tsx +++ b/packages/ui-core/src/components/Tabs/Tabs.tsx @@ -238,35 +238,18 @@ const Tabs: React.FC = ({ swiperInstance?.slideNext(); }, [swiperInstance]); - const handleReachBeginning = React.useCallback( - (swiper: SwiperCore) => { - if (isBeginning === swiper.isBeginning) { - return; - } - - setBeginning(swiper.isBeginning); - }, - [isBeginning], - ); - - const handleReachEnd = React.useCallback( - (swiper: SwiperCore) => { - if (isEnd === swiper.isEnd) { - return; - } + const handleReachBeginning = React.useCallback(() => { + setBeginning(true); + }, []); - setEnd(swiper.isEnd); - }, - [isEnd], - ); + const handleReachEnd = React.useCallback(() => { + setEnd(true); + }, []); - const handleFromEdge = React.useCallback( - (swiper: SwiperCore) => { - isBeginning !== swiper.isBeginning && setBeginning(swiper.isBeginning); - isEnd !== swiper.isEnd && setEnd(swiper.isEnd); - }, - [isBeginning, isEnd], - ); + const handleFromEdge = React.useCallback((swiper: SwiperCore) => { + setBeginning(swiper.isBeginning); + setEnd(swiper.isEnd); + }, []); const addObserveEvent = React.useCallback(() => { const rootRefNode = rootRef.current; @@ -449,7 +432,14 @@ const Tabs: React.FC = ({ className={cn('wrapper', [classes?.wrapper])} >
= ({