TypeScript alloy.Slider类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@ephox/alloy.Slider类的典型用法代码示例。如果您正苦于以下问题：TypeScript Slider类的具体用法？TypeScript Slider怎么用？TypeScript Slider使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。

在下文中一共展示了Slider类的3个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: function

const sketch = function (rawSpec) {
  const spec = ValueSchema.asRawOrDie('SizeSlider', schema, rawSpec);

  const isValidValue = function (valueIndex) {
    return valueIndex >= 0 && valueIndex < spec.sizes.length;
  };

  const onChange = function (slider, thumb, valueIndex) {
    if (isValidValue(valueIndex)) {
      spec.onChange(valueIndex);
    }
  };

  return Slider.sketch({
    dom: {
      tag: 'div',
      classes: [
        Styles.resolve('slider-' + spec.category + '-size-container'),
        Styles.resolve('slider'),
        Styles.resolve('slider-size-container') ]
    },
    onChange,
    onDragStart (slider, thumb) {
      Toggling.on(thumb);
    },
    onDragEnd (slider, thumb) {
      Toggling.off(thumb);
    },
    min: 0,
    max: spec.sizes.length - 1,
    stepSize: 1,
    getInitialValue: spec.getInitialValue,
    snapToGrid: true,

    sliderBehaviours: Behaviour.derive([
      Receivers.orientation(Slider.refresh)
    ]),

    components: [
      Slider.parts().spectrum({
        dom: UiDomFactory.dom('<div class="${prefix}-slider-size-container"></div>'),
        components: [
          UiDomFactory.spec('<div class="${prefix}-slider-size-line"></div>')
        ]
      }),

      Slider.parts().thumb({
        dom: UiDomFactory.dom('<div class="${prefix}-slider-thumb"></div>'),
        behaviours: Behaviour.derive([
          Toggling.config({
            toggleClass: Styles.resolve('thumb-active')
          })
        ])
      })
    ]
  });
};

开发者ID:abstask，项目名称:tinymce，代码行数:57，代码来源:SizeSlider.ts

示例2:

  const makeSlider = (label: string, onChoose: (slider: AlloyComponent, thumb: AlloyComponent, value: SliderTypes.SliderValueX) => void, min: number, value: number, max: number): Memento.MementoRecord => {
    const labelPart = Slider.parts().label({
      dom: {
        tag: 'label',
        classes: ['tox-label'],
        innerHtml: providersBackstage.translate(label)
      }
    });

    const spectrum = Slider.parts().spectrum({
      dom: {
        tag: 'div',
        classes: ['tox-slider__rail'],
        attributes: {
          role: 'presentation'
        }
      }
    });

    const thumb = Slider.parts().thumb({
      dom: {
        tag: 'div',
        classes: ['tox-slider__handle'],
        attributes: {
          role: 'presentation'
        }
      }
    });

    return Memento.record(Slider.sketch({
      dom: {
        tag: 'div',
        classes: ['tox-slider'],
        attributes: {
          role: 'presentation'
        }
      },
      model: {
        mode: 'x',
        minX: min,
        maxX: max,
        getInitialValue: Fun.constant({ x: Fun.constant(value) })
      },
      components: [
        labelPart,
        spectrum,
        thumb
      ],
      sliderBehaviours: Behaviour.derive([
        Focusing.config({})
      ]),
      onChoose
    }));
  };

开发者ID:tinymce，项目名称:tinymce，代码行数:54，代码来源:EditPanel.ts

示例3: function

const makeSlider = function (spec) {
  const getColor = function (hue) {
    // Handle edges.
    if (hue < 0) {
      return 'black';
    } else if (hue > 360) {
      return 'white';
    } else {
      return 'hsl(' + hue + ', 100%, 50%)';
    }
  };

  // Does not fire change intentionally.
  const onInit = function (slider, thumb, value) {
    const color = getColor(value);
    Css.set(thumb.element(), 'background-color', color);
  };

  const onChange = function (slider, thumb, value) {
    const color = getColor(value);
    Css.set(thumb.element(), 'background-color', color);
    spec.onChange(slider, thumb, color);
  };

  return Slider.sketch({
    dom: UiDomFactory.dom('<div class="${prefix}-slider ${prefix}-hue-slider-container"></div>'),
    components: [
      Slider.parts()['left-edge'](UiDomFactory.spec('<div class="${prefix}-hue-slider-black"></div>')),
      Slider.parts().spectrum({
        dom: UiDomFactory.dom('<div class="${prefix}-slider-gradient-container"></div>'),
        components: [
          UiDomFactory.spec('<div class="${prefix}-slider-gradient"></div>')
        ],
        behaviours: Behaviour.derive([
          Toggling.config({
            toggleClass: Styles.resolve('thumb-active')
          })
        ])
      }),
      Slider.parts()['right-edge'](UiDomFactory.spec('<div class="${prefix}-hue-slider-white"></div>')),
      Slider.parts().thumb({
        dom: UiDomFactory.dom('<div class="${prefix}-slider-thumb"></div>'),
        behaviours: Behaviour.derive([
          Toggling.config({
            toggleClass: Styles.resolve('thumb-active')
          })
        ])
      })
    ],

    onChange,
    onDragStart (slider, thumb) {
      Toggling.on(thumb);
    },
    onDragEnd (slider, thumb) {
      Toggling.off(thumb);
    },
    onInit,
    stepSize: 10,
    min: 0,
    max: 360,
    getInitialValue: spec.getInitialValue,

    sliderBehaviours: Behaviour.derive([
      Receivers.orientation(Slider.refresh)
    ])
  });
};

开发者ID:abstask，项目名称:tinymce，代码行数:68，代码来源:ColorSlider.ts

注：本文中的@ephox/alloy.Slider类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。