本文整理汇总了TypeScript中@ephox/alloy.GuiFactory.premade方法的典型用法代码示例。如果您正苦于以下问题：TypeScript GuiFactory.premade方法的具体用法？TypeScript GuiFactory.premade怎么用？TypeScript GuiFactory.premade使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类@ephox/alloy.GuiFactory的用法示例。
在下文中一共展示了GuiFactory.premade方法的6个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1:
moveTo: (x: number, y: number) => {
InlineView.showAt(notificationWrapper, {
anchor: 'makeshift',
x,
y
}, GuiFactory.premade(notification));
},示例2:
Arr.last(stack.get()).each((last) => {
stack.set(stack.get().slice(0, stack.get().length - 1));
AlloyTriggers.emitWith(comp, changeSlideEvent, {
// Because we are using premade, we should have access to the same element
// to give focus (although it isn't working)
contents: GuiFactory.premade(last.bar),
focus: last.focus
});
});示例3: closeWindow
const factory = (contents: Types.Dialog.Dialog<T>, internalInitialData: T, dataValidator: Processor): Types.Dialog.DialogInstanceApi<T> => {
const initialData = validateData<T>(internalInitialData, dataValidator);
const dialogInit = {
dataValidator,
initialData,
internalDialog: contents
};
const dialogUi = renderInlineDialog<T>(
dialogInit,
{
redial: DialogManager.DialogManager.redial,
closeWindow: () => {
InlineView.hide(inlineDialog);
closeWindow(dialogUi.instanceApi);
}
},
extras.backstage, ariaAttrs
);
const inlineDialog = GuiFactory.build(InlineView.sketch({
lazySink: extras.backstage.shared.getSink,
dom: {
tag: 'div',
classes: [ ]
},
// Fires the default dismiss event.
fireDismissalEventInstead: { },
inlineBehaviours: Behaviour.derive([
AddEventsBehaviour.config('window-manager-inline-events', [
// Can't just fireDimissalEvent formCloseEvent, because it is on the parent component of the dialog
AlloyEvents.run(SystemEvents.dismissRequested(), (comp, se) => {
AlloyTriggers.emit(dialogUi.dialog, formCancelEvent);
})
])
])
}));
InlineView.showAt(
inlineDialog,
anchor,
GuiFactory.premade(dialogUi.dialog)
);
dialogUi.instanceApi.setData(initialData);
Keying.focusIn(dialogUi.dialog);
return dialogUi.instanceApi;
};示例4: function
export default function () {
const makeGroup = function (gSpec) {
const scrollClass = gSpec.scrollable === true ? '${prefix}-toolbar-scrollable-group' : '';
return {
dom: UiDomFactory.dom('<div aria-label="' + gSpec.label + '" class="${prefix}-toolbar-group ' + scrollClass + '"></div>'),
tgroupBehaviours: Behaviour.derive([
AddEventsBehaviour.config('adhoc-scrollable-toolbar', gSpec.scrollable === true ? [
AlloyEvents.runOnInit(function (component, simulatedEvent) {
Css.set(component.element(), 'overflow-x', 'auto');
Scrollables.markAsHorizontal(component.element());
Scrollable.register(component.element());
})
] : [ ])
]),
components: [
Container.sketch({
components: [
ToolbarGroup.parts().items({ })
]
})
],
markers: {
itemClass: Styles.resolve('toolbar-group-item')
},
items: gSpec.items
};
};
const toolbar = GuiFactory.build(
Toolbar.sketch(
{
dom: UiDomFactory.dom('<div class="${prefix}-toolbar"></div>'),
components: [
Toolbar.parts().groups({ })
],
toolbarBehaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('context-toolbar'),
toggleOnExecute: false,
aria: {
mode: 'none'
}
}),
Keying.config({
mode: 'cyclic'
})
]),
shell: true
}
)
);
const wrapper = GuiFactory.build(
Container.sketch({
dom: {
classes: [ Styles.resolve('toolstrip') ]
},
components: [
GuiFactory.premade(toolbar)
],
containerBehaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('android-selection-context-toolbar'),
toggleOnExecute: false
})
])
})
);
const resetGroups = function () {
Toolbar.setGroups(toolbar, initGroups.get());
Toggling.off(toolbar);
};
const initGroups = Cell([ ]);
const setGroups = function (gs) {
initGroups.set(gs);
resetGroups();
};
const createGroups = function (gs) {
return Arr.map(gs, Fun.compose(ToolbarGroup.sketch, makeGroup));
};
const refresh = function () {
Toolbar.refresh(toolbar);
};
const setContextToolbar = function (gs) {
Toggling.on(toolbar);
Toolbar.setGroups(toolbar, gs);
};
const restoreToolbar = function () {
if (Toggling.isOn(toolbar)) {
resetGroups();
//.........这里部分代码省略.........
示例5: function
const showEdit = function (socket, switchToEdit) {
Replacing.append(socket, GuiFactory.premade(switchToEdit));
};示例6: function
export default function () {
const makeGroup = function (gSpec) {
const scrollClass = gSpec.scrollable === true ? '${prefix}-toolbar-scrollable-group' : '';
return {
dom: UiDomFactory.dom('<div aria-label="' + gSpec.label + '" class="${prefix}-toolbar-group ' + scrollClass + '"></div>'),
tgroupBehaviours: Behaviour.derive([
AddEventsBehaviour.config('adhoc-scrollable-toolbar', gSpec.scrollable === true ? [
AlloyEvents.runOnInit(function (component, simulatedEvent) {
Css.set(component.element(), 'overflow-x', 'auto');
Scrollables.markAsHorizontal(component.element());
Scrollable.register(component.element());
})
] : [ ])
]),
components: [
Container.sketch({
components: [
ToolbarGroup.parts().items({ })
]
})
],
markers: {
// TODO: Now that alloy isn't marking the items with the old
// itemClass here, this navigation probably doesn't work. But
// it's mobile. However, bluetooth keyboards will need to be fixed
// Essentially, all items put in the toolbar will need to be given
// this class if they are to be part of keyboard navigation
itemSelector: '.' + Styles.resolve('toolbar-group-item')
},
items: gSpec.items
};
};
const toolbar = GuiFactory.build(
Toolbar.sketch(
{
dom: UiDomFactory.dom('<div class="${prefix}-toolbar"></div>'),
components: [
Toolbar.parts().groups({ })
],
toolbarBehaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('context-toolbar'),
toggleOnExecute: false,
aria: {
mode: 'none'
}
}),
Keying.config({
mode: 'cyclic'
})
]),
shell: true
}
)
) as AlloyComponent;
const wrapper = GuiFactory.build(
Container.sketch({
dom: {
classes: [ Styles.resolve('toolstrip') ]
},
components: [
GuiFactory.premade(toolbar)
],
containerBehaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('android-selection-context-toolbar'),
toggleOnExecute: false
})
])
})
) as AlloyComponent;
const resetGroups = function () {
Toolbar.setGroups(toolbar, initGroups.get());
Toggling.off(toolbar);
};
const initGroups = Cell([ ]);
const setGroups = function (gs) {
initGroups.set(gs);
resetGroups();
};
const createGroups = function (gs) {
return Arr.map(gs, Fun.compose(ToolbarGroup.sketch, makeGroup));
};
const refresh = function () {
// Toolbar.refresh is undefined
// Toolbar.refresh(toolbar);
};
const setContextToolbar = function (gs) {
Toggling.on(toolbar);
//.........这里部分代码省略.........