@ray-js/smart-ui-typings/dist/tabs/index.d.ts

@ray-js/smart-ui 智能小程序 UI 框架的类型声明文件

/// <reference types="react" />
import { VantBaseExternalClassName, VantComponent, VantEventHandler } from '../base';
export interface VantTabsProps {
    /**
     * 样式风格
     */
    type?: 'card' | 'line';
    /**
     * 标签主题色
     *
     * @default '#ee0a24'
     */
    color?: string;
    /**
     * 当前选中标签的标识符
     *
     * @default 0
     */
    active?: string | number;
    /**
     * 动画时间，单位秒
     *
     * @default 0.3
     */
    duration?: number;
    /**
     * 底部条宽度，默认单位`px`
     *
     * @default '40px'
     */
    lineWidth?: string | number;
    /**
     * 底部条高度，默认单位`px`
     *
     * @default '3px'
     */
    lineHeight?: string | number;
    /**
     * 是否开启切换标签内容时的转场动画
     *
     * @default false
     */
    animated?: boolean;
    /**
     * 是否展示外边框，仅在 `line` 风格下生效
     *
     * @default false
     */
    border?: boolean;
    /**
     * 是否省略过长的标题文字
     *
     * @default true
     */
    ellipsis?: boolean;
    /**
     * 是否使用粘性定位布局
     *
     * @default false
     */
    sticky?: boolean;
    /**
     * 是否开启手势滑动切换
     *
     * @default false
     */
    swipeable?: boolean;
    /**
     * 是否开启标签页内容延迟渲染
     *
     * @default true
     */
    lazyRender?: boolean;
    /**
     * 粘性定位布局下与顶部的最小距离，单位`px`
     */
    offsetTop?: number;
    /**
     * 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动
     *
     * @default 5
     */
    swipeThreshold?: number;
    /**
     * 标题选中态颜色
     */
    titleActiveColor?: string;
    /**
     * 标题默认态颜色
     */
    titleInactiveColor?: string;
    /**
     * `zIndex`层级
     *
     * @default 1
     */
    zIndex?: number;
}
/**
 * @deprecated
 */
export interface VantTabsEventDetail {
    /**
     * 标签标识符
     */
    name: string;
    /**
     * 标题
     */
    title: string;
    /**
     * tab的序号
     */
    index: number;
}
export type VantTabsBaseEventDetail = VantTabsEventDetail;
export interface VantTabsScrollEventDetail {
    /**
     * 距离顶部位置
     */
    scrollTop: number;
    /**
     * 是否吸顶
     */
    isFixed: boolean;
}
export interface VantTabsEvents {
    /**
     * 点击标签时触发
     */
    onClick?: VantEventHandler<VantTabsBaseEventDetail>;
    /**
     * 当前激活的标签改变时触发
     */
    onChange?: VantEventHandler<VantTabsBaseEventDetail>;
    /**
     * 点击被禁用的标签时触发
     */
    onDisabled?: VantEventHandler<VantTabsBaseEventDetail>;
    /**
     * 滚动时触发
     */
    onScroll?: VantEventHandler<VantTabsScrollEventDetail>;
}
export interface VantTabsExternalClassName extends VantBaseExternalClassName {
    /**
     * 标签栏样式类
     */
    navClass?: string;
    /**
     * 标签样式类
     */
    tabClass?: string;
    /**
     * 标签激活态样式类
     */
    tabActiveClass?: string;
}
export interface VantTabsSlot {
    /**
     * Tabs Slot
     */
    slot?: {
        /**
         * 自定义标题左侧内容
         */
        navLeft?: React.ReactNode;
        /**
         * 自定义标题右侧内容
         */
        navRight?: React.ReactNode;
    };
}
export type VantTabs = VantComponent<VantTabsProps, VantTabsEvents, VantTabsExternalClassName, VantTabsSlot>;