feat: scroll bar 样式支持可配置

Author: zengyue

packages/f2/src/components/scrollBar/horizontal.tsx

@@ -1,19 +1,21 @@
 import { jsx } from '@antv/f-engine';
 
 export default (props, context) => {
-  const { coord, range, position, layout } = props;
+  const { coord, range, position, layout, style, background, barStyle } = props;
   const { left, width } = coord;
   const { top, height } = layout;
   const [start, end] = range?.x || range?.y;
   const barLeft = width * start;
   const barWidth = width * (end - start);
   if (isNaN(barWidth)) return;
+
   return (
     <group
       style={{
         display: 'flex',
         left,
         top: position === 'top' ? top - context.px2hd('8px') : top + height,
+        ...style,
       }}
     >
       <line
@@ -26,6 +28,7 @@ export default (props, context) => {
           stroke: 'rgba(202, 215, 239, .2)',
           lineCap: 'round',
           lineWidth: '8px',
+          ...background,
         }}
       />
       <line
@@ -38,6 +41,7 @@ export default (props, context) => {
           stroke: 'rgba(202, 215, 239, .5)',
           lineCap: 'round',
           lineWidth: '8px',
+          ...barStyle,
         }}
       />
     </group>

packages/f2/src/components/scrollBar/vertical.tsx

@@ -1,7 +1,7 @@
 import { jsx } from '@antv/f-engine';
 
 export default (props, context) => {
-  const { coord, range, position, layout } = props;
+  const { coord, range, position, layout, style, background, barStyle } = props;
   const { top, height } = coord;
   const { left, width } = layout;
   const [start, end] = range?.y || range?.x;
@@ -15,6 +15,7 @@ export default (props, context) => {
         display: 'flex',
         top,
         left: position === 'left' ? left - context.px2hd('8px') : left + width,
+        ...style,
       }}
     >
       <line
@@ -27,6 +28,7 @@ export default (props, context) => {
           stroke: 'rgba(202, 215, 239, .2)',
           lineCap: 'round',
           lineWidth: '8px',
+          ...background,
         }}
       />
       <line
@@ -38,6 +40,7 @@ export default (props, context) => {
           stroke: 'rgba(202, 215, 239, .5)',
           lineCap: 'round',
           lineWidth: '8px',
+          ...barStyle,
         }}
       />
     </group>

packages/f2/src/components/scrollBar/withScrollBar.tsx

@@ -1,4 +1,4 @@
-import { jsx } from '@antv/f-engine';
+import { jsx, ShapeProps } from '@antv/f-engine';
 import withZoom, { ZoomProps } from '../zoom';
 import { ChartChildProps } from '../../chart';
 
@@ -13,8 +13,22 @@ export interface ScrollBarProps extends ZoomProps {
   position?: 'bottom' | 'top' | 'left' | 'right';
   /**
    * 间距
+   * @deprecated
    */
   margin?: string;
+
+  /**
+   * 滚动条父容器样式
+   */
+  style?: ShapeProps;
+  /**
+   * 背景条样式
+   */
+  background?: ShapeProps;
+  /**
+   * 滚动条样式
+   */
+  barStyle?: ShapeProps;
 }
 
 export default (View) => {

packages/f2/test/components/interaction/__image_snapshots__/dodge-pan-test-tsx-dodge-pan-init-1-snap.png

@@ -164,7 +164,22 @@ describe('dodge pan', () => {
             showCrosshairs
             crosshairsType="x"
           />
-          <ScrollBar pan pinch={false} mode="x" range={[0.5, 1]} visible />
+          <ScrollBar
+            pan
+            pinch={false}
+            mode="x"
+            range={[0.5, 1]}
+            visible
+            style={{
+              marginTop: '10px',
+            }}
+            background={{
+              stroke: '#000',
+            }}
+            barStyle={{
+              stroke: 'red',
+            }}
+          />
         </Chart>
       </Canvas>
     );

packages/f2/test/components/interaction/__image_snapshots__/dodge-pan-test-tsx-dodge-pan-pan-1-snap.png

@@ -30,7 +30,7 @@ const data = [
 
 ### mode: string
 
-滚动模式，默认为： `'x'`, 可选值： `'x' | 'y' | '['x', 'y']'  `
+滚动模式，默认为： `'x'`, 可选值： `'x' | 'y' | '['x', 'y']'`
 
 ### range: [0, 1]
 
@@ -56,9 +56,26 @@ const data = [
 
 默认为 `'bottom'`, 可选值为：`'top' | 'right' | 'bottom' | 'left'`
 
-### margin: number
+### style: ShapeProps
 
-滚动条和图表内容间距，默认 `16px`
+滚动条和图表内容间距，比如
+
+```css
+marign: ['10px', '20px']
+marignTop: '10px'
+```
+
+### backgroud: ShapeProps
+
+滚动条背景样式
+
+> 类型为绘图属性：[线条属性](/zh/docs/tutorial/shape-attrs#线条属性) 线条样式
+
+### barStyle: ShapeProps
+
+滑块样式
+
+> 类型为绘图属性：[线条属性](/zh/docs/tutorial/shape-attrs#线条属性) 线条样式
 
 ## demo 示例