How to use the ractive.components function in ractive

To help you get started, we’ve selected a few ractive 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.

PaquitoSoft / notetaker-ractive / app / js / components / user-page.js View on Github

import Ractive from 'ractive';
import Template from '../../views/user-page.html';
import UserProfile from './user/profile-section';
import Repos from './user/repos-section';
import Notes from './user/notes-section';

var UserPage = Ractive.components.UserPage = Ractive.extend({
	template: Template,
	components: {
		UserProfile: UserProfile,
		Repos: Repos,
		Notes: Notes
	},
	oninit() {
		this.observe('req', (request) => {
			this.set('user', request.body.user);
		});

		// *.*, *.AddUserNote, AddNote.*, AddNote.AddUserNote
		this.on('*.AddUserNote', (newNote) => {
			console.log('UserPage::createNote# Adding new note to user:', this.get('user').profile.login);
			this.get('user').addNote(newNote);
		});

fcamarlinghi / expresso / src / core / index.js View on Github

// Ractive setup
import Ractive from 'ractive';
Ractive.DEBUG = !RELEASE;
Ractive.components['core-button'] = CoreButton;
Ractive.components['core-checkbox'] = CoreCheckbox;
Ractive.components['core-colorbox'] = CoreColorbox;
Ractive.components['core-combobox'] = CoreCombobox;
Ractive.components['core-dropdown'] = CoreDropdown;
Ractive.components['core-extension'] = CoreExtension;
Ractive.components['core-icon'] = CoreIcon;
Ractive.components['core-icon-button'] = CoreIconButton;
Ractive.components['core-label'] = CoreLabel;
Ractive.components['core-menu'] = CoreMenu;
Ractive.components['core-menu-button'] = CoreMenuButton;
Ractive.components['core-menu-item'] = CoreMenuItem;
Ractive.components['core-menu-separator'] = CoreMenuSeparator;
Ractive.components['core-numberbox'] = CoreNumberbox;
Ractive.components['core-slider'] = CoreSlider;
Ractive.components['core-textbox'] = CoreTextbox;
Ractive.components['core-throbber'] = CoreThrobber;
Ractive.components['core-toolbar'] = CoreToolbar;

Ractive.decorators['core-tooltip'] = CoreTooltip;
Ractive.decorators['core-visible'] = CoreVisible;

Ractive.events['tap'] = RactiveTap;

fcamarlinghi / expresso / src / core / index.js View on Github

import CoreVisible from './ui/core-visible/core-visible.js';

import RactiveTap from 'ractive-events-tap';

// Ractive setup
import Ractive from 'ractive';
Ractive.DEBUG = !RELEASE;
Ractive.components['core-button'] = CoreButton;
Ractive.components['core-checkbox'] = CoreCheckbox;
Ractive.components['core-colorbox'] = CoreColorbox;
Ractive.components['core-combobox'] = CoreCombobox;
Ractive.components['core-dropdown'] = CoreDropdown;
Ractive.components['core-extension'] = CoreExtension;
Ractive.components['core-icon'] = CoreIcon;
Ractive.components['core-icon-button'] = CoreIconButton;
Ractive.components['core-label'] = CoreLabel;
Ractive.components['core-menu'] = CoreMenu;
Ractive.components['core-menu-button'] = CoreMenuButton;
Ractive.components['core-menu-item'] = CoreMenuItem;
Ractive.components['core-menu-separator'] = CoreMenuSeparator;
Ractive.components['core-numberbox'] = CoreNumberbox;
Ractive.components['core-slider'] = CoreSlider;
Ractive.components['core-textbox'] = CoreTextbox;
Ractive.components['core-throbber'] = CoreThrobber;
Ractive.components['core-toolbar'] = CoreToolbar;

Ractive.decorators['core-tooltip'] = CoreTooltip;
Ractive.decorators['core-visible'] = CoreVisible;

Ractive.events['tap'] = RactiveTap;

fcamarlinghi / expresso / src / core / index.js View on Github

import CoreTooltip from './ui/core-tooltip/core-tooltip.js';
import CoreVisible from './ui/core-visible/core-visible.js';

import RactiveTap from 'ractive-events-tap';

// Ractive setup
import Ractive from 'ractive';
Ractive.DEBUG = !RELEASE;
Ractive.components['core-button'] = CoreButton;
Ractive.components['core-checkbox'] = CoreCheckbox;
Ractive.components['core-colorbox'] = CoreColorbox;
Ractive.components['core-combobox'] = CoreCombobox;
Ractive.components['core-dropdown'] = CoreDropdown;
Ractive.components['core-extension'] = CoreExtension;
Ractive.components['core-icon'] = CoreIcon;
Ractive.components['core-icon-button'] = CoreIconButton;
Ractive.components['core-label'] = CoreLabel;
Ractive.components['core-menu'] = CoreMenu;
Ractive.components['core-menu-button'] = CoreMenuButton;
Ractive.components['core-menu-item'] = CoreMenuItem;
Ractive.components['core-menu-separator'] = CoreMenuSeparator;
Ractive.components['core-numberbox'] = CoreNumberbox;
Ractive.components['core-slider'] = CoreSlider;
Ractive.components['core-textbox'] = CoreTextbox;
Ractive.components['core-throbber'] = CoreThrobber;
Ractive.components['core-toolbar'] = CoreToolbar;

Ractive.decorators['core-tooltip'] = CoreTooltip;
Ractive.decorators['core-visible'] = CoreVisible;

Ractive.events['tap'] = RactiveTap;

fcamarlinghi / expresso / src / core / index.js View on Github

import CoreTooltip from './ui/core-tooltip/core-tooltip.js';
import CoreVisible from './ui/core-visible/core-visible.js';

import RactiveTap from 'ractive-events-tap';

// Ractive setup
import Ractive from 'ractive';
Ractive.DEBUG = !RELEASE;
Ractive.components['core-button'] = CoreButton;
Ractive.components['core-checkbox'] = CoreCheckbox;
Ractive.components['core-colorbox'] = CoreColorbox;
Ractive.components['core-combobox'] = CoreCombobox;
Ractive.components['core-dropdown'] = CoreDropdown;
Ractive.components['core-extension'] = CoreExtension;
Ractive.components['core-icon'] = CoreIcon;
Ractive.components['core-icon-button'] = CoreIconButton;
Ractive.components['core-label'] = CoreLabel;
Ractive.components['core-menu'] = CoreMenu;
Ractive.components['core-menu-button'] = CoreMenuButton;
Ractive.components['core-menu-item'] = CoreMenuItem;
Ractive.components['core-menu-separator'] = CoreMenuSeparator;
Ractive.components['core-numberbox'] = CoreNumberbox;
Ractive.components['core-slider'] = CoreSlider;
Ractive.components['core-textbox'] = CoreTextbox;
Ractive.components['core-throbber'] = CoreThrobber;
Ractive.components['core-toolbar'] = CoreToolbar;

Ractive.decorators['core-tooltip'] = CoreTooltip;
Ractive.decorators['core-visible'] = CoreVisible;

Ractive.events['tap'] = RactiveTap;

fcamarlinghi / expresso / src / core / index.js View on Github

import CoreToolbar from './ui/core-toolbar/core-toolbar.js';

import CoreTooltip from './ui/core-tooltip/core-tooltip.js';
import CoreVisible from './ui/core-visible/core-visible.js';

import RactiveTap from 'ractive-events-tap';

// Ractive setup
import Ractive from 'ractive';
Ractive.DEBUG = !RELEASE;
Ractive.components['core-button'] = CoreButton;
Ractive.components['core-checkbox'] = CoreCheckbox;
Ractive.components['core-colorbox'] = CoreColorbox;
Ractive.components['core-combobox'] = CoreCombobox;
Ractive.components['core-dropdown'] = CoreDropdown;
Ractive.components['core-extension'] = CoreExtension;
Ractive.components['core-icon'] = CoreIcon;
Ractive.components['core-icon-button'] = CoreIconButton;
Ractive.components['core-label'] = CoreLabel;
Ractive.components['core-menu'] = CoreMenu;
Ractive.components['core-menu-button'] = CoreMenuButton;
Ractive.components['core-menu-item'] = CoreMenuItem;
Ractive.components['core-menu-separator'] = CoreMenuSeparator;
Ractive.components['core-numberbox'] = CoreNumberbox;
Ractive.components['core-slider'] = CoreSlider;
Ractive.components['core-textbox'] = CoreTextbox;
Ractive.components['core-throbber'] = CoreThrobber;
Ractive.components['core-toolbar'] = CoreToolbar;

Ractive.decorators['core-tooltip'] = CoreTooltip;
Ractive.decorators['core-visible'] = CoreVisible;

fcamarlinghi / expresso / src / core / index.js View on Github

Ractive.components['core-colorbox'] = CoreColorbox;
Ractive.components['core-combobox'] = CoreCombobox;
Ractive.components['core-dropdown'] = CoreDropdown;
Ractive.components['core-extension'] = CoreExtension;
Ractive.components['core-icon'] = CoreIcon;
Ractive.components['core-icon-button'] = CoreIconButton;
Ractive.components['core-label'] = CoreLabel;
Ractive.components['core-menu'] = CoreMenu;
Ractive.components['core-menu-button'] = CoreMenuButton;
Ractive.components['core-menu-item'] = CoreMenuItem;
Ractive.components['core-menu-separator'] = CoreMenuSeparator;
Ractive.components['core-numberbox'] = CoreNumberbox;
Ractive.components['core-slider'] = CoreSlider;
Ractive.components['core-textbox'] = CoreTextbox;
Ractive.components['core-throbber'] = CoreThrobber;
Ractive.components['core-toolbar'] = CoreToolbar;

Ractive.decorators['core-tooltip'] = CoreTooltip;
Ractive.decorators['core-visible'] = CoreVisible;

Ractive.events['tap'] = RactiveTap;

PaquitoSoft / notetaker-ractive / app / js / components / home-page.js View on Github

import Ractive from 'ractive';
import Template from '../../views/home-page.html';

var HomePage = Ractive.components.HomePage = Ractive.extend({
	template: Template
});
HomePage._name = 'HomePage';

export default HomePage;

fcamarlinghi / expresso / src / core / index.js View on Github

Ractive.components['core-button'] = CoreButton;
Ractive.components['core-checkbox'] = CoreCheckbox;
Ractive.components['core-colorbox'] = CoreColorbox;
Ractive.components['core-combobox'] = CoreCombobox;
Ractive.components['core-dropdown'] = CoreDropdown;
Ractive.components['core-extension'] = CoreExtension;
Ractive.components['core-icon'] = CoreIcon;
Ractive.components['core-icon-button'] = CoreIconButton;
Ractive.components['core-label'] = CoreLabel;
Ractive.components['core-menu'] = CoreMenu;
Ractive.components['core-menu-button'] = CoreMenuButton;
Ractive.components['core-menu-item'] = CoreMenuItem;
Ractive.components['core-menu-separator'] = CoreMenuSeparator;
Ractive.components['core-numberbox'] = CoreNumberbox;
Ractive.components['core-slider'] = CoreSlider;
Ractive.components['core-textbox'] = CoreTextbox;
Ractive.components['core-throbber'] = CoreThrobber;
Ractive.components['core-toolbar'] = CoreToolbar;

Ractive.decorators['core-tooltip'] = CoreTooltip;
Ractive.decorators['core-visible'] = CoreVisible;

Ractive.events['tap'] = RactiveTap;

ractivejs / ractive-load / src / load / fromLinks.js View on Github

loadSingle( link.getAttribute( 'href' ), '', baseUrl, cache ).then( function ( Component ) {
				Ractive.components[ name ] = Component;

				if ( !--pending ) {
					resolve();
				}
			}, reject );
		});

How to use the ractive.components function in ractive

To help you get started, we’ve selected a few ractive examples, based on popular ways it is used in public projects.

ractive

Package Health Score

Popular ractive functions

Similar packages