@apdesign/web-react 1.0.0

package/es/Tabs/hook/useHeaderScroll.js

@@ -0,0 +1,86 @@
+import { useRef, useEffect } from 'react';
+import { on, off } from '../../_util/dom';
+export default function useHeaderScroll(props) {
+    var headerWrapperRef = props.headerWrapperRef, headerOffset = props.headerOffset, align = props.align, isScrollable = props.isScrollable, direction = props.direction, onScroll = props.onScroll;
+    function onOffset(offsetX, offsetY) {
+        var offset = 0;
+        if (direction === 'vertical') {
+            offset = headerOffset + offsetY;
+        }
+        else {
+            offset = align === 'left' ? headerOffset + offsetX : headerOffset - offsetX;
+        }
+        onScroll && onScroll(offset);
+    }
+    // wheel
+    var lastWheelDirectionRef = useRef('x');
+    function onWheel(e) {
+        if (!isScrollable)
+            return;
+        e.preventDefault();
+        var deltaX = e.deltaX, deltaY = e.deltaY;
+        var offset = 0;
+        var absX = Math.abs(deltaX);
+        var absY = Math.abs(deltaY);
+        if (absX === absY) {
+            offset = lastWheelDirectionRef.current === 'x' ? deltaX : deltaY;
+        }
+        else if (absX > absY) {
+            offset = deltaX;
+            lastWheelDirectionRef.current = 'x';
+        }
+        else {
+            offset = deltaY;
+            lastWheelDirectionRef.current = 'y';
+        }
+        onOffset(offset, offset);
+    }
+    // touch
+    var positionRef = useRef({
+        clientX: 0,
+        clientY: 0,
+    });
+    var getPosition = function (e) {
+        return e && e.touches && e.touches.length && e.touches[0];
+    };
+    var onTouchMove = function (e) {
+        if (e.cancelable)
+            e.preventDefault();
+        var position = getPosition(e);
+        if (!position)
+            return;
+        var _a = positionRef.current, clientX = _a.clientX, clientY = _a.clientY;
+        // 往右移动的距离
+        var offsetX = position.clientX - clientX;
+        // 往下移动的距离
+        var offsetY = position.clientY - clientY;
+        onOffset(-offsetX, -offsetY);
+    };
+    var onTouchMoveEnd = function () {
+        off(document.documentElement, 'touchmove', onTouchMove);
+        off(document.documentElement, 'touchend', onTouchMoveEnd);
+    };
+    var onTouchStart = function (e) {
+        if (!isScrollable)
+            return;
+        var position = getPosition(e);
+        if (!position)
+            return;
+        positionRef.current = {
+            clientX: position.clientX,
+            clientY: position.clientY,
+        };
+        on(document.documentElement, 'touchmove', onTouchMove, { passive: false });
+        on(window, 'touchend', onTouchMoveEnd, { passive: false });
+    };
+    var eventProxy = useRef(null);
+    eventProxy.current = { onWheel: onWheel, onTouchStart: onTouchStart };
+    useEffect(function () {
+        on(headerWrapperRef.current, 'wheel', function (e) {
+            eventProxy.current.onWheel(e);
+        }, { passive: false });
+        on(headerWrapperRef.current, 'touchstart', function (e) {
+            eventProxy.current.onTouchStart(e);
+        }, { passive: true });
+    }, [headerWrapperRef.current]);
+}

package/es/Tabs/index.d.ts

@@ -0,0 +1,4 @@
+import Tabs from './tabs';
+import { TabsProps, TabPaneProps } from './interface';
+export { TabsProps, TabPaneProps };
+export default Tabs;

package/es/Tabs/index.js

@@ -0,0 +1,2 @@
+import Tabs from './tabs';
+export default Tabs;

package/es/Tabs/interface.d.ts

@@ -0,0 +1,213 @@
+import { CSSProperties, ReactNode, ReactElement } from 'react';
+import TabHeader from './tab-header/index';
+/**
+ * @title Tabs
+ */
+export interface TabsProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    children?: ReactNode;
+    /**
+     * @zh 默认选中的标签选项卡，如不指定默认选择第一个
+     * @en The Tab selected by default. If not specified, the first one is selected
+     */
+    defaultActiveTab?: string;
+    /**
+     * @zh 当前选中的 tab 的 key
+     * @en The key of the currently selected tab
+     */
+    activeTab?: string;
+    /**
+     * @zh 是否开启过渡效果
+     * @en Whether to turn on the transition animation
+     */
+    animation?: boolean | {
+        tabPane?: boolean;
+        inkBar?: boolean;
+    };
+    /**
+     * @zh 选项卡位置
+     * @en Position of tabs
+     * @defaultValue top
+     */
+    tabPosition?: 'left' | 'right' | 'top' | 'bottom';
+    /**
+     * @zh 标签选项卡的方向是水平还是竖直，分别对应 `horizontal `和 `vertical`。** 注意： 已废弃，使用 tabPosition 替代。**
+     * @en The Direction of tabs. ** Warn: Please use `tabPosition` instead.**
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * @zh 有四个尺寸供选择，分别为`mini`, `small`, `default`, `large`
+     * @en Size of tabs
+     */
+    size?: 'mini' | 'small' | 'default' | 'large';
+    /**
+     * @zh 标签选项卡的类型
+     * @en Type of tabs
+     * @defaultValue line
+     */
+    type?: 'line' | 'card' | 'card-gutter' | 'text' | 'rounded' | 'capsule';
+    /**
+     * @zh 定制下划线尺寸
+     * @en custom the size of underline
+     * @version 2.54.0
+     */
+    inkBarSize?: {
+        width?: CSSProperties['width'];
+        height?: CSSProperties['height'];
+    };
+    /**
+     * @zh 选项卡头部是否存在水平边距。仅对 `type`等于 `line`、`text`类型的选项卡生效
+     * @en Whether there is a horizontal margin on the tab. It only effect when `type` is `line` or `text`
+     * @defaultValue true
+     * @version 2.6.0
+     */
+    headerPadding?: boolean;
+    /**
+     * @zh 标签页较多时候，选择滚动/下拉菜单形式展示 tab
+     * @en When there are too many tabs, select scroll or drop-down to display tabs
+     * @defaultValue scroll
+     */
+    overflow?: 'scroll' | 'dropdown';
+    /**
+     * @zh 是否允许增减标签。只在 `type` 为 `card` 或 `card-gutter` 时候生效。
+     * @en Whether to allow adding or subtracting tabs. It only effect when `type` is `card` or `card-gutter`.
+     */
+    editable?: boolean;
+    /**
+     * @zh 是否显示新增按钮（仅在`editable`为`true`时生效）
+     * @en Whether to show the new button(Only effect when `editable` is `true`)
+     * @defaultValue true
+     */
+    showAddButton?: boolean;
+    /**
+     * @zh 标签页头部 编辑/滚动/下拉 图标配置。对于不想展示的图标可以将其设置为`null`
+     * @en Tab header edit/scroll/dropdown icon configuration. You can set it to `null` for icons you don't want to display
+     * @version 2.15.0, `prev`,`next`,`dropdown` in `2.47.0`
+     */
+    icons?: {
+        add?: ReactNode;
+        delete?: ReactNode;
+        prev?: ReactNode;
+        next?: ReactNode;
+        dropdown?: ReactNode;
+    };
+    /**
+     * @zh 是否在标签增减后，自动进行滚动调整(`editable`为`true`时生效）
+     * @en Whether to automatically scroll to the selected label after the label is dynamically increased or decreased (only effective when `editable` is `true`)
+     * @defaultValue { add: true, delete: true }
+     * @version 2.25.0
+     */
+    scrollAfterEdit?: {
+        delete?: boolean;
+        add?: boolean;
+    };
+    /**
+     * @zh 显示在标签页右侧的附加
+     * @en Additional on the right side of the tab
+     */
+    extra?: ReactNode;
+    /**
+     * @zh 是否销毁隐藏标签页的节点, `TabPane` 的该属性优先级高于 `Tabs`。
+     * @en Whether to destroy the DOM structure in the TabPane when the tab is hidden. This attribute of `TabPane` has higher priority than `Tabs`.
+     */
+    destroyOnHide?: boolean;
+    /**
+     * @zh 设置为 `true` 时，将不会在组件挂载的时候渲染被隐藏的标签页。
+     * @en When set to `true`, hidden tabs will not be rendered when the component is mounted.
+     * @defaultValue true
+     */
+    lazyload?: boolean;
+    /**
+     * @zh 高度撑满容器，只在水平模式下生效。（默认的高度是又撑起的。）
+     * @en Height to fill the container, Only effective in horizontal mode.
+     */
+    justify?: boolean;
+    /**
+     * @zh 自定义删除按钮
+     * @en Custom delete button
+     * @version 2.16.0
+     */
+    deleteButton?: ReactNode;
+    /**
+     * @zh 自定义新增按钮
+     * @en Custom add button
+     * @version 2.16.0
+     */
+    addButton?: ReactNode;
+    /**
+     * @zh 被选中 tab 的滚动位置，默认 auto 即会将 activeTab 滚动到可见区域，但不会特意做位置调整
+     * @en The scroll position of the selected tab, the default auto will scroll the activeTab to the visible area, but will not adjust the position intentionally
+     * @version 2.25.0
+     * @defaultValue auto
+     */
+    scrollPosition?: 'start' | 'end' | 'center' | 'auto' | number;
+    /**
+     * @zh `activeTab` 改变的回调
+     * @en Callback when `activeTab` changed
+     */
+    onChange?: (key: string) => void;
+    /**
+     * @zh 点击选项卡的回调
+     * @en Callback when click Tab
+     */
+    onClickTab?: (key: string) => void;
+    /**
+     * @zh 点击新增 tab 按钮的回调
+     * @en Callback when click Add Button
+     */
+    onAddTab?: () => void;
+    /**
+     * @zh 点击删除按钮的回调
+     * @en Callback when click Delete Button
+     */
+    onDeleteTab?: (key: string) => void;
+    /**
+     * @zh 自定义选项卡头部
+     * @en Custom Tab Header
+     */
+    renderTabHeader?: (tabProps: TabsProps, DefaultTabHeader: typeof TabHeader) => ReactElement;
+    /**
+     * @zh 自定义单个选项卡头部
+     * @en Customize tab header
+     */
+    renderTabTitle?: (tabTitle: ReactNode, info: {
+        key: string | number;
+        isActive: boolean;
+        disabled: boolean;
+        editable: boolean;
+    }) => ReactNode;
+}
+/**
+ * @title Tabs.TabPane
+ */
+export interface TabPaneProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 选项卡的标题显示
+     * @en The title of Tab
+     */
+    title: string | ReactNode;
+    /**
+     * @zh
+     * 选项卡隐藏的时候是否销毁标签页内的DOM结构，优先级高于 `Tabs` 的 `destroyOnHide` 属性
+     * @en
+     * Whether to destroy the DOM structure in the TabPane when the tab is hidden.
+     * This option has priority over the `destroyOnHide` property of `Tabs`
+     */
+    destroyOnHide?: boolean;
+    /**
+     * @zh 是否禁用
+     * @en Whether the TabPane is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 动态增减标签页时是否允许关闭当前标签页
+     * @en Whether to allow the tab to be closed when `editable="true"`
+     */
+    closable?: boolean;
+    isActive?: boolean;
+    lazyload?: boolean;
+    children?: ReactNode;
+}

package/es/Tabs/interface.js

@@ -0,0 +1 @@
+export {};

package/es/Tabs/style/css.js

@@ -0,0 +1,3 @@
+import '../../style/index.css';
+import '../../Menu/style/css.js';
+import './index.css';

package/es/Tabs/style/index.css

@@ -0,0 +1 @@
+.arco-icon-hover.arco-tabs-icon-hover::before{width:16px;height:16px}.arco-tabs .arco-tabs-icon-hover{font-size:12px;color:var(--color-text-2);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.arco-tabs-dropdown-icon{font-size:12px;margin-left:6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.arco-tabs-close-icon{margin-left:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.arco-tabs-close-icon:focus-visible .arco-icon-hover::before{box-shadow:0 0 0 2px var(--color-primary-light-3)}.arco-tabs-add-icon{font-size:12px;display:inline-flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;justify-content:center;padding:0 8px}.arco-tabs-add-icon:focus-visible .arco-icon-hover::before{box-shadow:0 0 0 2px var(--color-primary-light-3)}.arco-tabs-add{position:relative}.arco-tabs-left-icon{margin-left:10px;margin-right:6px}.arco-tabs-right-icon{margin-right:10px;margin-left:6px}.arco-tabs-up-icon{margin-bottom:10px}.arco-tabs-down-icon{margin-top:10px}.arco-tabs .arco-tabs-nav-icon-disabled{cursor:not-allowed;color:var(--color-text-4)}.arco-tabs{position:relative;overflow:hidden}.arco-tabs-header-nav{position:relative}.arco-tabs-header-nav::before{content:'';clear:both;position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--color-neutral-3);display:block}.arco-tabs-header-nav-bottom::before{top:0}.arco-tabs-header-nav-bottom .arco-tabs-header-ink{top:0}.arco-tabs-header-nav-bottom .arco-tabs-header-ink .arco-tabs-header-ink-inner{bottom:unset;top:0}.arco-tabs-header-wrapper{display:flex;overflow:hidden;flex:1}.arco-tabs-header{position:relative;display:inline-block;transition:transform .2s cubic-bezier(.34,.69,.1,1);white-space:nowrap}.arco-tabs-header-extra{width:auto;display:flex;align-items:center;line-height:32px;flex-shrink:0}.arco-tabs-header-extra .arco-tabs-add-icon{padding-left:0}.arco-tabs-header-title{box-sizing:border-box;font-size:14px;cursor:pointer;color:var(--color-text-2);transition:color .2s cubic-bezier(0,0,1,1);display:inline-flex;align-items:center;line-height:1.5715;padding:4px 0}.arco-tabs-header-title-text{display:inline-block}.arco-tabs-header-title:hover{color:var(--color-text-2);font-weight:400}.arco-tabs-header-title-disabled,.arco-tabs-header-title-disabled:hover{color:var(--color-text-4);cursor:not-allowed}.arco-tabs-header-title-active,.arco-tabs-header-title-active:hover{color:rgb(var(--primary-6));font-weight:500}.arco-tabs-header-title-active.arco-tabs-header-title-disabled,.arco-tabs-header-title-active:hover.arco-tabs-header-title-disabled{color:var(--color-primary-light-3)}.arco-tabs-header-ink{position:absolute;bottom:0;right:initial;top:initial;height:2px;background-color:rgb(var(--primary-6));transition:left .2s cubic-bezier(.34,.69,.1,1),width .2s cubic-bezier(.34,.69,.1,1)}.arco-tabs-header-ink.arco-tabs-header-ink-no-animation{transition:none}.arco-tabs-header-ink.arco-tabs-header-ink-custom{background-color:transparent}.arco-tabs-header-ink.arco-tabs-header-ink-custom .arco-tabs-header-ink-inner{background-color:rgb(var(--primary-6));position:absolute;left:50%;bottom:0;width:100%;height:100%;transform:translateX(-50%)}.arco-tabs-header-ink-disabled{background-color:var(--color-primary-light-3)}.arco-tabs-header-nav-line .arco-tabs-header-extra{line-height:40px}.arco-tabs-header-nav-line .arco-tabs-header-title{line-height:1.5715;margin:0 16px;padding:8px 0}.arco-tabs-header-nav-line .arco-tabs-header-title-text{display:inline-block;position:relative;padding:1px 0}.arco-tabs-header-nav-line .arco-tabs-header-title-text::before{content:'';z-index:-1;opacity:1;transition:all .2s cubic-bezier(0,0,1,1);border-radius:var(--border-radius-small);position:absolute;top:0;bottom:0;left:-8px;right:-8px;background-color:transparent}.arco-tabs-header-nav-line .arco-tabs-header-title:hover .arco-tabs-header-title-text::before{background-color:var(--color-fill-2)}.arco-tabs-header-nav-line .arco-tabs-header-title:focus-visible .arco-tabs-header-title-text::before{box-shadow:inset 0 0 0 2px var(--color-primary-light-3)}.arco-tabs-header-nav-line .arco-tabs-header-title-active .arco-tabs-header-title-text::before,.arco-tabs-header-nav-line .arco-tabs-header-title-active:hover .arco-tabs-header-title-text::before{background-color:transparent}.arco-tabs-header-nav-line .arco-tabs-header-title-disabled .arco-tabs-header-title-text::before,.arco-tabs-header-nav-line .arco-tabs-header-title-disabled:hover .arco-tabs-header-title-text::before{opacity:0}.arco-tabs-header-nav-line.arco-tabs-header-nav-horizontal>.arco-tabs-header-scroll .arco-tabs-header-title:first-of-type{margin-left:16px}.arco-tabs-header-nav-line.arco-tabs-header-nav-horizontal .arco-tabs-header-no-padding>.arco-tabs-header-title:first-of-type,.arco-tabs-header-nav-text.arco-tabs-header-nav-horizontal .arco-tabs-header-no-padding>.arco-tabs-header-title:first-of-type{margin-left:0}.arco-tabs-header-nav-card .arco-tabs-header-title,.arco-tabs-header-nav-card-gutter .arco-tabs-header-title{font-size:14px;border:1px solid var(--color-neutral-3);transition:padding .2s cubic-bezier(0,0,1,1),color .2s cubic-bezier(0,0,1,1);padding:4px 16px}.arco-tabs-header-nav-card .arco-tabs-header-title:focus-visible,.arco-tabs-header-nav-card-gutter .arco-tabs-header-title:focus-visible{box-shadow:inset 0 0 0 2px var(--color-primary-light-3)}.arco-tabs-header-nav-card .arco-tabs-header-title-editable,.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-editable{padding-right:12px}.arco-tabs-header-nav-card .arco-tabs-header-title-editable:not(.arco-tabs-header-title-active):hover .arco-icon-hover:hover::before,.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-editable:not(.arco-tabs-header-title-active):hover .arco-icon-hover:hover::before{background-color:var(--color-fill-4)}.arco-tabs-header-nav-card .arco-tabs-add-icon,.arco-tabs-header-nav-card-gutter .arco-tabs-add-icon{color:var(--color-text-2);height:32px}.arco-tabs-header-nav-card .arco-tabs-header-title{border-right:none;background-color:transparent}.arco-tabs-header-nav-card .arco-tabs-header-title:last-child{border-right:1px solid var(--color-neutral-3);border-top-right-radius:var(--border-radius-small)}.arco-tabs-header-nav-card .arco-tabs-header-title:first-child{border-top-left-radius:var(--border-radius-small)}.arco-tabs-header-nav-card .arco-tabs-header-title:hover{background-color:var(--color-fill-3)}.arco-tabs-header-nav-card .arco-tabs-header-title-disabled,.arco-tabs-header-nav-card .arco-tabs-header-title-disabled:hover{background-color:transparent}.arco-tabs-header-nav-card .arco-tabs-header-title-active,.arco-tabs-header-nav-card .arco-tabs-header-title-active:hover{border-bottom-color:var(--color-bg-2);background-color:transparent}.arco-tabs-header-nav-card.arco-tabs-header-nav-bottom .arco-tabs-header-title-active,.arco-tabs-header-nav-card.arco-tabs-header-nav-bottom .arco-tabs-header-title-active:hover{border-top-color:var(--color-bg-2);border-bottom-color:var(--color-neutral-3)}.arco-tabs-header-nav-card-gutter .arco-tabs-header-title{margin-left:4px;border-right:1px solid var(--color-neutral-3);background-color:var(--color-fill-1);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}.arco-tabs-header-nav-card-gutter .arco-tabs-header-title:hover{background-color:var(--color-fill-3)}.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-disabled,.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-disabled:hover{background-color:var(--color-fill-1)}.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-active,.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-active:hover{border-bottom-color:var(--color-bg-2);background-color:transparent}.arco-tabs-header-nav-card-gutter .arco-tabs-header-title:first-child{margin-left:0}.arco-tabs-header-nav-card-gutter.arco-tabs-header-nav-bottom .arco-tabs-header-title-active,.arco-tabs-header-nav-card-gutter.arco-tabs-header-nav-bottom .arco-tabs-header-title-active:hover{border-top-color:var(--color-bg-2);border-bottom-color:var(--color-neutral-3)}.arco-tabs-header-nav-text::before{display:none}.arco-tabs-header-nav-text .arco-tabs-header-title{position:relative;line-height:1.5715;margin:0 9px;font-size:14px;padding:5px 0}.arco-tabs-header-nav-text .arco-tabs-header-title:not(:first-of-type)::before{height:12px;position:absolute;width:2px;background-color:var(--color-fill-3);content:'';display:block;top:50%;transform:translateY(-50%);left:-9px}.arco-tabs-header-nav-text .arco-tabs-header-title-text{padding-left:8px;padding-right:8px;background-color:transparent}.arco-tabs-header-nav-text .arco-tabs-header-title-text:hover{background-color:var(--color-fill-2)}.arco-tabs-header-nav-text .arco-tabs-header-title:focus-visible .arco-tabs-header-title-text{box-shadow:inset 0 0 0 2px var(--color-primary-light-3)}.arco-tabs-header-nav-text .arco-tabs-header-title-active .arco-tabs-header-title-text,.arco-tabs-header-nav-text .arco-tabs-header-title-active .arco-tabs-header-title-text:hover{background-color:transparent}.arco-tabs-header-nav-text .arco-tabs-header-title-disabled .arco-tabs-header-title-text,.arco-tabs-header-nav-text .arco-tabs-header-title-disabled .arco-tabs-header-title-text:hover{background-color:transparent}.arco-tabs-header-nav-text .arco-tabs-header-title-active.arco-tabs-header-nav-text .arco-tabs-header-title-disabled .arco-tabs-header-title-text,.arco-tabs-header-nav-text .arco-tabs-header-title-active.arco-tabs-header-nav-text .arco-tabs-header-title-disabled .arco-tabs-header-title-text:hover{background-color:var(--color-primary-light-3)}.arco-tabs-header-nav-rounded::before{display:none}.arco-tabs-header-nav-rounded .arco-tabs-header-title{padding:5px 0;padding-left:16px;padding-right:16px;margin:0 6px;font-size:14px;background-color:transparent;border-radius:32px}.arco-tabs-header-nav-rounded .arco-tabs-header-title:hover{background-color:var(--color-fill-2)}.arco-tabs-header-nav-rounded .arco-tabs-header-title:focus-visible{box-shadow:inset 0 0 0 2px var(--color-primary-light-3)}.arco-tabs-header-nav-rounded .arco-tabs-header-title-disabled:hover{background-color:transparent}.arco-tabs-header-nav-rounded .arco-tabs-header-title-active,.arco-tabs-header-nav-rounded .arco-tabs-header-title-active:hover{background-color:var(--color-fill-2)}.arco-tabs-header-nav-capsule::before{display:none}.arco-tabs-header-nav-capsule .arco-tabs-header-wrapper{justify-content:flex-end}.arco-tabs-header-nav-capsule .arco-tabs-header{line-height:1;background-color:var(--color-fill-2);border-radius:var(--border-radius-small);padding:3px 3px}.arco-tabs-header-nav-capsule .arco-tabs-header-title{line-height:26px;padding:0 12px;background-color:transparent;position:relative;font-size:14px;border-radius:var(--border-radius-small)}.arco-tabs-header-nav-capsule .arco-tabs-header-title:focus-visible{box-shadow:inset 0 0 0 2px var(--color-primary-light-3)}.arco-tabs-header-nav-capsule .arco-tabs-header-title:hover{background-color:var(--color-bg-2)}.arco-tabs-header-nav-capsule .arco-tabs-header-title-disabled:hover{background-color:unset}.arco-tabs-header-nav-capsule .arco-tabs-header-title-active,.arco-tabs-header-nav-capsule .arco-tabs-header-title-active:hover{background-color:var(--color-bg-2)}.arco-tabs-header-nav-capsule .arco-tabs-header-title-active+.arco-tabs-header-title::before,.arco-tabs-header-nav-capsule .arco-tabs-header-title-active::before,.arco-tabs-header-nav-capsule .arco-tabs-header-title-active:hover+.arco-tabs-header-title::before,.arco-tabs-header-nav-capsule .arco-tabs-header-title-active:hover::before{opacity:0}.arco-tabs-header-nav-capsule.arco-tabs-header-nav-horizontal .arco-tabs-header-title:not(:first-of-type){margin-left:3px}.arco-tabs-header-nav-capsule.arco-tabs-header-nav-horizontal .arco-tabs-header-title:not(:first-of-type)::before{position:absolute;top:50%;left:-2px;transform:translateY(-50%);display:block;height:14px;width:1px;background-color:var(--color-fill-3);content:'';transition:all .2s cubic-bezier(0,0,1,1)}.arco-tabs-header-scroll{overflow:hidden;position:relative;display:flex;align-items:center}.arco-tabs-content{width:100%;overflow:hidden;padding-top:16px;box-sizing:border-box}.arco-tabs-content .arco-tabs-content-inner{display:flex;width:100%}.arco-tabs-content .arco-tabs-content-item{width:100%;overflow:hidden;height:0;flex-shrink:0}.arco-tabs-content .arco-tabs-content-item.arco-tabs-content-item-active{height:auto}.arco-tabs-card-gutter>.arco-tabs-content,.arco-tabs-card>.arco-tabs-content{border:1px solid var(--color-neutral-3);border-top:none}.arco-tabs-card-gutter.arco-tabs-bottom>.arco-tabs-content,.arco-tabs-card.arco-tabs-bottom>.arco-tabs-content{border-top:1px solid var(--color-neutral-3);border-bottom:none}.arco-tabs-animation.arco-tabs-content-inner{transition:all .2s cubic-bezier(.34,.69,.1,1)}.arco-tabs-horizontal.arco-tabs-justify{display:flex;flex-direction:column;height:100%}.arco-tabs-horizontal.arco-tabs-justify .arco-tabs-content,.arco-tabs-horizontal.arco-tabs-justify .arco-tabs-content-inner,.arco-tabs-horizontal.arco-tabs-justify .arco-tabs-pane{height:100%}.arco-tabs-header-size-mini.arco-tabs-header-nav-line .arco-tabs-header-extra{line-height:32px;font-size:12px}.arco-tabs-header-size-mini.arco-tabs-header-nav-line .arco-tabs-header-title{font-size:12px;padding-top:6px;padding-bottom:6px}.arco-tabs-header-size-mini.arco-tabs-header-nav-line .arco-tabs-header-extra{line-height:32px;font-size:12px}.arco-tabs-header-size-mini.arco-tabs-header-nav-card .arco-tabs-header-title,.arco-tabs-header-size-mini.arco-tabs-header-nav-card-gutter .arco-tabs-header-title{font-size:12px;padding-top:2px;padding-bottom:2px}.arco-tabs-header-size-mini.arco-tabs-header-nav-card .arco-tabs-header-extra,.arco-tabs-header-size-mini.arco-tabs-header-nav-card-gutter .arco-tabs-header-extra{line-height:24px;font-size:12px}.arco-tabs-header-size-mini.arco-tabs-header-nav-card .arco-tabs-add-icon,.arco-tabs-header-size-mini.arco-tabs-header-nav-card-gutter .arco-tabs-add-icon{height:24px}.arco-tabs-header-size-mini.arco-tabs-header-nav-capsule .arco-tabs-header-title{font-size:12px;line-height:18px}.arco-tabs-header-size-mini.arco-tabs-header-nav-capsule .arco-tabs-header-extra{line-height:24px;font-size:12px}.arco-tabs-header-size-mini.arco-tabs-header-nav-rounded .arco-tabs-header-title{font-size:12px;padding-top:3px;padding-bottom:3px}.arco-tabs-header-size-mini.arco-tabs-header-nav-rounded .arco-tabs-header-extra{line-height:24px;font-size:12px}.arco-tabs-header-size-small.arco-tabs-header-nav-line .arco-tabs-header-extra{line-height:36px;font-size:14px}.arco-tabs-header-size-small.arco-tabs-header-nav-line .arco-tabs-header-title{font-size:14px;padding-top:6px;padding-bottom:6px}.arco-tabs-header-size-small.arco-tabs-header-nav-line .arco-tabs-header-extra{line-height:36px;font-size:14px}.arco-tabs-header-size-small.arco-tabs-header-nav-card .arco-tabs-header-title,.arco-tabs-header-size-small.arco-tabs-header-nav-card-gutter .arco-tabs-header-title{font-size:14px;padding-top:2px;padding-bottom:2px}.arco-tabs-header-size-small.arco-tabs-header-nav-card .arco-tabs-header-extra,.arco-tabs-header-size-small.arco-tabs-header-nav-card-gutter .arco-tabs-header-extra{line-height:28px;font-size:14px}.arco-tabs-header-size-small.arco-tabs-header-nav-card .arco-tabs-add-icon,.arco-tabs-header-size-small.arco-tabs-header-nav-card-gutter .arco-tabs-add-icon{height:28px}.arco-tabs-header-size-small.arco-tabs-header-nav-capsule .arco-tabs-header-title{font-size:14px;line-height:22px}.arco-tabs-header-size-small.arco-tabs-header-nav-capsule .arco-tabs-header-extra{line-height:28px;font-size:14px}.arco-tabs-header-size-small.arco-tabs-header-nav-rounded .arco-tabs-header-title{font-size:14px;padding-top:3px;padding-bottom:3px}.arco-tabs-header-size-small.arco-tabs-header-nav-rounded .arco-tabs-header-extra{line-height:28px;font-size:14px}.arco-tabs-header-size-large.arco-tabs-header-nav-line .arco-tabs-header-extra{line-height:44px;font-size:14px}.arco-tabs-header-size-large.arco-tabs-header-nav-line .arco-tabs-header-title{font-size:14px;padding-top:10px;padding-bottom:10px}.arco-tabs-header-size-large.arco-tabs-header-nav-line .arco-tabs-header-extra{line-height:44px;font-size:14px}.arco-tabs-header-size-large.arco-tabs-header-nav-card .arco-tabs-header-title,.arco-tabs-header-size-large.arco-tabs-header-nav-card-gutter .arco-tabs-header-title{font-size:14px;padding-top:6px;padding-bottom:6px}.arco-tabs-header-size-large.arco-tabs-header-nav-card .arco-tabs-header-extra,.arco-tabs-header-size-large.arco-tabs-header-nav-card-gutter .arco-tabs-header-extra{line-height:36px;font-size:14px}.arco-tabs-header-size-large.arco-tabs-header-nav-card .arco-tabs-add-icon,.arco-tabs-header-size-large.arco-tabs-header-nav-card-gutter .arco-tabs-add-icon{height:36px}.arco-tabs-header-size-large.arco-tabs-header-nav-capsule .arco-tabs-header-title{font-size:14px;line-height:30px}.arco-tabs-header-size-large.arco-tabs-header-nav-capsule .arco-tabs-header-extra{line-height:36px;font-size:14px}.arco-tabs-header-size-large.arco-tabs-header-nav-rounded .arco-tabs-header-title{font-size:14px;padding-top:7px;padding-bottom:7px}.arco-tabs-header-size-large.arco-tabs-header-nav-rounded .arco-tabs-header-extra{line-height:36px;font-size:14px}.arco-tabs-right{flex-direction:row-reverse}.arco-tabs-vertical{display:flex;flex-wrap:nowrap}.arco-tabs-header-nav-vertical{flex-grow:0;flex-shrink:0}.arco-tabs-header-nav-vertical::before{position:absolute;left:initial;bottom:0;right:0;top:0;width:1px;height:100%;clear:both}.arco-tabs-header-nav-vertical .arco-tabs-add-icon{margin-left:0;margin-top:8px;padding:0 16px;height:auto}.arco-tabs-header-nav-vertical .arco-tabs-header{height:auto}.arco-tabs-header-nav-vertical .arco-tabs-header-scroll{flex-direction:column}.arco-tabs-header-nav-vertical .arco-tabs-header-overflow-scroll{padding:6px 0}.arco-tabs-header-nav-vertical .arco-tabs-header-wrapper{height:100%;flex-direction:column}.arco-tabs-header-nav-vertical .arco-tabs-header-ink{position:absolute;left:initial;right:0;bottom:initial;width:2px;transition:top .2s cubic-bezier(.34,.69,.1,1),height .2s cubic-bezier(.34,.69,.1,1)}.arco-tabs-header-nav-vertical .arco-tabs-header-ink.arco-tabs-header-ink-custom .arco-tabs-header-ink-inner{left:unset;bottom:unset;right:0;transform:translateY(-50%);top:50%}.arco-tabs-header-nav-vertical .arco-tabs-header-title{display:block;white-space:nowrap;margin:0;margin-top:12px}.arco-tabs-header-nav-vertical .arco-tabs-header-title:first-of-type{margin-top:0}.arco-tabs-header-nav-right::before{right:unset;left:0}.arco-tabs-header-nav-right .arco-tabs-header-ink{left:0;right:unset}.arco-tabs-header-nav-right .arco-tabs-header-ink .arco-tabs-header-ink-inner{left:0;right:unset}.arco-tabs-header-nav-vertical .arco-tabs-header-scroll{position:relative;height:100%;box-sizing:border-box}.arco-tabs-header-nav-line.arco-tabs-header-nav-vertical .arco-tabs-header-title{padding:0 20px}.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card .arco-tabs-header-title{margin:0;position:relative;border:1px solid var(--color-neutral-3);border-bottom-color:transparent}.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card .arco-tabs-header-title:first-child{border-top-left-radius:var(--border-radius-small)}.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card .arco-tabs-header-title-active,.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card .arco-tabs-header-title-active:hover{border-bottom-color:transparent;border-right-color:var(--color-bg-2)}.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card .arco-tabs-header-title:last-child{border-bottom:1px solid var(--color-neutral-3);border-bottom-left-radius:var(--border-radius-small)}.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card.arco-tabs-header-nav-right .arco-tabs-header-title-active,.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card.arco-tabs-header-nav-right .arco-tabs-header-title-active:hover{border-right-color:var(--color-neutral-3);border-left-color:var(--color-bg-2)}.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card-gutter .arco-tabs-header-title{margin-left:0;border-radius:var(--border-radius-small) 0 0 var(--border-radius-small);position:relative}.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card-gutter .arco-tabs-header-title:not(:first-of-type){margin-top:4px}.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-active,.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-active:hover{border-right-color:var(--color-bg-2);border-bottom-color:var(--color-neutral-3)}.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card-gutter.arco-tabs-header-nav-right .arco-tabs-header-title-active,.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card-gutter.arco-tabs-header-nav-right .arco-tabs-header-title-active:hover{border-right-color:var(--color-neutral-3);border-left-color:var(--color-bg-2)}.arco-tabs-content-vertical{width:auto;height:100%;padding:0;flex:auto}.arco-tabs-right .arco-tabs-content-vertical{padding-right:16px}.arco-tabs-left .arco-tabs-content-vertical{padding-left:16px}.arco-tabs-card-gutter>.arco-tabs-content-vertical,.arco-tabs-card>.arco-tabs-content-vertical{border:1px solid var(--color-neutral-3);border-left:none}.arco-tabs-card-gutter.arco-tabs-right>.arco-tabs-content-vertical,.arco-tabs-card.arco-tabs-right>.arco-tabs-content-vertical{border-left:1px solid var(--color-neutral-3);border-right:none}.arco-tabs-rtl{direction:rtl}.arco-tabs-rtl.arco-tabs-left{flex-direction:row-reverse}.arco-tabs-rtl.arco-tabs-right{flex-direction:row}.arco-tabs-rtl .arco-tabs-close-icon{margin-left:0;margin-right:8px}.arco-tabs-rtl .arco-tabs-left-icon,.arco-tabs-rtl .arco-tabs-right-icon{margin-left:6px;margin-right:10px}.arco-tabs-rtl .arco-tabs-header-nav-line>.arco-tabs-header-nav-horizontal .arco-tabs-header-scroll>.arco-tabs-header-title:first-of-type{margin-right:0}.arco-tabs-rtl .arco-tabs-header-nav-line>.arco-tabs-header-nav-horizontal .arco-tabs-header-no-padding>.arco-tabs-header-title:first-of-type,.arco-tabs-rtl .arco-tabs-header-nav-text>.arco-tabs-header-nav-horizontal .arco-tabs-header-no-padding>.arco-tabs-header-title:first-of-type{margin-right:0}.arco-tabs-rtl .arco-tabs-header-nav-card .arco-tabs-header-title-editable,.arco-tabs-rtl .arco-tabs-header-nav-card-gutter .arco-tabs-header-title-editable{padding-left:12px;padding-right:16px}.arco-tabs-rtl .arco-tabs-header-nav-card .arco-tabs-header-title{border-right:1px solid var(--color-neutral-3);border-left:none}.arco-tabs-rtl .arco-tabs-header-nav-card .arco-tabs-header-title:last-child{border-left:1px solid var(--color-neutral-3);border-top-left-radius:var(--border-radius-small);border-top-right-radius:0}.arco-tabs-rtl .arco-tabs-header-nav-card .arco-tabs-header-title:first-child{border-top-left-radius:0;border-top-right-radius:var(--border-radius-small)}.arco-tabs-rtl .arco-tabs-header-nav-card-gutter .arco-tabs-header-title{margin-right:4px}.arco-tabs-rtl .arco-tabs-header-nav-card-gutter .arco-tabs-header-title:first-child{margin-right:0}.arco-tabs-rtl .arco-tabs-header-nav-text .arco-tabs-header-title:not(:first-of-type)::before{left:initial;right:-9px}.arco-tabs-rtl .arco-tabs-header-nav-capsule.arco-tabs-header-nav-horizontal .arco-tabs-header-title:not(:first-of-type){margin-left:0;margin-right:3px}.arco-tabs-rtl .arco-tabs-header-nav-capsule.arco-tabs-header-nav-horizontal .arco-tabs-header-title:not(:first-of-type)::before{right:-2px;left:initial}body[arco-theme=dark] .arco-tabs-header-nav-capsule .arco-tabs-header-title-active{background-color:var(--color-fill-3)}body[arco-theme=dark] .arco-tabs-header-nav-capsule .arco-tabs-header-title:not(body[arco-theme=dark].arco-tabs-header-nav-capsule.arco-tabs-header-title-disabled):hover{background-color:var(--color-fill-3)}

package/es/Tabs/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../style/index.less';
+import '../../Menu/style';
+import './index.less';

package/es/Tabs/style/index.js

@@ -0,0 +1,3 @@
+import '../../style/index.less';
+import '../../Menu/style';
+import './index.less';