How to use the @stencil/core.h function in @stencil/core

To help you get started, we’ve selected a few @stencil/core 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 arquivo / pwa-technologies / PwaArchive-access / projects / nutchwax / nutchwax-webapp / src / main / webapp / @ionic / core / dist / collection / components / toast / toast.js View on Github external
return (h("div", { class: buttonGroupsClasses }, buttons.map(b => h("button", { type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b) },
            h("div", { class: "toast-button-inner" },
                b.icon &&
                    h("ion-icon", { name: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-icon" }),
                b.text),
            mode === 'md' && h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))));
    }
github arquivo / pwa-technologies / PwaArchive-access / projects / nutchwax / nutchwax-webapp / src / main / webapp / @ionic / core / dist / collection / components / infinite-scroll-content / infinite-scroll-content.js View on Github external
render() {
        return (h("div", { class: "infinite-loading" },
            this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" },
                h("ion-spinner", { name: this.loadingSpinner }))),
            this.loadingText && (h("div", { class: "infinite-loading-text", innerHTML: sanitizeDOMString(this.loadingText) }))));
    }
    static get is() { return "ion-infinite-scroll-content"; }
github arquivo / pwa-technologies / PwaArchive-access / projects / nutchwax / nutchwax-webapp / src / main / webapp / @ionic / core / dist / collection / components / item-divider / item-divider.js View on Github external
render() {
        return [
            h("slot", { name: "start" }),
            h("div", { class: "item-divider-inner" },
                h("div", { class: "item-divider-wrapper" },
                    h("slot", null)),
                h("slot", { name: "end" }))
        ];
    }
    static get is() { return "ion-item-divider"; }
github arquivo / pwa-technologies / PwaArchive-access / projects / nutchwax / nutchwax-webapp / src / main / webapp / @ionic / core / dist / collection / components / loading / loading.js View on Github external
render() {
        const { message, spinner } = this;
        const mode = getIonMode(this);
        return (h(Host, { onIonBackdropTap: this.onBackdropTap, style: {
                zIndex: `${40000 + this.overlayIndex}`
            }, class: Object.assign({}, getClassMap(this.cssClass), { [mode]: true, 'loading-translucent': this.translucent }) },
            h("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }),
            h("div", { class: "loading-wrapper", role: "dialog" },
                spinner && (h("div", { class: "loading-spinner" },
                    h("ion-spinner", { name: spinner }))),
                message && h("div", { class: "loading-content", innerHTML: sanitizeDOMString(message) }))));
    }
    static get is() { return "ion-loading"; }
github arquivo / pwa-technologies / PwaArchive-access / projects / nutchwax / nutchwax-webapp / src / main / webapp / @ionic / core / dist / collection / components / action-sheet / action-sheet.js View on Github external
buttons.map(b => h("button", { type: "button", "ion-activatable": true, class: buttonClass(b), onClick: () => this.buttonClick(b) },
                            h("span", { class: "action-sheet-button-inner" },
                                b.icon && h("ion-icon", { icon: b.icon, lazy: false, class: "action-sheet-icon" }),
                                b.text),
                            mode === 'md' && h("ion-ripple-effect", null)))),
                    cancelButton &&
github arquivo / pwa-technologies / PwaArchive-access / projects / nutchwax / nutchwax-webapp / src / main / webapp / @ionic / core / dist / collection / components / alert / alert.js View on Github external
return (h("div", { class: "alert-checkbox-group", "aria-labelledby": labelledby }, inputs.map(i => (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: 0, role: "checkbox", class: "alert-tappable alert-checkbox alert-checkbox-button ion-focusable" },
            h("div", { class: "alert-button-inner" },
                h("div", { class: "alert-checkbox-icon" },
                    h("div", { class: "alert-checkbox-inner" })),
                h("div", { class: "alert-checkbox-label" }, i.label)),
            mode === 'md' && h("ion-ripple-effect", null))))));
    }
github arquivo / pwa-technologies / PwaArchive-access / projects / nutchwax / nutchwax-webapp / src / main / webapp / @ionic / core / dist / collection / components / popover / popover.js View on Github external
render() {
        return [
            h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop }),
            h("div", { class: "popover-wrapper" },
                h("div", { class: "popover-arrow" }),
                h("div", { class: "popover-content" }))
        ];
    }
    static get is() { return "ion-popover"; }
github arquivo / pwa-technologies / PwaArchive-access / projects / nutchwax / nutchwax-webapp / src / main / webapp / @ionic / core / dist / collection / components / tab-button / tab-button.js View on Github external
};
        return (h(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                [mode]: true,
                'tab-selected': selected,
                'tab-disabled': disabled,
                'tab-has-label': hasLabel,
                'tab-has-icon': hasIcon,
                'tab-has-label-only': hasLabel && !hasIcon,
                'tab-has-icon-only': hasIcon && !hasLabel,
                [`tab-layout-${layout}`]: true,
                'ion-activatable': true,
                'ion-selectable': true,
                'ion-focusable': true
            } },
            h("a", Object.assign({}, attrs, { tabIndex: -1 }),
                h("slot", null),
                mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
    }
    static get is() { return "ion-tab-button"; }
github arquivo / pwa-technologies / PwaArchive-access / projects / nutchwax / nutchwax-webapp / src / main / webapp / @ionic / core / dist / collection / components / item-divider / item-divider.js View on Github external
render() {
        return [
            h("slot", { name: "start" }),
            h("div", { class: "item-divider-inner" },
                h("div", { class: "item-divider-wrapper" },
                    h("slot", null)),
                h("slot", { name: "end" }))
        ];
    }
    static get is() { return "ion-item-divider"; }
github arquivo / pwa-technologies / PwaArchive-access / projects / nutchwax / nutchwax-webapp / src / main / webapp / @ionic / core / dist / collection / components / select / select.js View on Github external
const label = findItemLabel(el);
        if (label) {
            label.id = labelId;
        }
        let addPlaceholderClass = false;
        let selectText = this.getText();
        if (selectText === '' && placeholder != null) {
            selectText = placeholder;
            addPlaceholderClass = true;
        }
        renderHiddenInput(true, el, name, parseValue(value), disabled);
        const selectTextClasses = {
            'select-text': true,
            'select-placeholder': addPlaceholderClass
        };
        return (h(Host, { onClick: this.onClick, role: "combobox", "aria-haspopup": "dialog", "aria-disabled": disabled ? 'true' : null, "aria-expanded": `${isExpanded}`, "aria-labelledby": labelId, class: {
                [mode]: true,
                'in-item': hostContext('ion-item', el),
                'select-disabled': disabled,
            } },
            h("div", { class: selectTextClasses }, selectText),
            h("div", { class: "select-icon", role: "presentation" },
                h("div", { class: "select-icon-inner" })),
            h("button", { type: "button", onFocus: this.onFocus, onBlur: this.onBlur, disabled: disabled, ref: (btnEl => this.buttonEl = btnEl) })));
    }
    static get is() { return "ion-select"; }