本文整理汇总了TypeScript中@soil/dom.h.h2方法的典型用法代码示例。如果您正苦于以下问题：TypeScript h.h2方法的具体用法？TypeScript h.h2怎么用？TypeScript h.h2使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类@soil/dom.h的用法示例。
在下文中一共展示了h.h2方法的2个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: nutrientItem
function nutrientItem(rdi: ExtendedRdi) {
let className = 'incomplete'
if (rdi.pct >= 90) {
className = 'complete'
}
if (rdi.max && rdi.Nutr_Val > rdi.max) {
className = 'exceeding'
}
if (!rdi.max && rdi.pct >= 110) {
className = 'possibly-exceeding'
}
return h.li({className}, [
h.h2({}, [
h.a({
title: rdi.display_name ? rdi.NutrDesc : '',
href: '/top-foods/index.html?nutrient-id=' + rdi.Nutr_No
}, [rdi.display_name || rdi.NutrDesc])
]),
h.span({className: 'progress-start', title: 'Percentage and amount of the nutrient covered by 100 grams of this food'}, [
`${rdi.pct.toFixed(2)}${nbsp}%, ${rdi.Nutr_Val}${nbsp}${rdi.Units} (`,
h.abbr({title: 'Tolerable Upper Intake Level'}, ['UL']),
`: ${rdi.max ? `${rdi.max}\u2009${rdi.Units}` : `unkown`})`
]),
h.span({className: 'progress-end', title: 'Reference Daily Intake'}, [
rdi.value + nbsp + rdi.Units
]),
h.progress({max: 100, value: rdi.pct})
])
}示例2: removeModal
.then((data: FoodDetails) => {
const details = h.dl({}, [
h.dt({}, ['Food group']),
h.dd({}, [data.fdgrp_desc]),
h.dt({}, ['Common name']),
h.dd({}, [data.long_desc + (data.comname ? ` (${data.comname})` : '')]),
h.dt({}, ['Scientific name']),
h.dd({}, [data.sciname || nbsp]),
h.dt({}, ['Inedible']),
h.dd({}, [(data.refuse || 0) + '%']),
h.dt({}, ['Inedible parts']),
h.dd({}, [data.ref_desc || nbsp]),
h.dt({}, ['Manufacturer']),
h.dd({}, [data.manufacname || nbsp])
])
const nutrition = h.table({}, [
h.thead({}, [
h.tr({}, [
h.th({}, ['Nutrient']),
h.th({}, ['Value']),
h.th({}, ['Minimum']),
h.th({}, ['Maximum']),
h.th({}, [
h.abbr({title: 'Added for fortification or enrichment'}, ['Added'])
])
]),
]),
h.tbody({}, data.nutrition.map(nut => h.tr({}, [
h.td({}, [nut.nutrdesc]),
h.td({}, [nut.nutr_val + ' ' + nut.units]),
h.td({}, [nut.min + ' ' + nut.units]),
h.td({}, [nut.max + ' ' + nut.units]),
h.td({}, [nut.add_nutr_mark ? 'Yes' : 'No'])
])))
])
const sources = h.table({style: {marginBottom: '20px'}}, [
h.thead({}, [
h.tr({}, [
h.th({}, ['Title']),
h.th({}, ['Authors']),
h.th({}, ['Journal']),
h.th({}, ['Year'])
]),
]),
h.tbody({}, data.sources.map(src => h.tr({}, [
h.td({}, [src.title]),
h.td({}, [src.authors]),
h.td({}, [src.journal]),
h.td({}, [src.year])
])))
])
const modal = h.div({className: 'overlay', onclick: () => removeModal()}, [
h.div({className: 'padded modal', onclick: evt => evt.stopPropagation()}, [
h.h2({}, ['Details']),
details,
h.div({style: {clear: 'both'}}),
h.h2({}, ['Nutrition facts']),
nutrition,
h.h2({}, ['Sources']),
sources
])
])
document.body.appendChild(modal)
window.addEventListener('keydown', handleEscape)
function handleEscape(evt: KeyboardEvent) {
if (evt.key === 'Escape') {
removeModal()
}
}
function removeModal() {
modal.remove()
window.removeEventListener('keydown', handleEscape)
}
})