tdesign-react/esm/style/web/components/tabs/_var.less

TDesign Component for React

// 组件变量
// 名称可按如下规则定义：
// <component>-[type]-[attrtype]-<attr>-[status]

// component:组件名，如button，
// type: 组件类型，如 button 的次要按钮（line）
// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
// attr: 属性名称，如color、height、radius等
// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等

// 如：@button-line-bg-color-hover
// 如：@button-line-height-s

// 默认选项卡
@tab-default-bg: @bg-color-container;
@tab-default-bg-hover: @bg-color-container-hover;
@tab-default-bg-active: @bg-color-container-active;

@tab-default-text: @text-color-secondary;
@tab-default-text-select: @brand-color;
@tab-default-text-disabled: @text-color-disabled;

@tab-default-icon: @text-color-secondary;
@tab-default-icon-select: @brand-color;
@tab-default-icon-disabled: @text-color-disabled;

@tab-default-stroke: @component-stroke;
@tab-default-bar-bg-color: @brand-color;
@tab-default-stroke-size: 3px;

// 卡片选项卡
@tab-card-bg: @bg-color-secondarycontainer;
@tab-card-bg-hover: @bg-color-secondarycontainer-hover;
@tab-card-bg-active: @bg-color-secondarycontainer-active;
@tab-card-bg-select: @bg-color-container;

@tab-card-text: @text-color-secondary;
@tab-card-text-select: @brand-color;
@tab-card-text-disabled: @text-color-disabled;

@tab-card-icon: @text-color-secondary;
@tab-card-icon-select: @text-color-primary;
@tab-card-icon-disabled: @text-color-disabled;

@tab-card-stroke: @component-stroke;

// 其他
@tab-height-middle: @comp-size-xxl;
@tab-height-large: @comp-size-xxxxl;
@tab-nav-item-wrapper-height: @comp-size-m;
@tab-nav-item-wrapper-height-large: @comp-size-xxl;
@tab-btn-width: 40px;
@tab-nav-item-margin-left: @comp-margin-s;
@tab-nav-item-margin-right: @comp-margin-s;
@tab-nav-item-wrapper-padding: 0 @comp-paddingLR-s;
@tab-nav-item-wrapper-padding-large: 0 @comp-paddingLR-m;
@tab-btn-remove-btn-margin-left: @comp-margin-s;
@tab-nav-card-nav-item-padding-right: @comp-paddingLR-l;
@tab-nav-card-nav-item-padding-left: @comp-paddingLR-l;
@tab-nav-card-nav-item-padding-right-large: @comp-paddingLR-xl;
@tab-nav-card-nav-item-padding-left-large: @comp-paddingLR-xl;

// 尺寸
@tab-icon-size: @font-size-l; // icon尺寸
@tab-nav-item-font: @font-body-large; // tab文本字体大小

// 圆角&边框
@tab-btn-border: 1px solid @tab-card-stroke; // 按钮边框
@tab-bar-operations-border: 1px solid @tab-card-stroke; // 卡片边框

// 动画&过度
@tab-nav-scroll-transform: translate(0); // 滚动栏滚动过度
@tab-btn-fade-transform-left: translateX(-50px); // 按钮过渡动画
@tab-btn-fade-transform-right: translateX(50px); // 按钮过渡动画
@tab-nav-warp-is-smooth-transform: transform @anim-duration-moderate
  @anim-time-fn-ease-out; // smooth 过渡动画
@tab-nav-item-transition: background-color @anim-time-fn-easing
  @anim-duration-base;
@tab-btn-remove-btn-transition: all .3s cubic-bezier(.645, .045, .355, 1); // 删除按钮动画过渡
@tab-btn-icon-close-transition: color @anim-time-fn-easing @anim-duration-base; // 关闭按钮过渡动画

// 阴影
@tab-bar-operations-btn-box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 5%); // 按钮阴影
@tab-bar-transition: all @anim-duration-moderate @anim-time-fn-easing; // 选项卡过渡动画
@tab-btn-box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, .05); // 按钮阴影
@tab-btn-text-shadow-active: 0 0 .3px currentcolor; // 按钮选中颜色 win系统兼容