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.

github ivan-kleshnin / cyclejs-examples / 3.0-crud.alt / src / pages / user.edit.js View on Github external
.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),
        ]),
github tryanzu / frontend / src / containers / publisher.js View on Github external
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,
                            },
                        }),
github vivaxy / course / cycle-js / basic / index.js View on Github external
const vdom$ = name$.map(name =>
    div([
      label('Name:'),
      input('.field', { attrs: { type: 'text' } }),
      hr(),
      h1('Hello ' + name),
    ]),
  );
github cyclejs / todomvc-cycle / src / components / Task / view.js View on Github external
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;
            }
          }
        }
      })
    ]);
  });
github tryanzu / frontend / src / containers / publisher.js View on Github external
'.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',
github ivan-kleshnin / cyclejs-examples / 1.1-form / src / app.js View on Github external
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)),
      ])
    })
  }
github ivan-kleshnin / cyclejs-examples / 3.0-crud / src / pages / user.edit.js View on Github external
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"),
      ])
    }
  )
github tryanzu / frontend / src / components / post / views / postView.js View on Github external
'.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: {
github ivan-kleshnin / cyclejs-examples / 1.0-form / src / app.js View on Github external
(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)),
        ])
      }
    )