滚动条一般位于容器边缘，用来控制滚动区域的可见区域。

image.pngimage.pngimage.png

使用

  1. import { Scrollbar } from '@antv/GUI';

API

  1. // 创建对象
  2. scrollbar = new Scrollbar({attrs});
  4. // 获取滚动条值
  5. scrollbar.getValue(): number;
  6. // 设置滚动条值
  7. scrollbar.setValue(number): void;

配置 ScrollbarCfg

SlideableBaseCfg
TrackCfg
ThumbCfg

SlideableBaseCfg

  • width: number
  • height: number
  • padding: number | number[]
  • background: ShapeAttrs
  • orient: "horizontal" | "vertical" "horizontal"
  • values: [ number, number ] 值 [ 0, 0.5 ]
  • min: number 最小值 0
  • max: number 最大值 1

  • step: number 0.01

    TrackCfg

  • trackStyle: ShapeAttrs {}

    ThumbCfg

  • isRound: boolean 滑块是否为圆角

  • thumbLen: number 滑块长度

  • thumbStyle: ShapeAttrs {} 

    1. export type ScrollbarOptions = ShapeCfg & {
    2. attrs: {
    3.   /**
    4.    * 滑条朝向
    5.    */
    6.   orient?: 'horizontal' | 'vertical';
    8.   /**
    9.    * 轨道宽度
    10.    */
    11.   width: number;
    13.   /**
    14.    * 轨道高度
    15.    */
    16.   height: number;
    18.   /**
    19.    * 滚动条的值
    20.    */
    21.   value: number;
    23.   /**
    24.    * 可滚动范围的值的上限
    25.    */
    26.   minimum?: number;
    28.   /**
    29.    * 可滚动范围的值的下限
    30.    */
    31.   maximum?: number;
    33.   /**
    34.    * 滑块是否圆角
    35.    */
    36.   isRound?: boolean;
    38.   /**
    39.     * 滑块长度
    40.     */
    41.      thumbLen: number;
    43.   /**
    44.    * 滑轨样式
    45.    */
    46.   trackStyle?: {
    47.     default: ShapeAttrs;
    48.     active: ShapeAttrs;
    49.   };
    51.   /**
    52.    * 滑块样式
    53.    */
    54.   thumbStyle?: {
    55.     default: ShapeAttrs;
    56.     active: ShapeAttrs;
    57.   };
    58. };
    59. };

    交互

  • 拖拽

鼠标或者手指拖拽滑块，滑块将跟随

  • 点击

鼠标或者手指点击滑轨，以移动滑块至指定位置

  • 滚动

鼠标或者触控板滚动，滑块同步滑动

事件

  • scroll: 当鼠标或键盘操作移动了滚动条时触发
  • valueChanged: 在通过scroll事件或通过API更改value属性时发生