本文整理匯總了TypeScript中@ephox/alloy.Container.sketch方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript Container.sketch方法的具體用法？TypeScript Container.sketch怎麽用？TypeScript Container.sketch使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/alloy.Container的用法示例。
在下文中一共展示了Container.sketch方法的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1:
export const renderHtmlPanel = (spec: HtmlPanelFoo): SketchSpec => {
if (spec.presets === 'presentation') {
return AlloyContainer.sketch({
dom: {
tag: 'div',
classes: [ 'tox-form__group' ],
innerHtml: spec.html
}
});
} else {
return AlloyContainer.sketch({
dom: {
tag: 'div',
classes: [ 'tox-form__group' ],
innerHtml: spec.html,
attributes: {
role: 'document'
}
},
containerBehaviours: Behaviour.derive([
Tabstopping.config({ }),
Focusing.config({ })
])
});
}
};示例2: function
export default function () {
const ephoxUi = SelectorFind.first('#ephox-ui').getOrDie();
const fontSlider = Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-toolbar ${prefix}-context-toolbar"></div>'),
components: [
{
dom: UiDomFactory.dom('<div class="${prefix}-toolbar-group"></div>'),
components: FontSizeSlider.makeItems({
onChange: Fun.noop,
getInitialValue: Fun.constant(2)
})
}
]
});
const colorSlider = Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-toolbar ${prefix}-context-toolbar"></div>'),
components: [
{
dom: UiDomFactory.dom('<div class="${prefix}-toolbar-group"></div>'),
components: ColorSlider.makeItems({
onChange: Fun.noop,
getInitialValue: Fun.constant(-1)
})
}
]
});
const gui = Gui.create();
Attachment.attachSystem(ephoxUi, gui);
const container = GuiFactory.build({
dom: UiDomFactory.dom('<div class="{prefix}-outer-container ${prefix}-fullscreen-maximized"></div>'),
components: [
{
dom: UiDomFactory.dom('<div class="${prefix}-toolstrip"></div>'),
components: [ fontSlider ]
},
{
dom: UiDomFactory.dom('<div class="${prefix}-toolstrip"></div>'),
components: [ colorSlider ]
}
]
});
gui.add(container);
}示例3: 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
};
};示例4: function
const field = function (name, placeholder) {
const inputSpec = Memento.record(Input.sketch({
placeholder,
onSetValue (input, data) {
// If the value changes, inform the container so that it can update whether the "x" is visible
AlloyTriggers.emit(input, NativeEvents.input());
},
inputBehaviours: Behaviour.derive([
Composing.config({
find: Option.some
}),
Tabstopping.config({ }),
Keying.config({
mode: 'execution'
})
]),
selectOnFocus: false
}));
const buttonSpec = Memento.record(
Button.sketch({
dom: UiDomFactory.dom('<button class="${prefix}-input-container-x ${prefix}-icon-cancel-circle ${prefix}-icon"></button>'),
action (button) {
const input = inputSpec.get(button);
Representing.setValue(input, '');
}
})
);
return {
name,
spec: Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-input-container"></div>'),
components: [
inputSpec.asSpec(),
buttonSpec.asSpec()
],
containerBehaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('input-container-empty')
}),
Composing.config({
find (comp) {
return Option.some(inputSpec.get(comp));
}
}),
AddEventsBehaviour.config(clearInputBehaviour, [
// INVESTIGATE: Because this only happens on input,
// it won't reset unless it has an initial value
AlloyEvents.run(NativeEvents.input(), function (iContainer) {
const input = inputSpec.get(iContainer);
const val = Representing.getValue(input);
const f = val.length > 0 ? Toggling.off : Toggling.on;
f(iContainer);
})
])
])
})
};
};示例5: renderColorInput
(store, doc, body) => {
return GuiFactory.build(
Container.sketch({
dom: {
classes: [ 'colorinput-container' ]
},
components: [
renderColorInput({
type: 'colorinput',
name: 'alpha',
label: Option.some('test-color-input'),
}, helpers.shared, {
colorPicker: (callback, value) => {},
hasCustomColors: () => true,
getColors: () => [
{ type: choiceItem, text: 'Turquoise', value: '#18BC9B' },
{ type: choiceItem, text: 'Green', value: '#2FCC71' },
{ type: choiceItem, text: 'Blue', value: '#3598DB' },
{ type: choiceItem, text: 'Purple', value: '#9B59B6' },
{ type: choiceItem, text: 'Navy Blue', value: '#34495E' }
],
getColorCols: () => 3
})
]
})
);
},示例6:
const makeGroup = (edge, buttons): SketchSpec => Container.sketch({
dom: {
tag: 'div',
classes: [ `tox-dialog__footer-${edge}` ]
},
components: Arr.map(buttons, (button) => button.memento.asSpec())
});示例7: 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
};
};示例8:
const pFooterGroup = (startButtons: AlloySpec[], endButtons: AlloySpec[]) => {
return [
Container.sketch({
dom: {
tag: 'div',
classes: [ `tox-dialog__footer-start` ]
},
components: startButtons
}),
Container.sketch({
dom: {
tag: 'div',
classes: [ `tox-dialog__footer-end` ]
},
components: endButtons
})
];
};示例9: function
components: Arr.map(spec.fields, function (field, i) {
return i <= spec.maxFieldIndex ? Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-serialised-dialog-screen"></div>'),
components: [
navigationButton(-1, 'previous', (i > 0)),
parts.field(field.name, field.spec),
navigationButton(+1, 'next', (i < spec.maxFieldIndex))
]
}) : parts.field(field.name, field.spec);
})示例10: function
const sketch = function (onView, translate): SketchSpec {
const memIcon = Memento.record(
Container.sketch({
dom: UiDomFactory.dom('<div aria-hidden="true" class="${prefix}-mask-tap-icon"></div>'),
containerBehaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('mask-tap-icon-selected'),
toggleOnExecute: false
})
])
})
);
const onViewThrottle = Throttler.first(onView, 200);
return Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-disabled-mask"></div>'),
components: [
Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-content-container"></div>'),
components: [
Button.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-content-tap-section"></div>'),
components: [
memIcon.asSpec()
],
action (button) {
onViewThrottle.throttle();
},
buttonBehaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('mask-tap-icon-selected')
})
])
})
]
})
]
});
};