refactor: tabs #6288

pull/6295/head
tangjinzhou 2023-02-17 23:14:26 +08:00
parent 6240ab2885
commit 47385347ee
13 changed files with 1008 additions and 793 deletions

View File

@ -2,7 +2,7 @@
category: Components
type: Data Display
title: Tabs
cover: https://gw.alipayobjects.com/zos/antfincdn/lkI2hNEDr2V/Tabs.svg
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*72NDQqXkyOEAAAAAAAAAAAAADrJ8AQ/original
---
Tabs make it easy to switch between different views.
@ -25,7 +25,7 @@ Ant Design has 3 types of Tabs for different situations.
| animated | Whether to change tabs with animation. Only works while tabPosition=`"top"` \| `"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` | |
| destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | |
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` | } |
| size | preset tab bar size | `large` \| `default` \| `small` | `default` | |
| size | preset tab bar size | `large` \| `middle` \| `small` | `middle` | |
| tabBarGutter | The gap between tabs | number | - | |
| tabBarStyle | Tab bar style object | CSSProperties | - | |
| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` | |

View File

@ -3,7 +3,7 @@ category: Components
subtitle: 标签页
type: 数据展示
title: Tabs
cover: https://gw.alipayobjects.com/zos/antfincdn/lkI2hNEDr2V/Tabs.svg
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*72NDQqXkyOEAAAAAAAAAAAAADrJ8AQ/original
---
选项卡切换组件。
@ -29,7 +29,7 @@ Ant Design 依次提供了三级选项卡,分别用于不同的场景。
| centered | 标签居中展示 | boolean | false | 3.0 | |
| destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false | | |
| hideAdd | 是否隐藏加号图标,在 `type="editable-card"` 时有效 | boolean | false | | |
| size | 大小,提供 `large` `default` 和 `small` 三种大小 | string | `default` | | |
| size | 大小,提供 `large` `middle` 和 `small` 三种大小 | string | `middle` | | |
| tabBarGutter | tabs 之间的间隙 | number | 无 | | |
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | | |
| tabPosition | 页签位置,可选值有 `top` `right` `bottom` `left` | string | `top` | | |

View File

@ -3,6 +3,7 @@ import Dropdown from '../../../vc-dropdown';
import type { Tab, TabsLocale, EditableConfig } from '../interface';
import AddButton from './AddButton';
import type { Key } from '../../../_util/type';
import { functionType } from '../../../_util/type';
import KeyCode from '../../../_util/KeyCode';
import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
import classNames from '../../../_util/classNames';
@ -10,6 +11,7 @@ import { defineComponent, watch, computed, onMounted } from 'vue';
import PropTypes from '../../../_util/vue-types';
import useState from '../../../_util/hooks/useState';
import EllipsisOutlined from '@ant-design/icons-vue/EllipsisOutlined';
import { useProvideOverride } from '../../../menu/src/OverrideContext';
export const operationNodeProps = {
prefixCls: { type: String },
@ -25,6 +27,10 @@ export const operationNodeProps = {
locale: { type: Object as PropType<TabsLocale>, default: undefined as TabsLocale },
removeAriaLabel: String,
onTabClick: { type: Function as PropType<(key: Key, e: MouseEvent | KeyboardEvent) => void> },
popupClassName: String,
getPopupContainer: functionType<
((triggerNode?: HTMLElement | undefined) => HTMLElement) | undefined
>(),
};
export type OperationNodeProps = Partial<ExtractPropTypes<typeof operationNodeProps>>;
@ -117,7 +123,7 @@ export default defineComponent({
setSelectedKey(null);
}
});
useProvideOverride({});
return () => {
const {
prefixCls,
@ -131,6 +137,7 @@ export default defineComponent({
tabBarGutter,
rtl,
onTabClick,
popupClassName,
} = props;
const dropdownPrefix = `${prefixCls}-dropdown`;
@ -147,17 +154,19 @@ export default defineComponent({
const overlayClassName = classNames({
[`${dropdownPrefix}-rtl`]: rtl,
[`${popupClassName}`]: true,
});
const moreNode = mobile ? null : (
<Dropdown
prefixCls={dropdownPrefix}
trigger={['hover']}
visible={open.value}
open={open.value}
transitionName={moreTransitionName}
onVisibleChange={setOpen}
onOpenChange={setOpen}
overlayClassName={overlayClassName}
mouseEnterDelay={0.1}
mouseLeaveDelay={0.1}
getPopupContainer={props.getPopupContainer}
v-slots={{
overlay: () => (
<Menu

View File

@ -17,6 +17,7 @@ import { useInjectTabs } from '../TabContext';
import useTouchMove from '../hooks/useTouchMove';
import AddButton from './AddButton';
import type { Key } from '../../../_util/type';
import { objectType, functionType } from '../../../_util/type';
import type { ExtractPropTypes, PropType, CSSProperties } from 'vue';
import { onBeforeUnmount, defineComponent, ref, watch, watchEffect, computed } from 'vue';
import PropTypes from '../../../_util/vue-types';
@ -36,14 +37,18 @@ export const tabNavListProps = () => {
tabPosition: { type: String as PropType<TabPosition> },
activeKey: { type: [String, Number] },
rtl: { type: Boolean },
animated: { type: Object as PropType<AnimatedConfig>, default: undefined as AnimatedConfig },
editable: { type: Object as PropType<EditableConfig> },
animated: objectType<AnimatedConfig>(),
editable: objectType<EditableConfig>(),
moreIcon: PropTypes.any,
moreTransitionName: { type: String },
mobile: { type: Boolean },
tabBarGutter: { type: Number },
renderTabBar: { type: Function as PropType<RenderTabBar> },
locale: { type: Object as PropType<TabsLocale>, default: undefined as TabsLocale },
locale: objectType<TabsLocale>(),
popupClassName: String,
getPopupContainer: functionType<
((triggerNode?: HTMLElement | undefined) => HTMLElement) | undefined
>(),
onTabClick: {
type: Function as PropType<(activeKey: Key, e: MouseEvent | KeyboardEvent) => void>,
},

View File

@ -10,7 +10,7 @@ import type {
OnTabScroll,
Tab,
} from './interface';
import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
import type { CSSProperties, ExtractPropTypes } from 'vue';
import { defineComponent, computed, onMounted, watchEffect, camelize } from 'vue';
import { flattenChildren, initDefaultProps, isValidElement } from '../../_util/props-util';
import useConfigInject from '../../config-provider/hooks/useConfigInject';
@ -24,6 +24,14 @@ import devWarning from '../../vc-util/devWarning';
import type { SizeType } from '../../config-provider';
import { useProvideTabs } from './TabContext';
import type { Key } from '../../_util/type';
import {
arrayType,
stringType,
someType,
functionType,
objectType,
booleanType,
} from '../../_util/type';
import pick from 'lodash-es/pick';
import PropTypes from '../../_util/vue-types';
import type { MouseEventHandler } from '../../_util/EventInterface';
@ -39,36 +47,33 @@ export const tabsProps = () => {
return {
prefixCls: { type: String },
id: { type: String },
popupClassName: String,
getPopupContainer: functionType<
((triggerNode?: HTMLElement | undefined) => HTMLElement) | undefined
>(),
activeKey: { type: [String, Number] },
defaultActiveKey: { type: [String, Number] },
direction: { type: String as PropType<'ltr' | 'rtl'> },
animated: { type: [Boolean, Object] as PropType<boolean | AnimatedConfig> },
renderTabBar: { type: Function as PropType<RenderTabBar> },
direction: stringType<'ltr' | 'rtl'>(),
animated: someType<boolean | AnimatedConfig>([Boolean, Object]),
renderTabBar: functionType<RenderTabBar>(),
tabBarGutter: { type: Number },
tabBarStyle: { type: Object as PropType<CSSProperties> },
tabPosition: { type: String as PropType<TabPosition> },
destroyInactiveTabPane: { type: Boolean },
tabBarStyle: objectType<CSSProperties>(),
tabPosition: stringType<TabPosition>(),
destroyInactiveTabPane: booleanType(),
hideAdd: Boolean,
type: { type: String as PropType<TabsType> },
size: { type: String as PropType<SizeType> },
type: stringType<TabsType>(),
size: stringType<SizeType>(),
centered: Boolean,
onEdit: {
type: Function as PropType<
(e: MouseEvent | KeyboardEvent | Key, action: 'add' | 'remove') => void
>,
},
onChange: { type: Function as PropType<(activeKey: Key) => void> },
onTabClick: {
type: Function as PropType<(activeKey: Key, e: KeyboardEvent | MouseEvent) => void>,
},
onTabScroll: { type: Function as PropType<OnTabScroll> },
'onUpdate:activeKey': { type: Function as PropType<(activeKey: Key) => void> },
onEdit: functionType<(e: MouseEvent | KeyboardEvent | Key, action: 'add' | 'remove') => void>(),
onChange: functionType<(activeKey: Key) => void>(),
onTabClick: functionType<(activeKey: Key, e: KeyboardEvent | MouseEvent) => void>(),
onTabScroll: functionType<OnTabScroll>(),
'onUpdate:activeKey': functionType<(activeKey: Key) => void>(),
// Accessibility
locale: { type: Object as PropType<TabsLocale>, default: undefined as TabsLocale },
onPrevClick: Function as PropType<MouseEventHandler>,
onNextClick: Function as PropType<MouseEventHandler>,
locale: objectType<TabsLocale>(),
onPrevClick: functionType<MouseEventHandler>(),
onNextClick: functionType<MouseEventHandler>(),
tabBarExtraContent: PropTypes.any,
};
};
@ -126,7 +131,7 @@ const InternalTabs = defineComponent({
tabPane: false,
},
}),
tabs: { type: Array as PropType<Tab[]> },
tabs: arrayType<Tab[]>(),
},
slots: [
'tabBarExtraContent',
@ -154,7 +159,10 @@ const InternalTabs = defineComponent({
'Tabs',
'`tabBarExtraContent` slot is deprecated. Please use `rightExtra` slot instead.',
);
const { prefixCls, direction, size, rootPrefixCls } = useConfigInject('tabs', props);
const { prefixCls, direction, size, rootPrefixCls, getPopupContainer } = useConfigInject(
'tabs',
props,
);
const [wrapSSR, hashId] = useStyle(prefixCls);
const rtl = computed(() => direction.value === 'rtl');
const mergedAnimated = computed<AnimatedConfig>(() => {
@ -284,6 +292,8 @@ const InternalTabs = defineComponent({
onTabClick: onInternalTabClick,
onTabScroll,
style: tabBarStyle,
getPopupContainer: getPopupContainer.value,
popupClassName: classNames(props.popupClassName, hashId.value),
};
if (renderTabBar) {

View File

@ -1,101 +0,0 @@
import type { CSSObject } from '../../_util/cssinjs';
export const tabsCardStyle:{tabsCardGutter:string}={
tabsCardGutter: '2px'
}
export const genTabscardStyle = (token): CSSObject => {
const { componentCls } = token;
return {
[` ${componentCls}-nav,
div > ${componentCls}-nav `]: {
[`${componentCls}-tab `]: {
margin: 0,
background: `${token.colorFillAlter}`,
padding: `${token.paddingXS}px ${token.padding}px`,
border:`${token.lineWidth}px ${token.colorBorder} ${token.lineType} `,
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut} `,
[`&-active `]: {
color: ` ${token.colorInfoActive}`,
background: `${token.colorBgContainer}`,
},
},
[`${componentCls}-ink-bar`]: {
visibility: `hidden`,
},
},
// ========================== Top & Bottom ==========================
[`&${componentCls}-top,
&${componentCls}-bottom`]: {
[`${componentCls}-nav,
div > ${componentCls}-nav `]: {
[` ${componentCls}-tab + ${componentCls}-tab `]: {
marginLeft: `${tabsCardStyle.tabsCardGutter} `,
},
},
},
[`&${componentCls}-top `]: {
[`${componentCls}-nav,
div > ${componentCls}-nav `]: {
[`${componentCls}-tab `]: {
borderRadius: ` ${token.radiusBase}px ${token.radiusBase}px 0 0`,
[`&-active `]: {
borderBottomColor: `${token.colorBgContainer}`,
},
},
},
},
[`&${componentCls}-bottom`]: {
[`${componentCls}-nav,
div > ${componentCls}-nav`]: {
[` ${componentCls}-tab `]: {
borderRadius: `0 0 ${token.radiusBase}px ${token.radiusBase}px`,
[` &-active `]: {
borderTopColor: `${token.colorBgContainer}`,
},
},
},
},
// ========================== Left & Right ==========================
[`&${componentCls}-left,
&${componentCls}-right`]: {
[` ${componentCls}-nav,
div > ${componentCls}-nav `]: {
[` ${componentCls}-tab + ${componentCls}-tab`]: {
marginTop: `${tabsCardStyle.tabsCardGutter}`,
},
},
},
[`&${componentCls}-left`]: {
[` > ${componentCls}-nav,
> div > ${componentCls}-nav`]: {
[` ${componentCls}-tab`]: {
borderRadius: `${token.radiusBase}px 0 0 ${token.radiusBase}px`,
[` &-active`]: {
borderRightColor: `${token.colorBgContainer}`,
},
},
},
},
[` &${componentCls}-right `]: {
[` ${componentCls}-nav,
div > ${componentCls}-nav `]: {
[` ${componentCls}-tab `]: {
borderRadius: `0 ${token.radiusBase}px ${token.radiusBase}px 0`,
[` &-active `]: {
borderLeftColor:`${token.colorBgContainer}`,
},
},
},
},
};
};

View File

@ -1,81 +0,0 @@
import type { CSSObject } from '../../_util/cssinjs';
import { resetComponent, clearFix } from '../../_style';
const dropdownStyle={
dropdownVerticalPadding:'5px',
itemHoverBg:'#f5f5f5',
}
export const genTabsDropdownStyle = (token): CSSObject => {
return {
...resetComponent(token),
position: `absolute`,
top: `-9999px`,
left: `-9999px`,
zIndex:` ${token.zIndexPopupBase}`,
display: `block`,
[` &-hidden`] :{
display: `none`,
},
[` &-menu `]:{
maxHeight:' 200px',
margin: 0,
padding: `${token.padding}px 0`,
overflowx: 'hidden',
overflowY: 'auto',
textAlign: 'left',
listStyleType: 'none',
backgroundColor: ` ${token.colorBgBase}`,
backgroundClip: `padding-box`,
borderRadius: ` ${token.radiusBase}px`,
outline: `none`,
boxShadow: `${token.boxShadow}`,
[`&-item`]: {
display: `flex`,
alignItems: `center`,
minWidth: `120px`,
margin: 0,
padding: `${dropdownStyle.dropdownVerticalPadding} ${token.paddingSM}px`,
overflow: `hidden`,
color:` ${token.colorText}`,
fontWeight: `normal`,
fontSize:` ${token.fontSize}px`,
lineHeight: `${token.lineHeight} `,
whiteSpace: `nowrap`,
textOverflow: `ellipsis`,
cursor: `pointer`,
transition: `all 0.3s`,
[` > span`] :{
flex: 1,
whiteSpace: `nowrap`,
},
[` &-remove `]:{
flex: `none`,
marginLeft:` ${token.marginSM}px`,
color:` ${token.colorTextSecondary}`,
fontSize: `${token.fontSizeSM}px`,
background: `transparent`,
border: 0,
cursor: `pointer`,
[` &:hover `]:{
color:`${token.colorInfoHover}`,
}
},
[`&:hover `]:{
background:` ${dropdownStyle.itemHoverBg}`,
},
[` &-disabled `]:{
[` &,
&:hover`]: {
color:` ${token.colorTextDisabled}`,
background: `transparent`,
cursor: `not-allowed`,
}
}
}
}
}}

View File

@ -0,0 +1,902 @@
import { CSSObject } from '../../_util/cssinjs';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { genFocusStyle, resetComponent, textEllipsis } from '../../_style';
import genMotionStyle from './motion';
export interface ComponentToken {
zIndexPopup: number;
}
export interface TabsToken extends FullToken<'Tabs'> {
tabsCardHorizontalPadding: string;
tabsCardHeight: number;
tabsCardGutter: number;
tabsHoverColor: string;
tabsActiveColor: string;
tabsHorizontalGutter: number;
tabsCardHeadBackground: string;
dropdownEdgeChildVerticalPadding: number;
tabsNavWrapPseudoWidth: number;
tabsActiveTextShadow: string;
tabsDropdownHeight: number;
tabsDropdownWidth: number;
}
const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
const {
componentCls,
tabsCardHorizontalPadding,
tabsCardHeadBackground,
tabsCardGutter,
colorSplit,
} = token;
return {
[`${componentCls}-card`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
[`${componentCls}-tab`]: {
margin: 0,
padding: tabsCardHorizontalPadding,
background: tabsCardHeadBackground,
border: `${token.lineWidth}px ${token.lineType} ${colorSplit}`,
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
},
[`${componentCls}-tab-active`]: {
color: token.colorPrimary,
background: token.colorBgContainer,
},
[`${componentCls}-ink-bar`]: {
visibility: 'hidden',
},
},
// ========================== Top & Bottom ==========================
[`&${componentCls}-top, &${componentCls}-bottom`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
[`${componentCls}-tab + ${componentCls}-tab`]: {
marginLeft: {
_skip_check_: true,
value: `${tabsCardGutter}px`,
},
},
},
},
[`&${componentCls}-top`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
[`${componentCls}-tab`]: {
borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
},
[`${componentCls}-tab-active`]: {
borderBottomColor: token.colorBgContainer,
},
},
},
[`&${componentCls}-bottom`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
[`${componentCls}-tab`]: {
borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`,
},
[`${componentCls}-tab-active`]: {
borderTopColor: token.colorBgContainer,
},
},
},
// ========================== Left & Right ==========================
[`&${componentCls}-left, &${componentCls}-right`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
[`${componentCls}-tab + ${componentCls}-tab`]: {
marginTop: `${tabsCardGutter}px`,
},
},
},
[`&${componentCls}-left`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
[`${componentCls}-tab`]: {
borderRadius: {
_skip_check_: true,
value: `${token.borderRadiusLG}px 0 0 ${token.borderRadiusLG}px`,
},
},
[`${componentCls}-tab-active`]: {
borderRightColor: {
_skip_check_: true,
value: token.colorBgContainer,
},
},
},
},
[`&${componentCls}-right`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
[`${componentCls}-tab`]: {
borderRadius: {
_skip_check_: true,
value: `0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px 0`,
},
},
[`${componentCls}-tab-active`]: {
borderLeftColor: {
_skip_check_: true,
value: token.colorBgContainer,
},
},
},
},
},
};
};
const genDropdownStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
const { componentCls, tabsHoverColor, dropdownEdgeChildVerticalPadding } = token;
return {
[`${componentCls}-dropdown`]: {
...resetComponent(token),
position: 'absolute',
top: -9999,
left: {
_skip_check_: true,
value: -9999,
},
zIndex: token.zIndexPopup,
display: 'block',
'&-hidden': {
display: 'none',
},
[`${componentCls}-dropdown-menu`]: {
maxHeight: token.tabsDropdownHeight,
margin: 0,
padding: `${dropdownEdgeChildVerticalPadding}px 0`,
overflowX: 'hidden',
overflowY: 'auto',
textAlign: {
_skip_check_: true,
value: 'left',
},
listStyleType: 'none',
backgroundColor: token.colorBgContainer,
backgroundClip: 'padding-box',
borderRadius: token.borderRadiusLG,
outline: 'none',
boxShadow: token.boxShadowSecondary,
'&-item': {
...textEllipsis,
display: 'flex',
alignItems: 'center',
minWidth: token.tabsDropdownWidth,
margin: 0,
padding: `${token.paddingXXS}px ${token.paddingSM}px`,
color: token.colorText,
fontWeight: 'normal',
fontSize: token.fontSize,
lineHeight: token.lineHeight,
cursor: 'pointer',
transition: `all ${token.motionDurationSlow}`,
'> span': {
flex: 1,
whiteSpace: 'nowrap',
},
'&-remove': {
flex: 'none',
marginLeft: {
_skip_check_: true,
value: token.marginSM,
},
color: token.colorTextDescription,
fontSize: token.fontSizeSM,
background: 'transparent',
border: 0,
cursor: 'pointer',
'&:hover': {
color: tabsHoverColor,
},
},
'&:hover': {
background: token.controlItemBgHover,
},
'&-disabled': {
'&, &:hover': {
color: token.colorTextDisabled,
background: 'transparent',
cursor: 'not-allowed',
},
},
},
},
},
};
};
const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
const { componentCls, margin, colorSplit } = token;
return {
// ========================== Top & Bottom ==========================
[`${componentCls}-top, ${componentCls}-bottom`]: {
flexDirection: 'column',
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
margin: `0 0 ${margin}px 0`,
'&::before': {
position: 'absolute',
right: {
_skip_check_: true,
value: 0,
},
left: {
_skip_check_: true,
value: 0,
},
borderBottom: `${token.lineWidth}px ${token.lineType} ${colorSplit}`,
content: "''",
},
[`${componentCls}-ink-bar`]: {
height: token.lineWidthBold,
'&-animated': {
transition: `width ${token.motionDurationSlow}, left ${token.motionDurationSlow},
right ${token.motionDurationSlow}`,
},
},
[`${componentCls}-nav-wrap`]: {
'&::before, &::after': {
top: 0,
bottom: 0,
width: token.controlHeight,
},
'&::before': {
left: {
_skip_check_: true,
value: 0,
},
boxShadow: token.boxShadowTabsOverflowLeft,
},
'&::after': {
right: {
_skip_check_: true,
value: 0,
},
boxShadow: token.boxShadowTabsOverflowRight,
},
[`&${componentCls}-nav-wrap-ping-left::before`]: {
opacity: 1,
},
[`&${componentCls}-nav-wrap-ping-right::after`]: {
opacity: 1,
},
},
},
},
[`${componentCls}-top`]: {
[`> ${componentCls}-nav,
> div > ${componentCls}-nav`]: {
'&::before': {
bottom: 0,
},
[`${componentCls}-ink-bar`]: {
bottom: 0,
},
},
},
[`${componentCls}-bottom`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
order: 1,
marginTop: `${margin}px`,
marginBottom: 0,
'&::before': {
top: 0,
},
[`${componentCls}-ink-bar`]: {
top: 0,
},
},
[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
order: 0,
},
},
// ========================== Left & Right ==========================
[`${componentCls}-left, ${componentCls}-right`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
flexDirection: 'column',
minWidth: token.controlHeight * 1.25,
// >>>>>>>>>>> Tab
[`${componentCls}-tab`]: {
padding: `${token.paddingXS}px ${token.paddingLG}px`,
textAlign: 'center',
},
[`${componentCls}-tab + ${componentCls}-tab`]: {
margin: `${token.margin}px 0 0 0`,
},
// >>>>>>>>>>> Nav
[`${componentCls}-nav-wrap`]: {
flexDirection: 'column',
'&::before, &::after': {
right: {
_skip_check_: true,
value: 0,
},
left: {
_skip_check_: true,
value: 0,
},
height: token.controlHeight,
},
'&::before': {
top: 0,
boxShadow: token.boxShadowTabsOverflowTop,
},
'&::after': {
bottom: 0,
boxShadow: token.boxShadowTabsOverflowBottom,
},
[`&${componentCls}-nav-wrap-ping-top::before`]: {
opacity: 1,
},
[`&${componentCls}-nav-wrap-ping-bottom::after`]: {
opacity: 1,
},
},
// >>>>>>>>>>> Ink Bar
[`${componentCls}-ink-bar`]: {
width: token.lineWidthBold,
'&-animated': {
transition: `height ${token.motionDurationSlow}, top ${token.motionDurationSlow}`,
},
},
[`${componentCls}-nav-list, ${componentCls}-nav-operations`]: {
flex: '1 0 auto', // fix safari scroll problem
flexDirection: 'column',
},
},
},
[`${componentCls}-left`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
[`${componentCls}-ink-bar`]: {
right: {
_skip_check_: true,
value: 0,
},
},
},
[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
marginLeft: {
_skip_check_: true,
value: `-${token.lineWidth}px`,
},
borderLeft: {
_skip_check_: true,
value: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
},
[`> ${componentCls}-content > ${componentCls}-tabpane`]: {
paddingLeft: {
_skip_check_: true,
value: token.paddingLG,
},
},
},
},
[`${componentCls}-right`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
order: 1,
[`${componentCls}-ink-bar`]: {
left: {
_skip_check_: true,
value: 0,
},
},
},
[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
order: 0,
marginRight: {
_skip_check_: true,
value: -token.lineWidth,
},
borderRight: {
_skip_check_: true,
value: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
},
[`> ${componentCls}-content > ${componentCls}-tabpane`]: {
paddingRight: {
_skip_check_: true,
value: token.paddingLG,
},
},
},
},
};
};
const genSizeStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
const { componentCls, padding } = token;
return {
[componentCls]: {
'&-small': {
[`> ${componentCls}-nav`]: {
[`${componentCls}-tab`]: {
padding: `${token.paddingXS}px 0`,
fontSize: token.fontSize,
},
},
},
'&-large': {
[`> ${componentCls}-nav`]: {
[`${componentCls}-tab`]: {
padding: `${padding}px 0`,
fontSize: token.fontSizeLG,
},
},
},
},
[`${componentCls}-card`]: {
[`&${componentCls}-small`]: {
[`> ${componentCls}-nav`]: {
[`${componentCls}-tab`]: {
padding: `${token.paddingXXS * 1.5}px ${padding}px`,
},
},
[`&${componentCls}-bottom`]: {
[`> ${componentCls}-nav ${componentCls}-tab`]: {
borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`,
},
},
[`&${componentCls}-top`]: {
[`> ${componentCls}-nav ${componentCls}-tab`]: {
borderRadius: `${token.borderRadius}px ${token.borderRadius}px 0 0`,
},
},
[`&${componentCls}-right`]: {
[`> ${componentCls}-nav ${componentCls}-tab`]: {
borderRadius: {
_skip_check_: true,
value: `0 ${token.borderRadius}px ${token.borderRadius}px 0`,
},
},
},
[`&${componentCls}-left`]: {
[`> ${componentCls}-nav ${componentCls}-tab`]: {
borderRadius: {
_skip_check_: true,
value: `${token.borderRadius}px 0 0 ${token.borderRadius}px`,
},
},
},
},
[`&${componentCls}-large`]: {
[`> ${componentCls}-nav`]: {
[`${componentCls}-tab`]: {
padding: `${token.paddingXS}px ${padding}px ${token.paddingXXS * 1.5}px`,
},
},
},
},
};
};
const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
const { componentCls, tabsActiveColor, tabsHoverColor, iconCls, tabsHorizontalGutter } = token;
const tabCls = `${componentCls}-tab`;
return {
[tabCls]: {
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
padding: `${token.paddingSM}px 0`,
fontSize: `${token.fontSize}px`,
background: 'transparent',
border: 0,
outline: 'none',
cursor: 'pointer',
'&-btn, &-remove': {
'&:focus:not(:focus-visible), &:active': {
color: tabsActiveColor,
},
...genFocusStyle(token),
},
'&-btn': {
outline: 'none',
transition: 'all 0.3s',
},
'&-remove': {
flex: 'none',
marginRight: {
_skip_check_: true,
value: -token.marginXXS,
},
marginLeft: {
_skip_check_: true,
value: token.marginXS,
},
color: token.colorTextDescription,
fontSize: token.fontSizeSM,
background: 'transparent',
border: 'none',
outline: 'none',
cursor: 'pointer',
transition: `all ${token.motionDurationSlow}`,
'&:hover': {
color: token.colorTextHeading,
},
},
'&:hover': {
color: tabsHoverColor,
},
[`&${tabCls}-active ${tabCls}-btn`]: {
color: token.colorPrimary,
textShadow: token.tabsActiveTextShadow,
},
[`&${tabCls}-disabled`]: {
color: token.colorTextDisabled,
cursor: 'not-allowed',
},
[`&${tabCls}-disabled ${tabCls}-btn, &${tabCls}-disabled ${componentCls}-remove`]: {
'&:focus, &:active': {
color: token.colorTextDisabled,
},
},
[`& ${tabCls}-remove ${iconCls}`]: {
margin: 0,
},
[iconCls]: {
marginRight: {
_skip_check_: true,
value: token.marginSM,
},
},
},
[`${tabCls} + ${tabCls}`]: {
margin: {
_skip_check_: true,
value: `0 0 0 ${tabsHorizontalGutter}px`,
},
},
};
};
const genRtlStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
const { componentCls, tabsHorizontalGutter, iconCls, tabsCardGutter } = token;
const rtlCls = `${componentCls}-rtl`;
return {
[rtlCls]: {
direction: 'rtl',
[`${componentCls}-nav`]: {
[`${componentCls}-tab`]: {
margin: {
_skip_check_: true,
value: `0 0 0 ${tabsHorizontalGutter}px`,
},
[`${componentCls}-tab:last-of-type`]: {
marginLeft: {
_skip_check_: true,
value: 0,
},
},
[iconCls]: {
marginRight: {
_skip_check_: true,
value: 0,
},
marginLeft: {
_skip_check_: true,
value: `${token.marginSM}px`,
},
},
[`${componentCls}-tab-remove`]: {
marginRight: {
_skip_check_: true,
value: `${token.marginXS}px`,
},
marginLeft: {
_skip_check_: true,
value: `-${token.marginXXS}px`,
},
[iconCls]: {
margin: 0,
},
},
},
},
[`&${componentCls}-left`]: {
[`> ${componentCls}-nav`]: {
order: 1,
},
[`> ${componentCls}-content-holder`]: {
order: 0,
},
},
[`&${componentCls}-right`]: {
[`> ${componentCls}-nav`]: {
order: 0,
},
[`> ${componentCls}-content-holder`]: {
order: 1,
},
},
// ====================== Card ======================
[`&${componentCls}-card${componentCls}-top, &${componentCls}-card${componentCls}-bottom`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
[`${componentCls}-tab + ${componentCls}-tab`]: {
marginRight: {
_skip_check_: true,
value: `${tabsCardGutter}px`,
},
marginLeft: { _skip_check_: true, value: 0 },
},
},
},
},
[`${componentCls}-dropdown-rtl`]: {
direction: 'rtl',
},
[`${componentCls}-menu-item`]: {
[`${componentCls}-dropdown-rtl`]: {
textAlign: {
_skip_check_: true,
value: 'right',
},
},
},
};
};
const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
const {
componentCls,
tabsCardHorizontalPadding,
tabsCardHeight,
tabsCardGutter,
tabsHoverColor,
tabsActiveColor,
colorSplit,
} = token;
return {
[componentCls]: {
...resetComponent(token),
display: 'flex',
// ========================== Navigation ==========================
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
position: 'relative',
display: 'flex',
flex: 'none',
alignItems: 'center',
[`${componentCls}-nav-wrap`]: {
position: 'relative',
display: 'flex',
flex: 'auto',
alignSelf: 'stretch',
overflow: 'hidden',
whiteSpace: 'nowrap',
transform: 'translate(0)', // Fix chrome render bug
// >>>>> Ping shadow
'&::before, &::after': {
position: 'absolute',
zIndex: 1,
opacity: 0,
transition: `opacity ${token.motionDurationSlow}`,
content: "''",
pointerEvents: 'none',
},
},
[`${componentCls}-nav-list`]: {
position: 'relative',
display: 'flex',
transition: `opacity ${token.motionDurationSlow}`,
},
// >>>>>>>> Operations
[`${componentCls}-nav-operations`]: {
display: 'flex',
alignSelf: 'stretch',
},
[`${componentCls}-nav-operations-hidden`]: {
position: 'absolute',
visibility: 'hidden',
pointerEvents: 'none',
},
[`${componentCls}-nav-more`]: {
position: 'relative',
padding: tabsCardHorizontalPadding,
background: 'transparent',
border: 0,
'&::after': {
position: 'absolute',
right: {
_skip_check_: true,
value: 0,
},
bottom: 0,
left: {
_skip_check_: true,
value: 0,
},
height: token.controlHeightLG / 8,
transform: 'translateY(100%)',
content: "''",
},
},
[`${componentCls}-nav-add`]: {
minWidth: `${tabsCardHeight}px`,
marginLeft: {
_skip_check_: true,
value: `${tabsCardGutter}px`,
},
padding: `0 ${token.paddingXS}px`,
background: 'transparent',
border: `${token.lineWidth}px ${token.lineType} ${colorSplit}`,
borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
outline: 'none',
cursor: 'pointer',
color: token.colorText,
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
'&:hover': {
color: tabsHoverColor,
},
'&:active, &:focus:not(:focus-visible)': {
color: tabsActiveColor,
},
...genFocusStyle(token),
},
},
[`${componentCls}-extra-content`]: {
flex: 'none',
},
// ============================ InkBar ============================
[`${componentCls}-ink-bar`]: {
position: 'absolute',
background: token.colorPrimary,
pointerEvents: 'none',
},
// ============================= Tabs =============================
...genTabStyle(token),
// =========================== TabPanes ===========================
[`${componentCls}-content`]: {
position: 'relative',
width: '100%',
},
[`${componentCls}-content-holder`]: {
flex: 'auto',
minWidth: 0,
minHeight: 0,
},
[`${componentCls}-tabpane`]: {
outline: 'none',
'&-hidden': {
display: 'none',
},
},
},
[`${componentCls}-centered`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
[`${componentCls}-nav-wrap`]: {
[`&:not([class*='${componentCls}-nav-wrap-ping'])`]: {
justifyContent: 'center',
},
},
},
},
};
};
// ============================== Export ==============================
export default genComponentStyleHook(
'Tabs',
token => {
const tabsCardHeight = token.controlHeightLG;
const tabsToken = mergeToken<TabsToken>(token, {
tabsHoverColor: token.colorPrimaryHover,
tabsActiveColor: token.colorPrimaryActive,
tabsCardHorizontalPadding: `${
(tabsCardHeight - Math.round(token.fontSize * token.lineHeight)) / 2 - token.lineWidth
}px ${token.padding}px`,
tabsCardHeight,
tabsCardGutter: token.marginXXS / 2,
tabsHorizontalGutter: 32, // Fixed Value
tabsCardHeadBackground: token.colorFillAlter,
dropdownEdgeChildVerticalPadding: token.paddingXXS,
tabsActiveTextShadow: '0 0 0.25px currentcolor',
tabsDropdownHeight: 200,
tabsDropdownWidth: 120,
});
return [
genSizeStyle(tabsToken),
genRtlStyle(tabsToken),
genPositionStyle(tabsToken),
genDropdownStyle(tabsToken),
genCardStyle(tabsToken),
genTabsStyle(tabsToken),
genMotionStyle(tabsToken),
];
},
token => ({
zIndexPopup: token.zIndexPopupBase + 50,
}),
);

View File

@ -1,258 +0,0 @@
// import '../../style/index.less';
// import './index.less';
import type { CSSObject } from '../../_util/cssinjs';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { resetComponent, clearFix } from '../../_style';
import Token from 'markdown-it/lib/token';
import { genTabsPositionStyle } from './position';
import { genTabsSizeStyle } from './size';
import { genRtlStyle } from './rtl';
import { genTabsDropdownStyle } from './dropdown';
import { genTabscardStyle } from './card';
import {tabsCardStyle } from './card'
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {}
interface tabsToken extends FullToken<'Tabs'> {
tabsCardHeight: string;
tabsCardGutter: string;
tabsHorizontalMarginRtl: string;
}
// ============================== Shared ==============================
export const genTabsSmallStyle = (token: tabsToken): CSSObject => {
const { componentCls } = token;
return {
[componentCls]: {
...genTabsSizeStyle(token),
...genTabsPositionStyle(token),
...resetComponent(token),
display: 'flex',
// ========================== Navigation ==========================
[`&-card`]: {
...genTabscardStyle(token),
},
[`&-rtl`]: {
...genRtlStyle(token),
},
[`&-dropdown`]: {
...genTabsDropdownStyle(token),
},
[`${componentCls}-nav,
div > ${componentCls}-nav`]: {
position: 'relative',
display: 'flex',
flex: 'none',
alignItems: 'center',
[`${componentCls}-nav-wrap`]: {
position: 'relative',
display: 'flex',
flex: 'auto',
alignSelf: 'stretch',
overflow: 'hidden',
whiteSpace: 'nowrap',
transform: 'translate(0)', // Fix chrome render bug
// >>>>> Ping shadow
[`&::before ,
&::after `]: {
position: 'absolute',
zIndex: 1,
opacity: 0,
transition: `opacity ${token.motionDurationSlow}`,
content: '""',
pointerEvents: 'none',
},
},
[`${componentCls}-nav-list`]: {
position: 'relative',
display: 'flex',
transition: `transform ${token.motionDurationSlow}`,
},
// >>>>>>>> Operations
[`${componentCls}-nav-operations`]: {
display: 'flex',
alignSelf: 'stretch',
[`&-hidden`]: {
position: 'absolute',
visibility: 'hidden',
pointerEvents: 'none',
},
},
[`${componentCls}-nav-more`]: {
position: 'relative',
padding: `${token.paddingXS}px ${token.padding}px`,
background: 'transparent',
border: 0,
[`&::after`]: {
position: 'absolute',
right: 0,
bottom: 0,
left: 0,
height: '5px',
transform: 'translateY(100%)',
content: '""',
},
},
[`${componentCls}-nav-add`]: {
minWidth: `${token.tabsCardHeight}`,
marginLeft: `${token.tabsCardGutter}`,
padding: `0 ${token.paddingXS}px `,
background: `${token.colorFillAlter}`,
border: `${token.lineWidth}px ${token.colorBorder} ${token.lineType} `,
borderRadius: ` ${token.borderRadius}e ${token.borderRadius} 0 0`,
outline: 'none',
cursor: 'pointer',
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut} `,
[` &:hover `]: {
color: `${token.colorPrimaryActive}`,
},
[` &:active,
&:focus`]: {
color: `${token.colorPrimaryActive}`,
},
},
},
[`${componentCls}-extra-content `]: {
flex: 'none',
},
[`&-centered`]: {
[`${componentCls}-nav,
div > ${componentCls}-nav`]: {
[`${componentCls}-nav-wrap`]: {
[`&:not([class*='@:${componentCls}-nav-wrap-ping'])`]: {
justifyContent: 'center',
},
},
},
},
// ============================ InkBar ============================
[`${componentCls}-ink-bar`]: {
position: 'absolute',
background: `${token.colorPrimary}`,
pointerEvents: 'none',
},
// ============================= Tabs =============================
[`${componentCls}-tab `]: {
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
padding: `${token.paddingSM}px 0`,
fontSize: `${token.fontSize}px`,
background: 'transparent',
border: 0,
outline: 'none',
cursor: 'pointer',
[`&-btn,
&-remove`]: {
[` &:focus,
&:active `]: {
color: `${token.colorInfoActive}`,
},
},
[` &-btn `]: {
outline: 'none',
transition: `all 0.3s`,
},
[`&-remove `]: {
flex: 'none',
marginRight: `-${token.marginXXS}px`,
marginLeft: `${tabsCardStyle.tabsCardGutter}`,
color: `${token.colorTextSecondary} `,
fontSize: ` ${token.fontSizeSM}px`,
background: 'transparent',
border: 'none',
outline: 'none',
cursor: 'pointer',
transition: `all ${token.motionDurationSlow} `,
[` &:hover `]: {
color: `${token.colorTextHeading} `,
},
},
[` &:hover `]: {
color: `${token.colorLinkHover}`,
},
[`${componentCls}-active &-btn `]: {
color: `${token.colorHighlight}`,
textShadow: '0 0 0.25px currentcolor',
},
[`&-disabled `]: {
color: `${token.colorTextDisabled}`,
cursor: 'not-allowed',
},
[`&-disabled &-btn,
&-disabled &-remove`]: {
[` &:focus,
&:active `]: {
color: `${token.colorTextDisabled}`,
},
},
[` &-remove ${token.iconCls}`]: {
margin: 0,
},
[` ${token.iconCls} `]: {
marginRight: `${token.marginSM}px`,
},
},
[`${componentCls}-tab + ${componentCls}-tab `]: {
margin: `${token.tabsHorizontalMarginRtl}`,
},
// =========================== TabPanes ===========================
[`${componentCls}-content`]: {
[`&-holder`]: {
flex: 'auto',
minWidth: 0,
minHeight: 0,
},
display: 'flex',
width: '100%',
[`${componentCls}-animated`]: {
transition: `margin ${token.motionDurationSlow}`,
},
},
[` ${componentCls}-tabpane `]: {
flex: 'none',
width: ' 100%',
outline: 'none',
},
},
};
};
// ============================== Export ==============================
export default genComponentStyleHook(
'Tabs',
token => {
const tabsToken = mergeToken<tabsToken>(token, {
tabsCardHeight: '40px',
tabsCardGutter: '5px',
tabsHorizontalMarginRtl: '0 0 0 32px',
});
return [genTabsSmallStyle(tabsToken)];
},
{},
);

View File

@ -0,0 +1,46 @@
import type { TabsToken } from '.';
import { initSlideMotion } from '../../_style/motion';
import type { GenerateStyle } from '../../theme/internal';
const genMotionStyle: GenerateStyle<TabsToken> = token => {
const { componentCls, motionDurationSlow } = token;
return [
{
[componentCls]: {
[`${componentCls}-switch`]: {
'&-appear, &-enter': {
transition: 'none',
'&-start': {
opacity: 0,
},
'&-active': {
opacity: 1,
transition: `opacity ${motionDurationSlow}`,
},
},
'&-leave': {
position: 'absolute',
transition: 'none',
inset: 0,
'&-start': {
opacity: 1,
},
'&-active': {
opacity: 0,
transition: `opacity ${motionDurationSlow}`,
},
},
},
},
},
// Follow code may reuse in other components
[initSlideMotion(token, 'slide-up'), initSlideMotion(token, 'slide-down')],
];
};
export default genMotionStyle;

View File

@ -1,191 +0,0 @@
import type { CSSObject } from '../../_util/cssinjs';
export const genTabsPositionStyle = (token): CSSObject => {
const { componentCls } = token;
return {
[`&-top,
&-bottom`]: {
flexDirection: 'column',
[`${componentCls}-nav, div >${componentCls}-nav`]: {
margin: ` 0 0 ${token.margin}px `,
[`&::before`]: {
position: 'absolute',
right:0,
left: 0,
borderBottom: `${token.lineWidth}px ${token.colorBorder} ${token.lineType} `,
content: '""',
},
[`${componentCls}-ink-bar`]: {
height: ' 2px',
[`&-animated`]: {
transition: `width ${token.motionDurationSlow} , left ${token.motionDurationSlow},
right `,
},
},
[`${componentCls}-nav-wrap`]: {
[`&::before,
&::after`]: {
top: 0,
bottom: 0,
width:'30px',
},
[` &::before`]: {
left: 0,
boxShadow: `${token.boxShadowTabsOverflowBottom}`,
},
[` &::after`]: {
right: 0,
boxShadow: `${token.boxShadowTabsOverflowRight}`,
},
[`&${componentCls}-nav-wrap-ping-left::before`]: {
opacity: 1,
},
[`&${componentCls}-nav-wrap-ping-right::after`]: {
opacity: 1,
},
},
},
},
[`&-top`]: {
[`${componentCls}-nav,
div >${componentCls}-nav`]: {
[`&::before`]: {
bottom: 0,
},
[`${componentCls}-ink-bar`]: {
bottom: 0,
},
},
},
[`&-bottom`]: {
[`${componentCls}-nav,
div >${componentCls}-nav`]: {
order: 1,
marginTop: ` ${token.margin}px`,
marginBottom: 0,
[` &::before`]: {
top: 0,
},
[`${componentCls}-ink-bar`]: {
top: 0,
},
},
[`${componentCls}-content-holder,
div >${componentCls}-content-holder`]: {
order: 0,
},
},
// ========================== Left & Right ==========================
[`&-left,
&-right`]: {
[`${componentCls}-nav, div>${componentCls}-nav`]: {
flexDirection: 'column',
minWidth: '50px',
// >>>>>>>>>>> Tab
[`${componentCls}-tab`]: {
padding: ` ${token.padding}px`,
textAlign: 'center',
},
[`${componentCls}-tab + ${componentCls}-tab`]: {
margin: ` ${token.margin}px 0 0 0`,
},
// >>>>>>>>>>> Nav
[`${componentCls}-nav-wrap`]: {
flexDirection: 'column',
[`&::before,
&::after`]: {
right: 0,
left: 0,
height: '30px',
},
[`&::before`]: {
top: 0,
boxShadow: `${token.boxShadowTabsOverflowTop}`,
},
[`&::after`]: {
bottom: 0,
boxShadow: `${token.boxShadowTabsOverflowBottom}`,
},
[`&${componentCls}-nav-wrap-ping-top::before`]: {
opacity: 1,
},
[`&${componentCls}-nav-wrap-ping-bottom::after`]: {
opacity: 1,
},
},
// >>>>>>>>>>> Ink Bar
[`${componentCls}-ink-bar`]: {
width: `2px`,
[`&-animated`]: {
transition: `height ${token.motionDurationSlow}, top ${token.motionDurationSlow}`,
},
},
[`${componentCls}-nav-list,
${componentCls}-nav-operations`]: {
// color: '#fff',
flex: `1 0 auto`, // fix safari scroll problem
flexDirection: `column`,
},
},
},
[`&-left`]: {
[`${componentCls}-nav,
div >${componentCls}-nav`]: {
[`${componentCls}-ink-bar`]: {
right: 0,
},
},
[`${componentCls}-content-holder,
div >&-content-holder`]: {
marginLeft: `-${token.lineWidth}px`,
borderLeft: `${token.lineWidth}px ${token.colorBorder} ${token.lineType} `,
[` ${componentCls}-content > ${componentCls}-tabpane`]: {
paddingLeft: `${token.paddingLG}px`,
},
},
},
[`&-right`]: {
[` ${componentCls}-nav,
div >${componentCls}-nav`]: {
order: 1,
[`${componentCls}-ink-bar`]: {
left: 0,
},
},
[`${componentCls}-content-holder,
div >${componentCls}-content-holder`]: {
order: 0,
marginLeft: ` -${token.lineWidth}px`,
borderRight: `${token.lineWidth}px ${token.colorBorder} ${token.lineType} `,
[`${componentCls}-content >${componentCls}-tabpane`]: {
paddingLeft: ` ${token.paddingLG}px`,
},
},
},
};
};

View File

@ -1,83 +0,0 @@
import type { CSSObject } from '../../_util/cssinjs';
import {tabsCardStyle } from './card'
export const genRtlStyle = (token): CSSObject => {
const { componentCls } = token;
return {
[`&-rtl `]: {
direction: 'rtl',
[`${componentCls}-nav `]: {
[` ${componentCls}-tab `]: {
margin: ` ${token.tabsHorizontalMarginRtl}`,
[` &:last-of-type`]: {
marginLeft: 0,
},
[` ${token.iconCls}`]: {
marginRight: 0,
marginLeft: `${token.marginSM}`,
},
[` ${componentCls}-tab-remove `]: {
marginRight: `${token.marginXS}`,
marginLeft: `${token.marginXXS}`,
[` ${token.iconCls} ${token.ico}`]: {
margin: 0,
},
},
},
},
[`& ${componentCls}-left`]: {
[`${componentCls}-nav`]: {
order: 1,
},
[`${componentCls}-content-holder `]: {
order: 0,
},
},
[` & ${componentCls}-right `]: {
[`${componentCls}-nav `]: {
order: 0,
},
[`${componentCls}-content-holder`]: {
order: 1,
},
},
},
// ====================== Card ======================
[`&-card`]: {
[` & ${componentCls}-top,
& ${componentCls}-bottom`]: {
[` ${componentCls}-nav,
div >${componentCls}-nav `]: {
[` ${componentCls}-tab +${componentCls}-tab`]: {
[` ${componentCls}-rtl& `]: {
marginRight: `${tabsCardStyle.tabsCardGutter}`,
marginLeft: 0,
},
},
[` ${componentCls}-nav-add`]: {
[` ${componentCls}-rtl& `]: {
marginRight: `${tabsCardStyle.tabsCardGutter}`,
marginLeft: 0,
},
},
},
},
},
[` ${componentCls}-dropdown `]: {
[` &-rtl `]: {
direction: 'rtl',
},
[` &-menu-item `]: {
[`${componentCls}-dropdown-rtl & `]: {
textAlign: 'right',
},
},
},
};
};

View File

@ -1,43 +0,0 @@
import type { CSSObject } from '../../_util/cssinjs';
export const genTabsSizeStyle = (token): CSSObject => {
const { componentCls } = token;
return {
[`&-small`]: {
[`${componentCls}-nav`]: {
[`${componentCls}-tab`]: {
padding: ` ${token.paddingXS}px 0`,
fontSize: ` ${token.fontSize}px`,
},
},
},
[`&-large`]: {
[`${componentCls}-nav `]: {
[` ${componentCls}-tab`]: {
padding: ` ${token.paddingLG}px 0`,
fontSize: ` ${token.fontSizeLG}px`,
},
},
},
[`&-card `]: {
[`& ${componentCls}-small `]: {
[`${componentCls}-nav`]: {
[` ${componentCls}-tab`]: {
padding: ` ${token.paddingSM}px`,
},
},
},
[`&-large`]: {
[` > ${componentCls}-nav `]: {
[`${componentCls}-tab`]: {
padding: ` ${token.paddingLG}px 0`,
},
},
},
},
};
};