本文整理匯總了TypeScript中@cycle/dom.h函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript h函數的具體用法？TypeScript h怎麽用？TypeScript h使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了h函數的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: renderPlayPauseControls
function renderPlayPauseControls(playing: boolean): VNode {
if (!playing) {
return h("polygon", {
class: { play: true },
attrs: { points: "10,55 40,70 10,85", fill: "lime" }
});
}
return h("g", { class: { pause: true } }, [
h("rect", {
attrs: {
x: 15,
y: 55,
height: 30,
width: 5,
fill: "lime"
}
}),
h("rect", {
attrs: {
x: 30,
y: 55,
height: 30,
width: 5,
fill: "lime"
}
})
]);
}示例2: renderInput
function renderInput(project: Project, scenario: Scenario): VNode {
project;
scenario;
const controlWidth = 50;
const inputRanges = inputEventsToRanges(scenario.input, project.keys);
const keys = Object.keys(inputRanges).sort();
const ranges = keys.map(key => ({ key, input: inputRanges[key] }));
return h(
"svg",
{ attrs: { width: 800, height: 50 }, class: { "input-controls": true } },
[
h("rect", {
attrs: {
x: controlWidth,
y: 0,
width: 750,
height: 50,
fill: "#181818"
}
}),
...ranges.map(renderInputRange)
]
);
}示例3: renderHealthBar
function renderHealthBar (player: PlayerState | EnemyState) {
const width = 50;
const height = 6;
const healthRatio = player.health / player.maxHealth;
const yOffset = 65;
return [
h('rect', {
attrs: {
fill: 'red',
stroke: 'black',
x: player.position.x - width / 2,
y: player.position.y + yOffset - height / 2,
width,
height
}
}),
h('rect', {
attrs: {
fill: 'lime',
x: player.position.x - width / 2,
y: player.position.y + yOffset - height / 2,
width: width * healthRatio,
height: height
}
})
]
}示例4: h
const App = () => ({
DOM: xs.of(
h('div.app', [
h('h1', 'Enter the lairs'),
h('p', 'Lorem ipsum')
])
)
});示例5: renderRecordControls
function renderRecordControls(recording: boolean): VNode {
if (recording) {
return h("circle", {
class: { "stop-recording": true },
attrs: { cx: 25, cy: 25, r: 15, fill: "darkred" }
});
}
return h("circle", {
class: { record: true },
attrs: { cx: 25, cy: 25, r: 15, fill: "red" }
});
}示例6: selectForArray
function selectForArray(name: string, optionStrings: string[], lowIndex: number, highIndex: number, selectedValue: string, addBlank: boolean) {
let options = [];
if (addBlank) {
options.push(h('option', { attrs: {value: '', selected: selectedValue == null } }));
}
d3.range(lowIndex, highIndex).forEach(i => {
let optionString = optionStrings[i];
options.push(h('option', { attrs: {value: optionString, selected: optionString == selectedValue } }, optionString));
});
var select = h('select' + CategoryPopupClassName, options);
return select;
}示例7: view
function view([actor, nameVtree]: [Actor, VNode]): VNode {
return div(".actor-panel.flex-column", [
div(".attributes.flex-column", [
nameVtree,
"Width",
input(".width", { props: { value: actor.width } }),
"Height",
input(".height", { props: { value: actor.height } }),
"Color",
input(".color", { props: { value: actor.color } }),
button(".add-to-scenario", "Add to scenario")
]),
div(".sidebar-preview.flex-column", [
"Preview",
h(
"svg",
{
attrs: { height: 300, viewBox: `-150 -150 300 300` },
style: { background: "#222" }
},
[renderActor(actor, [], 0, 0, 0)]
)
])
]);
}示例8: view
function view ([id, state]) {
const time = new Date().getTime();
const player = state.players[id];
const groups = [
...Object.values(state.players).map(player => renderPlayer(player, time)),
...state.enemies.map(enemy => renderEnemy(enemy, time, player.target))
];
return (
h('svg', {
attrs: {
width: '100vw',
height: '100vh',
xmlns: "http://www.w3.org/2000/svg",
'xmlns:xlink': 'http://www.w3.org/1999/xlink'
}
}, [
defs,
...groups.sort((a, b) => a.data.attrs.y - b.data.attrs.y),
renderInventory(player.inventory)
])
);
}示例9: control
function control(state: State) {
// Build a selector for each chosen category.
// The first category will always have some choice, but the others will default to blank (unchosen).
let unchosenCategories = new Set(state.categories);
let stop = false;
let selects = [];
state.selectedCategories.forEach(pair => {
if (stop) return;
let [categoryName, categoryValue] = pair;
if (!unchosenCategories.has(categoryName)) {
stop = true;
} else {
selects.push(selectForArray('',
Array.from(unchosenCategories.values()),
0,
unchosenCategories.size,
categoryName,
selects.length > 0));
selects.push(h('br'));
unchosenCategories.delete(categoryName);
}
});
if (unchosenCategories.size > 0) {
selects.push(selectForArray('', Array.from(unchosenCategories.values()), 0, unchosenCategories.size, null, true));
}
let foo = selectForArray('foobar', state.categories, 0, state.categories.length, state.selectedCategories[0][0], false);
return div('#formdiv', [
h('form', { attrs: { id: 'controlForm'} }, selects)
]);
}示例10: renderInventory
function renderInventory (inventory) {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const width = (64 + 8) * 8 + 8;
const height = 80;
const slots = [0, 1, 2, 3, 4, 5, 6, 7];
return (
h('g', [
h('rect', {
attrs: {
x: windowWidth / 2 - width / 2,
y: windowHeight - height,
width,
height,
fill: '#343'
}
}),
...slots.map(i => (
h('rect', {
attrs: {
x: 8 + windowWidth / 2 - width / 2 + i * 72,
y: 8 + windowHeight - height,
width: 64,
height: 64,
fill: '#565'
}
})
)),
...inventory.map((item, index) => (
h('image', {
attrs: {
href: '/scroll.png',
x: 8 + windowWidth / 2 - width / 2 + index * 64,
y: 8 + windowHeight - height,
width: 64,
height: 64
}
})
))
])
)
}