How to use the @cycle/dom.h3 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.
cyclejs-community / cyclejs-sortable / docs / examples / horizontal / src / index.ts View on Github 
function main({ DOM }: Sources): Sinks {
const vdom$: Observable = Observable.of(
div([
h3('Horizontal too!'),
p('this is running with RxJS'),
ul('.ul', [
li('.li', '', ['Option 1']),
li('.li', '', ['Option 2']),
li('.li', '', ['Option 3']),
li('.li', '', ['Option 4']),
li('.li', '', ['Option 5']),
li('.li', '', ['Option 6'])
])
])
).let(
makeSortable>(DOM, {
parentSelector: '.ul'
})
);const render = ({table, formula}) => div([
h1('.modal-box-title', 'Export...'),
h3('ASCII Table'),
div([
textarea('.export-text', {
attributes: {readonly: true},
}, table ? table.toString() : ''),
]),
h3('Expression'),
div([
input('.export-text-single', {
attributes: {readonly: true},
value: table ? formula.toString() : '',
}),
]),
])
;export default function getBody(results){
let selectedLine = results[0].length > 0 ? 'Selected line: ' + results[0] : "";
return div(".container", [
h1("#title", ["Reactive Live London Tube trains status"]),
select("#lines", [
option({attrs: { value: 'piccadilly' }}, ["Piccadilly line"]),
option({attrs: { value: 'northern' }}, ["Northern line"]),
option({attrs: { value: 'bakerloo' }}, ["Bakerloo line"]),
option({attrs: { value: 'central' }}, ["Central line"]),
option({attrs: { value: 'district' }}, ["District line"]),
option({attrs: { value: 'circle' }}, ["Circle line"]),
option({attrs: { value: 'victoria' }}, ["Victora line"]),
]),
h3("#selectedLine", [selectedLine]),
renderTrainsData(results[1])
]);
}const render = ({table, formula, tree}) => div([
h1('.modal-box-title', 'Export...'),
h3('ASCII Table'),
div([
textarea('.export-text', {
attributes: {readonly: true},
}, table ? table.toString() : ''),
]),
h3('Formula'),
div([
input('.export-text-single', {
attributes: {readonly: true},
value: formula,
}),
]),
h3('LaTeX Forest Tree'),
div([
input('.export-text-single', {
attributes: {readonly: true},
value: tree,
}),
]),
])
;const invoice = inv => qrinv(inv).then(qr => ({ unitf, conf: { expert } }) =>
div('.waiting-payment', [
div('.row', [
div('.col-sm-6.text-center', [
h2('Waiting for payment')
, inv.msatoshi !== 'any' ? h3('.toggle-unit', unitf(inv.msatoshi)) : ''
, small('.d-none.d-sm-block.text-muted.break-all.mt-3', inv.bolt11)
])
, div('.col-sm-6.text-center', [
img('.qr', { attrs: { src: qr } })
, small('.d-block.d-sm-none.text-muted.break-all.mt-3', inv.bolt11)
])
])
, expert ? yaml(omitKey('bolt11', inv)) : ''
]))div('.flex-auto', { style: { width: '0' } }, [
h3('.f5.mb3', 'Ultimas publicaciones'),
div('.tl.boxed', { style: { padding: '0' } }, [
posts === false ? div('.loading') : null,
posts !== false
? div(
posts.feed.map(post =>
postView({ post, subcategories })
)
)
: null,
]),
]),
div('.ph3'),
div('.flex-auto', { style: { width: '0' } }, [
h3('.f5.mb3', 'Ultimos comentarios'),
div('.tl.boxed', { style: { padding: '0' } }, [
comments === false ? div('.loading') : null,
comments !== false
? div(
comments.activity.map(comment =>
commentView({ comment })
)
)
: null,
]),
]),
]),
]),
]);
});
}const invoice = inv => qruri(inv).then(qr => ({ unitf, conf: { expert } }) =>
div('.text-center.text-md-left', [
h2('Waiting for payment')
, inv.msatoshi !== 'any' ? h3('.toggle-unit', unitf(inv.msatoshi)) : ''
, img('.qr', { attrs: { src: qr } })
, small('.d-block.text-muted.break-all.mt-3', inv.bolt11)
, expert ? yaml(inv) : ''
]))'Escribe aquí el contenido de tu publicación',
rows: 8,
},
hook: {
insert: vnode => {
vnode.elm.value = content;
autosize(vnode.elm);
},
},
}),
]),
input('.btn.btn-primary.btn-block', {
attrs: { type: 'submit', value: 'Continuar', disabled: !ready },
}),
div('.mt3', [
h3(
'.f5.fw6',
'Sugerencias para obtener más y mejores respuestas y comentarios:'
),
ol('.pa0.ma0.measure.lh-copy', [
li(
'Lee nuevamente tu publicación antes de enviarla. Procura que sea clara y entendible.'
),
li(
'Si son varias preguntas, trata de empezar por las más importantes. Evita abrumar con mucha info y ve al punto.'
),
li(
'Gana reputación agradeciendo a los que te ayuden o contribuyan a tu tema.'
),
]),
]),
]),const render = ({pla, json}) => div([
h1('.modal-box-title', 'Export...'),
h3('PLA'),
div([
textarea('.export-text', {
attributes: {readonly: true},
}, formatPLA(pla)),
]),
h3(`Formula (${pla.mode ? pla.mode.toUpperCase() : '?'})`),
div([
input('.export-text-single', {
attributes: {readonly: true},
value: plaFormula(mathFormatter, pla),
}),
]),
h3('JSON'),
div([
a('.block-button',{
href: URL.createObjectURL(function view(children$, name = '') {
const loading = h3('Loading...');
return children$.map(children =>
div('#the-view', children.length > 0 ? children : [loading])
);
}@cycle/dom
The standard DOM Driver for Cycle.js, based on Snabbdom
