How to use the @cycle/dom.label function in @cycle/dom
To help you get started, we’ve selected a few @cycle/dom examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ivan-kleshnin / cyclejs-examples / 3.0-crud.alt / src / pages / user.edit.js View on Github 
.map(([navi, user, form, model, errors]) => {
console.log("render user.edit")
return div([
h1("Edit User"),
menu({navi}),
br(),
div(".form-element", [
label({htmlFor: "username"}, "Username:"),
br(),
input("#username", {type: "text", value: formatString(user.username), readOnly: true}),
p(errors.username),
]),
div(".form-element", [
label({htmlFor: "email"}, "Email:"),
br(),
input("#email", {type: "text", value: formatString(user.email), readOnly: true}),
p(errors.email),
]),
div(".form-element", [
label({htmlFor: "points"}, "Points:"),
br(),
input("#points", {type: "text", value: formatInteger(form.points), autocomplete: "off"}),
p(errors.points),
]),
div(".form-element", [
label({htmlFor: "bonus"}, "Bonus:"),
br(),
input("#bonus", {type: "text", value: formatInteger(form.bonus), autocomplete: "off"}),
p(errors.bonus),
]),h1('.ma0.pv3.tc', 'Completar publicación'),
form('.pv3', { attrs: { id: 'step1' } }, [
div('.form-group.pb2', [
label('.b.form-label', 'Título de la publicación'),
input('#title.form-input', {
attrs: {
type: 'text',
value: title,
placeholder:
'Escribe el titulo de tu publicación o pregunta...',
required: true,
},
}),
]),
div('.form-group.pb2', [
label('.b.form-label.pb0', '¿Es una pregunta?'),
p(
'.ma0',
small(
'De esta forma decidimos a quien mostrar tu publicación, a usuarios que responden o a usuarios que buscan respuestas.'
)
),
div(
'.form-group',
label('.form-switch.normal', [
input({
attrs: {
type: 'checkbox',
name: 'isQuestion',
checked: isQuestion,
},
}),const vdom$ = name$.map(name =>
div([
label('Name:'),
input('.field', { attrs: { type: 'text' } }),
hr(),
h1('Hello ' + name),
]),
);return state$.map(({title, completed, editing}) => {
let todoRootClasses = {
completed,
editing,
};
return li('.todoRoot', {class: todoRootClasses}, [
div('.view', [
input('.toggle', {
props: {type: 'checkbox', checked: completed},
}),
label(title),
button('.destroy')
]),
input('.edit', {
props: {type: 'text'},
hook: {
update: (oldVNode, {elm}) => {
elm.value = title;
if (editing) {
elm.focus();
elm.selectionStart = elm.value.length;
}
}
}
})
]);
});'.form-group',
label('.form-switch.normal', [
input({
attrs: {
type: 'checkbox',
name: 'disabledComments',
checked: disabledComments,
},
}),
i('.form-icon'),
'No permitir comentarios en esta publicación',
])
),
div(
'.form-group',
label('.form-switch.normal', [
input({
attrs: {
type: 'checkbox',
name: 'pinned',
checked: pinned,
},
}),
i('.form-icon'),
'Publicar como importante',
])
),
]),
div('.form-group.pb2', [
label('.b.form-label', 'Categoría principal'),
select(
'.form-select',DOM: state.map((state) => {
return div([
h1("Registration"),
div(".form-element", [
label({htmlFor: "username"}, "Username:"),
br(),
input("#username", {type: "text", autocomplete: "off"}),
]),
div(".form-element", [
label({htmlFor: "email"}, "Email:"),
br(),
input("#email", {type: "text", autocomplete: "off"}),
]),
hr(),
h2("State SPY"),
pre(JSON.stringify(state, null, 2)),
])
})
}p(errors.username),
]),
div(".form-element", [
label({htmlFor: "email"}, "Email:"),
br(),
input("#email", {type: "text", value: formatString(user.email), readOnly: true}),
p(errors.email),
]),
div(".form-element", [
label({htmlFor: "points"}, "Points:"),
br(),
input("#points", {type: "text", value: formatInteger(form.points), autocomplete: "off"}),
p(errors.points),
]),
div(".form-element", [
label({htmlFor: "bonus"}, "Bonus:"),
br(),
input("#bonus", {type: "text", value: formatInteger(form.bonus), autocomplete: "off"}),
p(errors.bonus),
]),
button("#submit.form-element", {type: "submit", disabled: !model}, "Edit"),
])
}
)'.form-group',
label('.form-switch.normal', [
input({
attrs: {
type: 'checkbox',
name: 'is_question',
checked: post.is_question,
},
}),
i('.form-icon'),
'La publicación es una pregunta',
])
),
div(
'.form-group',
label('.form-switch.normal', [
input({
attrs: {
type: 'checkbox',
name: 'lock',
checked: post.lock,
},
}),
i('.form-icon'),
'No permitir comentarios en esta publicación',
])
),
div(
'.form-group',
label('.form-switch.normal', [
input({
attrs: {(username, email) => {
return div([
h1("Registration"),
div(".form-element", [
label({htmlFor: "username"}, "Username:"),
br(),
input("#username", {type: "text", autocomplete: "off"}),
]),
div(".form-element", [
label({htmlFor: "email"}, "Email:"),
br(),
input("#email", {type: "text", autocomplete: "off"}),
]),
hr(),
h2("State SPY"),
pre(JSON.stringify({username, email}, null, 2)),
])
}
)@cycle/dom
The standard DOM Driver for Cycle.js, based on Snabbdom
