安装

npm install @xintao1105/scroll-tabs

or

yarn add @xintao1105/scroll-tabs

示例代码

import ScrollTabs from '@xintao1105/scroll-tabs';
import type { interProps } from '@xintao1105/scroll-tabs';

const ars:interProps = {
    onClick: (e) => { console.log("onClick", e) }
  }

<ScrollTabs {...ars}/>

参数类型

interface dataProps {
  s: string | number;
  content: string | number;
}

interface style {
  fontFamily: string;
  fontSize: number;
  color: string;
  fontWeight: string | number;
  letterSpacing: number;
  lineHeight: number;
  fontStyle: string;
}

interface offset {
  x: number;
  y: number;
}

export interface fillColor {
  /**
   * 颜色类型 纯色 | 渐变色; 默认纯色
   * @type {String}
   * @default type = "pure"
   */
  type: "pure" | "linear";
  /**
   * 纯色色值
   * @default pure = ""
   */
  pure: string;
  /**
   * 渐变色
   */
  linear: {
    /**
     * 渐变色 色值列表
     * @default stops = []
     */
    stops: {
      offset: number;
      color: string;
    }[];
    /**
     * 渐变角度
     * @default angle = 0
     */
    angle: number;
    /**
     * 渐变透明度
     * @default opacity = 1
     */
    opacity: number;
  };
}

export interface styleProps extends style {
  /**
   * 文本偏移
   * @default offset = {x:0,y:0}
   */
  offset: offset;
  /**
   * 开启文本阴影
   * @default shadow = false
   */
  shadow: boolean;
  /**
   * 文本阴影
   * @default textShadow = {"shadowColor": "#0075ff","shadowOffsetX": 0,"shadowOffsetY": 0,"shadowBlur": 8,"extend": 0}
   */
  textShadow?: {
    shadowColor: string;
    shadowOffsetX: number;
    shadowOffsetY: number;
    shadowBlur: number;
    extend: number;
  };
  /**
   * 文本背景填充类型 默认颜色填充
   * @type {string}
   * @default fillType = "color"
   */
  fillType: "color" | "image";
  /**
   * 文本背景颜色填充 fillType = "color" 时生效 开始色值 | 结束色值 | 角度
   * @default fillColor = {"startVal": "rgba(15,22,34,0.6)","endVal": "rgba(15,22,34,0.6)","direction": 0}
   */
  fillColor: fillColor;
  /**
   * 文本背景图片填充 fillType = "image" 时生效
   * @default fillImage = ""
   */
  fillImage: string;
  /**
   * 文本框描边
   * @default stroke = false
   */
  stroke: boolean;
  /**
   * 文本框描边粗细
   * @default strokeWidth = 2
   */
  strokeWidth: number;
  /**
   * 文本框描边颜色
   * @default strokeColor = "rgba(160,169,184,0.3)"
   */
  strokeColor: string;
}

export interface seriesListProps {
  /**
   * 选项字段值 根据 数据项 字段 s 映射
   */
  fieldValue?: string | number;
  /**
   * 默认样式
   */
  style?: styleProps;
  /**
   * 选中样式
   */
  selectStyle?: styleProps;
}

export interface interProps {
  /**
   * 唯一标识ID 默认使用系统生成的32位uuid
   */
  id?: string;
  /**
   * 宽
   */
  width?: number;
  /**
   * 高
   */
  height?: number;
  /**
   * 从1开始，0即不选中
   * @default initIndex = 1
   */
  initIndex?: number;
  /**
   * 文本溢出
   * @type {string}
   * @default textOverflow = "break-word"
   */
  textOverflow?: "break-word" | "ellipsis";
  /**
   * 排列方向
   * @type {string}
   * @default direction = "row"
   */
  direction?: "row" | "column";
  /**
   * 宽度 当direction = "row"时生效
   * @default directionWidth = 125
   */
  directionWidth?: number;
  /**
   * 高度 当direction = "column"时生效
   * @default directionHeight = 45
   */
  directionHeight?: number;
  /**
   * 选项卡间距
   * @default tabMargin = 4
   */
  tabMargin?: number;
  /**
   * 水平对齐 "flex-start" | "center" | "flex-end";
   * @type {string}
   * @default alignItems = "center"
   */
  alignItems?: "flex-start" | "center" | "flex-end";
  /**
   * 自动轮播
   * @default animate = false
   */
  animate?: boolean;
  /**
   * 间隔时长 当animate = true 时生效；单位s
   * @default interval = 3
   */
  interval?: number;
  /**
   * 点击停留 当animate = true 时生效；单位s
   * @default stay = 10
   */
  stay?: number;
  /**
   * 默认样式
   */
  style?: styleProps;
  /**
   * 选中样式
   */
  selectStyle?: styleProps;
  /**
   * 系列配置
   */
  seriesList?: Array<seriesListProps>;
  /**
   * 数据
   */
  data?: Array<dataProps>;
  /**
   * 点击回调
   */
  readonly onClick?: (e: any) => void;
  /**
   * 状态改变回调
   */
  readonly onChange?: (e: any) => void;
}