本文整理匯總了TypeScript中@cycle/dom.a函數的典型用法代碼示例。如果您正苦於以下問題:TypeScript a函數的具體用法?TypeScript a怎麽用?TypeScript a使用的例子?那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了a函數的10個代碼示例,這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚,您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: 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'
)
]);
}
示例2: 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", " ✎ ")])
]);
}
示例3: div
const vdom$ = user$.map(user =>
div('.users', [
button('.get-random', 'Get random user'),
user === null ? null : div('.user-details', [
h1('.user-name', user.name),
h4('.user-email', user.email),
a('.user-website', {attrs: {href: user.website}}, user.website),
]),
]),
示例4: a
.map(link => a({
attrs: {
class: "link",
title: link.title,
href: link.link
},
style: {
display: "block",
transform: `translate(${link.position.x}px, ${link.position.y}px)`
}
}, [img({ attrs: { src: link.image }})]))
示例5: vTitle
function vTitle() {
return div('#title', [
h1([
img({props: {src: 'Rx_Logo_S.png'}}),
a(
{props: {href: 'https://github.com/wizardwerdna/FRPBowlingKata'}},
'FRP Bowling'
),
img({props: {src: 'CycleJS_Logo.png'}}),
]),
h3('The Classic Kata in RxJS and CycleJS')
]);
}
示例6: 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')
])
])
])
]);
});
示例7: renderInvalidState
function renderInvalidState() {
return div(`.${invalidStateStyle}`, [
h1('Not a Cycle.js app with xstream'),
p('This page doesn\'t seem to be running a Cycle.js app using xstream ' +
'as the stream library. This DevTool only supports xstream. Or maybe ' +
'you are using xstream but an older version.'),
p('This DevTool requires that your app is built using the following ' +
'packages:'),
ul([
li([ pre('xstream'), ' v6.1.x or higher' ]),
li([ pre('@cycle/run'), ' v3.1.x or higher' ]),
li([ pre('@cycle/dom'), ' v12.2.x or higher, if you are using it' ]),
li([ pre('@cycle/http'), ' v10.2.x or higher, if you are using it' ]),
]),
p([
'Need help? The ',
a({ attrs: {
href: 'https://gitter.im/cyclejs/cyclejs',
target: '_blank',
}}, 'chat'),
' is usually friendly and helpful.',
]),
]);
}
示例8: homeView
function homeView(projects: Project[]): VNode {
return div(".welcome", [
h1("Helix Pi"),
div(".options", [
a(".new-project", "Create new project"),
div(".recent-projects", [
h2("Recent projects"),
div(
".projects.flex-column",
projects.map(project =>
a(
".goto-project",
{ attrs: { href: `/project/${project.id}` } },
project.name
)
)
)
])
])
]);
}
示例9: a
.map(([selector, content]) => a(selector, content));
示例10: li
operators.map(operator =>
li('.sidebar-link', [
a('.link', { props: { title: operator, href: `#/${operator}` } }, operator)
])