本文整理汇总了TypeScript中@ephox/alloy.Disabling.config方法的典型用法代码示例。如果您正苦于以下问题：TypeScript Disabling.config方法的具体用法？TypeScript Disabling.config怎么用？TypeScript Disabling.config使用的例子？那么, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类@ephox/alloy.Disabling的用法示例。
在下文中一共展示了Disabling.config方法的5个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1:
const createSpacer = (): Memento.MementoRecord => {
return Memento.record({
dom: {
tag: 'div',
classes: [ 'tox-spacer' ]
},
behaviours: Behaviour.derive([ Disabling.config({ }) ])
});
};示例2: function
const navigationButton = function (direction, directionName, enabled) {
return Button.sketch({
dom: UiDomFactory.dom('<span class="${prefix}-icon-' + directionName + ' ${prefix}-icon"></span>'),
action (button) {
AlloyTriggers.emitWith(button, navigateEvent, { direction });
},
buttonBehaviours: Behaviour.derive([
Disabling.config({
disableClass: Styles.resolve('toolbar-navigation-disabled'),
disabled: !enabled
})
])
});
};示例3: function
export const renderSizeInput = (spec: Types.SizeInput.SizeInput, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
let converter: SizeConversion = noSizeConversion;
const ratioEvent = Id.generate('ratio-event');
const pLock = AlloyFormCoupledInputs.parts().lock({
dom: {
tag: 'button',
classes: ['tox-lock', 'tox-button', 'tox-button--naked', 'tox-button--icon'],
attributes: {
title: providersBackstage.translate(spec.label.getOr('Constrain proportions')) // TODO: tooltips AP-213
}
},
components: [
{
dom: {
tag: 'span',
classes: ['tox-icon', 'tox-lock-icon__lock'],
innerHtml: Icons.get('lock', providersBackstage.icons)
}
},
{
dom: {
tag: 'span',
classes: ['tox-icon', 'tox-lock-icon__unlock'],
innerHtml: Icons.get('unlock', providersBackstage.icons)
}
}
],
buttonBehaviours: Behaviour.derive([
Tabstopping.config({})
])
});
const formGroup = (components) => {
return {
dom: {
tag: 'div',
classes: [ 'tox-form__group' ]
},
components
};
};
const getFieldPart = (isField1) => AlloyFormField.parts().field({
factory: AlloyInput,
inputClasses: ['tox-textfield'],
inputBehaviours: Behaviour.derive([
Tabstopping.config({}),
AddEventsBehaviour.config('size-input-events', [
AlloyEvents.run(NativeEvents.focusin(), function (component, simulatedEvent) {
AlloyTriggers.emitWith(component, ratioEvent, { isField1 });
}),
AlloyEvents.run(NativeEvents.change(), function (component, simulatedEvent) {
AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name });
})
])
]),
selectOnFocus: false
});
const getLabel = (label: string) => {
return {
dom: {
tag: 'label',
classes: ['tox-label'],
innerHtml: providersBackstage.translate(label)
}
};
};
const widthField = AlloyFormCoupledInputs.parts().field1(
formGroup([ AlloyFormField.parts().label(getLabel('Width')), getFieldPart(true) ])
);
const heightField = AlloyFormCoupledInputs.parts().field2(
formGroup([ AlloyFormField.parts().label(getLabel('Height')), getFieldPart(false) ])
);
return AlloyFormCoupledInputs.sketch({
dom: {
tag: 'div',
classes: ['tox-form__group']
},
components: [
{
dom: {
tag: 'div',
classes: ['tox-form__controls-h-stack']
},
components: [
// NOTE: Form coupled inputs to the FormField.sketch themselves.
widthField,
heightField,
formGroup([
getLabel(' '),
pLock
])
]
}
//.........这里部分代码省略.........
示例4: sequence
const renderField = (s) => {
return {
uid: s.uid,
dom: {
tag: 'div',
classes: [ 'tox-dropzone-container' ]
},
behaviours: Behaviour.derive([
RepresentingConfigs.memory([ ]),
ComposingConfigs.self(),
Disabling.config({}),
Toggling.config({
toggleClass: 'dragenter',
toggleOnExecute: false
}),
AddEventsBehaviour.config('dropzone-events', [
AlloyEvents.run('dragenter', sequence([ stopper, Toggling.toggle ])),
AlloyEvents.run('dragleave', sequence([ stopper, Toggling.toggle ])),
AlloyEvents.run('dragover', stopper),
AlloyEvents.run('drop', sequence([ stopper, onDrop ])),
AlloyEvents.run(NativeEvents.change(), onSelect)
]),
]),
components: [
{
dom: {
tag: 'div',
classes: [ 'tox-dropzone' ],
styles: {}
},
components: [
{
dom: {
tag: 'p',
innerHtml: providersBackstage.translate('Drop an image here')
}
},
Button.sketch({
dom: {
tag: 'button',
innerHtml: providersBackstage.translate('Browse for an image'),
styles: {
position: 'relative'
},
classes: [ 'tox-button', 'tox-button--secondary']
},
components: [
memInput.asSpec()
],
action: (comp) => {
const inputComp = memInput.get(comp);
inputComp.element().dom().click();
},
buttonBehaviours: Behaviour.derive([
Tabstopping.config({ })
])
})
]
}
]
};
};示例5:
const item = (disabled: boolean) => Disabling.config({
disabled,
disableClass: 'tox-collection__item--state-disabled'
});