How to use the maquette/maquette.h function in maquette

To help you get started, we’ve selected a few maquette 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 dojo / framework / src / widget-core / mixins / createTabbedMixin.ts View on Github external
tabbed.children.forEach((tab, key) => {
					const isActiveTab = tab === activeTab;
					if (isActiveTab || (childrenNodes[key] && childrenNodes[key].properties.classes['visible'])) {
						tab.invalidate();
						const tabVNode = tab.render();
						tabVNode.properties.classes['visible'] = isActiveTab;
						childrenNodes[key] = tabVNode;
					}
					/* else, this tab isn't active and hasn't been previously rendered */

					tabs.push(h(tabbed.tagNames.tab, {
						key: tab,
						classes: { active: isActiveTab },
						'data-tab-id': `${tabbed.state.id || tabbedList.indexOf(tabbed)}-${tab.state.id || key}`
					}, getTabChildVNode(tab)));
				});
github dojo / framework / src / widget-core / mixins / createTabbedMixin.ts View on Github external
if (isActiveTab || (childrenNodes[key] && childrenNodes[key].properties.classes['visible'])) {
						tab.invalidate();
						const tabVNode = tab.render();
						tabVNode.properties.classes['visible'] = isActiveTab;
						childrenNodes[key] = tabVNode;
					}
					/* else, this tab isn't active and hasn't been previously rendered */

					tabs.push(h(tabbed.tagNames.tab, {
						key: tab,
						classes: { active: isActiveTab },
						'data-tab-id': `${tabbed.state.id || tabbedList.indexOf(tabbed)}-${tab.state.id || key}`
					}, getTabChildVNode(tab)));
				});

				return [ h(tabbed.tagNames.tabBar, tabs), h('div.panels', childrenNodes) ];
			}
		}
github dojo / framework / src / widget-core / createDijit.ts View on Github external
render(): VNode {
				const dijit: Dijit = this;
				const afterCreate = dijitDataWeakMap.get(dijit).afterCreate;
				return h(dijit.tagName, { afterCreate });
			},
			get dijit(): DijitWidget {
github dojo / framework / src / widget-core / mixins / createListMixin.ts View on Github external
					return [ h(list.tagNames.list, items.map((item) => h(list.tagNames.item, { key: item }, [ item.label ]))) ];
				}
github dojo / framework / src / widget-core / mixins / createTabbedMixin.ts View on Github external
function getTabChildVNode(tab: TabbedChild): (VNode | string)[] {
					const tabListeners = getTabListeners(tabbed, tab);
					const nodes = [ h('div.tab-label', { onclick: tabListeners.onclickTabListener }, [ tab.state.label ]) ];
					if (tab.state.closeable) {
						nodes.push(h('div.tab-close', { onclick: tabListeners.onclickTabCloseListener }, [ 'X' ]));
					}
					return nodes;
				}
github dojo / framework / src / widget-core / mixins / createTabbedMixin.ts View on Github external
function getTabChildVNode(tab: TabbedChild): (VNode | string)[] {
					const tabListeners = getTabListeners(tabbed, tab);
					const nodes = [ h('div.tab-label', { onclick: tabListeners.onclickTabListener }, [ tab.state.label ]) ];
					if (tab.state.closeable) {
						nodes.push(h('div.tab-close', { onclick: tabListeners.onclickTabCloseListener }, [ 'X' ]));
					}
					return nodes;
				}

maquette

Minimalistic Virtual DOM implementation with support for animated transitions.

MIT
Latest version published 6 months ago

Package Health Score

68 / 100
Full package analysis