TypeScript @cycle/dom h2 Examples

Example #1

File: index.ts Project: cyclejs-community/typescript-starter-cycle

 .map(([backButton, contents]) =>
   div([
     backButton,
     h2(`.${className}`, ['Details']),
     hr(),
     ...contents
   ])

Example #2

File: index.ts Project: joeldentici/cyclejs

 function app() {
   return {
     html: xs.of(
       h('.test-element', [
         div([h2('.a', 'a'), h('h4.b', 'b'), h('h1.fooclass')]),
         div([h3('.c', 'c'), h('div', [h('p.d', 'd'), h('h2.barclass')])]),
       ]),
     ),
   };
 }

Example #3

File: header.ts Project: michalvankodev/portfolio

export default function Header(): Stream<VNode> {
    return xs.of(
        header('.main-header', {}, [
            // Profile picture
            // Contact information
            h1('.my-name', {}, 'Michal Vanko'),
            h2('.job-title', {}, 'Software developer')
        ])
    )
}

Example #4

File: index.ts Project: joeldentici/cyclejs

 const vdom$ = name$.map(name =>
   div([
     p([
       'First name',
       input('.first', { attrs: { type: 'text' } }),
     ]),
     p([
       'Last name',
       input('.last', { attrs: { type: 'text' } }),
     ]),
     h2('Hello ' + name),
   ]),

Example #5

File: editor.ts Project: helix-pi/helix-pi

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
            )
          )
        )
      ])
    ])
  ]);
}

Example #6

File: BmiCalculator.ts Project: joeldentici/cyclejs

 .map(([bmi, weightVTree, heightVTree]) =>
   div([
     weightVTree,
     heightVTree,
     h2('BMI is ' + bmi),
   ]),

Example #7

File: index.ts Project: cyclejs-community/typescript-starter-cycle

export const Home: RouteComponent = sources => ({
  dom: xs.of(h2(['Home'])),
  history: xs.empty()
});

Example #8

File: Counter.ts Project: mxstbr/cyclejs-counter

      .map(([count, incrementVTree, decrementVTree]) =>
        div([
          incrementVTree,
					decrementVTree,
					h2('Clicks: ' + count),
        ])

Example #9

File: index.ts Project: cyclejs-community/typescript-starter-cycle

 const vdom$ = content$.map(content =>
   div([
     h2('Commits List'),
     content
   ])

Example #10

File: index.ts Project: cyclejs-community/typescript-starter-cycle

export const About: RouteComponent = sources => ({
  dom: xs.of(h2(['About'])),
  history: xs.empty()
});