本文整理匯總了TypeScript中@ephox/alloy.SplitToolbar.sketch方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript SplitToolbar.sketch方法的具體用法？TypeScript SplitToolbar.sketch怎麽用？TypeScript SplitToolbar.sketch使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/alloy.SplitToolbar的用法示例。
在下文中一共展示了SplitToolbar.sketch方法的1個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: renderToolbarGroupCommon
const renderMoreToolbar = (toolbarSpec: ToolbarSpec) => {
const modeName: any = toolbarSpec.cyclicKeying ? 'cyclic' : 'acyclic';
const memOverflow = Memento.record(
AlloyToolbar.sketch({
dom: {
tag: 'div',
classes: ['tox-toolbar__overflow']
},
toolbarBehaviours: Behaviour.derive([
Keying.config({
// THIS IS USED FOR FLOATING AND NOT SLIDING
mode: 'cyclic',
onEscape: () => {
AlloyTriggers.emit(toolbarSpec.moreDrawerData.lazyToolbar(), 'alloy.toolbar.toggle');
Keying.focusIn(toolbarSpec.moreDrawerData.lazyMoreButton());
return Option.some(true);
}
})
])
})
);
const getOverflow = (toolbar) => {
return toolbarSpec.getSink().toOption().bind((sink) => {
return memOverflow.getOpt(sink).bind(
(overflow) => {
return SplitAlloyToolbar.getMoreButton(toolbar).bind((_moreButton) => {
if (overflow.getSystem().isConnected()) {
// you have the build thing, so just return it
Positioning.position(sink, toolbarSpec.backstage.shared.anchors.toolbarOverflow(), overflow);
return Option.some(overflow);
} else {
return Option.none();
}
});
}
);
});
};
const primary = SplitAlloyToolbar.parts().primary({
dom: {
tag: 'div',
classes: ['tox-toolbar__primary']
}
});
const splitToolbarComponents = toolbarSpec.moreDrawerData.floating ? [
primary
] : [
primary,
SplitAlloyToolbar.parts().overflow({
dom: {
tag: 'div',
classes: [ 'tox-toolbar__overflow' ]
}
})
];
return SplitAlloyToolbar.sketch({
uid: toolbarSpec.uid,
dom: {
tag: 'div',
classes: ['tox-toolbar-overlord']
},
floating: toolbarSpec.moreDrawerData.floating,
overflow: getOverflow,
parts: {
// This already knows it is a toolbar group
'overflow-group': renderToolbarGroupCommon({
title: Option.none(),
items: []
}),
'overflow-button': renderIconButtonSpec({
name: 'more',
icon: Option.some('more-drawer'),
disabled: false,
tooltip: Option.some('More...')
}, Option.none(), toolbarSpec.backstage.shared.providers)
},
components: splitToolbarComponents,
markers: {
openClass: 'tox-toolbar__overflow--open',
closedClass: 'tox-toolbar__overflow--closed',
growingClass: 'tox-toolbar__overflow--growing',
shrinkingClass: 'tox-toolbar__overflow--shrinking',
overflowToggledClass: ToolbarButtonClasses.Ticked
},
splitToolbarBehaviours: getToolbarbehaviours(toolbarSpec, modeName, Option.some(memOverflow))
});
};