本文整理匯總了TypeScript中@ephox/alloy.Toggling.on方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript Toggling.on方法的具體用法？TypeScript Toggling.on怎麽用？TypeScript Toggling.on使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/alloy.Toggling的用法示例。
在下文中一共展示了Toggling.on方法的4個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的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')
})
])
})
]
});
};示例2: function
const setContextToolbar = function (gs) {
Toggling.on(toolbar);
Toolbar.setGroups(toolbar, gs);
};示例3:
toggleOn: () => { Toggling.on(component); },示例4: 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)
])
});
};