本文整理匯總了TypeScript中@cycle/dom.span函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript span函數的具體用法？TypeScript span怎麽用？TypeScript span使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了span函數的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: renderSpeedPicker
export function renderSpeedPicker(speed: ZapSpeed): VNode {
return div(`.speedPicker.${styles.speedPickerStyle}`, [
span(`.${styles.speedPickerLabelStyle}`, 'Speed'),
button({
class: {
'slowSpeedButton': true,
[styles.speedPickerSlowStyle]: true,
[styles.speedPickerSelectedStyle]: speed === 'slow',
},
}, '\u003E'),
button({
class: {
'normalSpeedButton': true,
[styles.speedPickerNormalStyle]: true,
[styles.speedPickerSelectedStyle]: speed === 'normal',
},
}, '\u226B'),
button({
class: {
'fastSpeedButton': true,
[styles.speedPickerFastStyle]: true,
[styles.speedPickerSelectedStyle]: speed === 'fast',
},
}, '\u22D9'),
]);
}示例2: div
.map(([props, value]) =>
div('.labeled-slider', [
span('.label', [ props.label + ' ' + value + props.unit ]),
input('.slider', {
attrs: {type: 'range', min: props.min, max: props.max, value: value}
}),
]),示例3: div
...Object.keys(errorLevels[actorId]).map(scenarioId => {
let scenarioName = "";
if (scenarioId !== "_total") {
const scenario = project.scenarios.find(
scenario => scenario.id === scenarioId
);
scenarioName = scenario && scenario.name || "";
} else {
scenarioName = "Total";
}
return div(".error-level", [
span(".emoji", errorLevelEmoji(errorLevels[actorId][scenarioId])),
span(scenarioName)
]);
})示例4: div
).map(([
scoreDom,
newGameDom,
gridDom
]) => {
return div('#root', [
div('.container', [
header([
div('.title.bar', [
h1(['Recall']),
scoreDom
]),
div('.info', [
p([
'Click on the ',
strong(['nine tiles you see']),
' to win!'
]),
newGameDom
])
]),
main([
div('.panel', [gridDom])
]),
footer([
'Made with ',
span('.heart', '❤'),
' using ',
span('.cycle', 'Cycle.js'),
' by ',
a('.author', { props: { href: 'https://github.com/artfuldev' } }, '@artfuldev'),
div([
a('.source', { props: { href: 'https://github.com/artfuldev/recall-cycle/tree/gh-pages/' } }, 'View Source')
])
])
])
]);
});示例5: vFooter
function vFooter() {
return div('#footer', [
a(
'.footlink',
{props: {href: 'https://github.com/wizardwerdna/FRPBowlingKata'}},
'FRP Bowling'
),
span(' built by '),
a(
'.footlinke',
{props: {href: 'mailto:wizardwerdna@gmail.com'}},
'Andrew C. Greenberg'
)
]);
}示例6: li
...selected.map(each => li([
b(each.PRODUCTNAME),
span(` SKU ${each.PRODUCTSKU} (${each.TYPE})`),
br(),
ul('.list-unstyled.list-group', [
...each.TYPE === 'Kit' ? [
li('.list-group-item', `[Buy1Kit id="${each.PRODUCTID}" price="${each.PRICE1}]"`),
li('.list-group-item', `[ReturnToSpecials]`)
] : [
li('.list-group-item', `[Buy1Bottle id="${each.PRODUCTID}" price="${each.PRICE1}"]`),
li('.list-group-item', `[Buy1Case id="${each.PRODUCTID}" price="${each.PRICE2}"]`),
li('.list-group-item', `[ReturnToShop]`)
]
])
]))示例7: view
function view([name, editing]: [string, boolean]): VNode {
if (editing) {
return div(".project-name-container", [
div([
input(".project-name-input", { props: { value: name } }),
a(".save-project-name", " ✓ "),
a(".cancel-editing-project-name", " ✖ ")
])
]);
}
return div(".project-name-container", [
div([span(".project-name", `${name}`), a(".edit-project-name", " ✎ ")])
]);
}示例8: div
.map(state =>
div('.cell', [
span('.' + CellState[state].toLowerCase())
]));示例9: div
.map(([{ data, time, complete }, draggable]) =>
!!complete
? div('.complete', getOptions(time, false, true))
: div('.marble', getOptions(time, draggable, false), [span([data])])示例10: div
.map(score => div('.scores', [
div('.current.score', [span([score.toString()])]),
div('.best.score', [span([score.toString()])])
]));