本文整理汇总了TypeScript中@ephox/alloy.Sliding.config方法的典型用法代码示例。如果您正苦于以下问题：TypeScript Sliding.config方法的具体用法？TypeScript Sliding.config怎么用？TypeScript Sliding.config使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类@ephox/alloy.Sliding的用法示例。
在下文中一共展示了Sliding.config方法的2个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1:
const renderSidebar = (spec) => {
return {
uid: spec.uid,
dom: {
tag: 'div',
classes: ['tox-sidebar'],
attributes: {
role: 'complementary'
}
},
components: [
{
dom: {
tag: 'div',
classes: ['tox-sidebar__slider']
},
components: [
// this will be replaced on setSidebar
],
behaviours: Behaviour.derive([
Tabstopping.config({ }),
Focusing.config({ }), // TODO use Keying and use focusIn, but need to handle if sidebar contains nothing
Sliding.config({
dimension: {
property: 'width'
},
closedClass: 'tox-sidebar--sliding-closed',
openClass: 'tox-sidebar--sliding-open',
shrinkingClass: 'tox-sidebar--sliding-shrinking',
growingClass: 'tox-sidebar--sliding-growing',
onShrunk: (slider: AlloyComponent) => {
const optSlotContainer = Composing.getCurrent(slider);
optSlotContainer.each(SlotContainer.hideAllSlots);
AlloyTriggers.emit(slider, autoSize);
},
onGrown: (slider: AlloyComponent) => {
AlloyTriggers.emit(slider, autoSize);
},
onStartGrow: (slider: AlloyComponent) => {
AlloyTriggers.emitWith(slider, fixSize, { width: Css.getRaw(slider.element(), 'width').getOr('') });
},
onStartShrink: (slider: AlloyComponent) => {
AlloyTriggers.emitWith(slider, fixSize, { width: Width.get(slider.element()) + 'px' });
}
}),
Replacing.config({}),
Composing.config({
find: (comp: AlloyComponent) => {
const children = Replacing.contents(comp);
return Arr.head(children);
}
})
])
}
],
behaviours: Behaviour.derive([
ComposingConfigs.childAt(0),
AddEventsBehaviour.config('sidebar-sliding-events', [
AlloyEvents.run<FixSizeEvent>(fixSize, (comp, se) => {
Css.set(comp.element(), 'width', se.event().width());
}),
AlloyEvents.run(autoSize, (comp, se) => {
Css.remove(comp.element(), 'width');
})
])
])
};
};示例2: function
const build = function (refresh, scrollIntoView) {
const dropup = GuiFactory.build(
Container.sketch({
dom: {
tag: 'div',
classes: Styles.resolve('dropup')
},
components: [
],
containerBehaviours: Behaviour.derive([
Replacing.config({ }),
Sliding.config({
closedClass: Styles.resolve('dropup-closed'),
openClass: Styles.resolve('dropup-open'),
shrinkingClass: Styles.resolve('dropup-shrinking'),
growingClass: Styles.resolve('dropup-growing'),
dimension: {
property: 'height'
},
onShrunk (component) {
refresh();
scrollIntoView();
Replacing.set(component, [ ]);
},
onGrown (component) {
refresh();
scrollIntoView();
}
}),
Receivers.orientation(function (component, data) {
disappear(Fun.noop);
})
])
})
);
const appear = function (menu, update, component) {
if (Sliding.hasShrunk(dropup) === true && Sliding.isTransitioning(dropup) === false) {
window.requestAnimationFrame(function () {
update(component);
Replacing.set(dropup, [ menu() ]);
Sliding.grow(dropup);
});
}
};
const disappear = function (onReadyToShrink) {
window.requestAnimationFrame(function () {
onReadyToShrink();
Sliding.shrink(dropup);
});
};
return {
appear,
disappear,
component: Fun.constant(dropup),
element: dropup.element
};
};