当前位置: 首页>>代码示例>>TypeScript>>正文


TypeScript dom.h类代码示例

本文整理汇总了TypeScript中@soil/dom.h的典型用法代码示例。如果您正苦于以下问题:TypeScript h类的具体用法?TypeScript h怎么用?TypeScript h使用的例子?那么, 这里精选的类代码示例或许可以为您提供帮助。


在下文中一共展示了h类的10个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。

示例1: nutrientSelect

export function nutrientSelect(args: {onChange: (nutrientId: string) => void, onLoad: (nutrient: api.Nutrient) => void}) {
    const $select = h.select({
        onchange: () => args.onChange($select.value)
    }, [
        h.option({disabled: true, selected: true}, ['Select a nutrient...'])
    ])

    get<api.Nutrient[]>(`${serverUrl}/nutrients`).then(nutrients => {
        nutrients.forEach(n => $select.appendChild(
            h.option({
                value: n.Nutr_No,
                title: n.display_name ? n.NutrDesc: ''
            }, [
                `${n.display_name || n.NutrDesc} (${n.Units})`
            ])
        ))

        if (nutrientId) {
            const nutrient = nutrients.find(n => n.Nutr_No === nutrientId)
            if (nutrient !== undefined) {
                $select.value = nutrientId
                args.onLoad(nutrient)
            }
        }
    })

    return $select
}
开发者ID:inad9300,项目名称:kiwibit,代码行数:28,代码来源:nutrientSelect.ts

示例2: showFoodDetails

 .map(f => h.li({}, [
     h.span({
         tabIndex: 0,
         style: {cursor: 'pointer'},
         onclick: () => showFoodDetails(f.ndb_no),
         onkeydown: evt => {
             if (evt.key === 'Enter') {
                 showFoodDetails(f.ndb_no)
             }
         }
     }, [f.long_desc])
 ]))
开发者ID:inad9300,项目名称:kiwibit,代码行数:12,代码来源:foods-details.ts

示例3: renderNoFoodScreen

function renderNoFoodScreen() {
    document.body.appendChild(
        h.div({className: 'no-food'}, [
            h.p({}, [
                foodId
                    ? `No food exists with id ${foodId}. Try finding another food.`
                    : 'No food id was present in the URL. Look for some food.'
            ]),
            h.a({
                onclick: () => $findFoodsModal.open(),
                title: 'Find details of some food'
            }, [
                icon('search')
            ])
        ])
    )
}
开发者ID:inad9300,项目名称:kiwibit,代码行数:17,代码来源:food-details.ts

示例4:

 nutrients.forEach(n => $select.appendChild(
     h.option({
         value: n.Nutr_No,
         title: n.display_name ? n.NutrDesc: ''
     }, [
         `${n.display_name || n.NutrDesc} (${n.Units})`
     ])
 ))
开发者ID:inad9300,项目名称:kiwibit,代码行数:8,代码来源:nutrientSelect.ts

示例5: 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})
    ])
}
开发者ID:inad9300,项目名称:kiwibit,代码行数:30,代码来源:food-details.ts

示例6: foodGroupCircle

export function foodGroupCircle(foodGroup: Partial<db.fd_group>) {
    return h.span({
        title: foodGroup.FdGrp_Desc,
        className: 'food-group-circle',
        style: {
            backgroundColor: foodGroup.color
        }
    })
}
开发者ID:inad9300,项目名称:kiwibit,代码行数:9,代码来源:foodGroupCircle.ts

示例7: header

export function header() {
    return h.nav({className: 'header'}, [
        h.h1({}, [
            h.a({href: '/'}, ['Kiwibit'])
        ]),
        h.ul({}, [
            h.li({}, [
                h.a({href: 'foods-details'}, ['Food details'])
            ]),
            h.li({}, [
                h.a({href: 'top-foods'}, ['Top foods'])
            ]),
            h.li({}, [
                h.a({href: 'label-builder'}, ['Label builder'])
            ])
        ])
    ])
}
开发者ID:inad9300,项目名称:kiwibit,代码行数:18,代码来源:header.ts

示例8:

 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'])
 ])))
开发者ID:inad9300,项目名称:kiwibit,代码行数:7,代码来源:foods-details.ts

示例9:

                    .forEach(opt => {
                        for (let i = 0; i < selectedFoods.length; ++i) {
                            if (selectedFoods[i].ndb_no === opt.value) {
                                return;
                            }
                        }

                        selectedFoods.push({
                            ndb_no: opt.value,
                            long_desc: opt.textContent!
                        })
                        selectedFoodList.appendChild(h.li({}, [opt.textContent!]))
                    })
开发者ID:inad9300,项目名称:kiwibit,代码行数:13,代码来源:label-builder.ts

示例10: foodGroupCircle

            .then(foods => {
                $resultList.innerHTML = ''

                if (foods.length === 0) {
                    $resultList.appendChild(
                        h.li({className: 'no-results'}, ['No results.'])
                    )
                    return
                }

                foods.forEach(food => $resultList.appendChild(
                    h.li({}, [
                        foodGroupCircle(food),
                        h.a({href: 'index.html?id=' + food.NDB_No}, [food.Long_Desc])
                    ])
                ))
            })
开发者ID:inad9300,项目名称:kiwibit,代码行数:17,代码来源:findFoodsModal.ts


注:本文中的@soil/dom.h类示例由纯净天空整理自Github/MSDocs等开源代码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。