essence-templates/essence/js/components/items.js

React Essence Templates - based on Essence Material Design Framework

// List of components

module.exports = {
	'icons': {
		'title': 'Icons',
		'description': 'The list of icons available from Material Design', 
		'url': '/icons.html'
	},
	'colors': {
		'title': 'Colors',
		'description': 'The list of colors available from Material Design', 
		'url': '/colors.html'
	},
	'appbar': {
		'title': 'AppBar',
		'description': 'It’s never been more fun to create an appbar with button and navigation and whatever. Start with the .e-appbar class then add buttons, menus and whatever you need.', 
		'url': '/appbar.html',
		'icon': 'editor-format-color-text'
	},
	'bottomsheet': {
		'title': 'Bottom Sheets',
		'description': 'You know those cool looking sheets that pop-up from the bottom of the screen? Yeah, we have those too. Depending on how you want information to be displayed, aligned or arranged, use the appropriate code. Here are some examples to get you started.', 
		'url': '/bottomsheet.html',
		'icon': ''
	},
	'button': {
		'title': 'Button',
		'description': 'There are 3 types of material buttons: FAB (floating action button), Raised and Flat.', 
		'url': '/button.html',
		'icon': ''
	},
	'card': {
		'title': 'Card',
		'description': 'There are several types of cards which can be used in different situations. These range from informational panels to prompts and single choice ones. Take a look at the examples to see how you can use them.', 
		'url': '/card.html',
		'icon': ''
	},
	'chip': {
		'title': 'Chip',
		'description': 'They cannot be eaten. But can be used to show complex information, such as calendar events or contacts. Use them wisely by adding the e-chip-image/text/address class, as well as desired button class to your nifty code.', 
		'url': '/chip.html',
		'icon': ''
	},
	'data-table': {
		'title': 'Data Table',
		'description': 'table description', 
		'url': '/datatable.html',
		'icon': ''
	},
	'dialog': {
		'title': 'Dialog',
		'description': 'As you might expect, dialog boxes pop. And they have actions - set the dialog content and its actions with .e-dialogs-content and .e-dialogs-actions, as well as the button type & text. That’s it.', 
		'url': '/dialog.html',
		'icon': ''
	},
	'image': {
		'title': 'Image',
		'description': 'image description', 
		'url': '/image.html',
		'icon': ''
	},
	'input': {
		'title': 'Input',
		'description': 'Text fields allow the user to input text. They can be single line, with or without scrolling, or multi-line, and can have an icon. Touching a text field places the cursor and automatically displays the keyboard. Check out our examples and use the one that fits your scenario.', 
		'url': '/input.html',
		'icon': ''
	},
	'list': {
		'title': 'List',
		'description': 'Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text. Take a look at the examples below and pick one - and keep it consistent as much as possible.', 
		'url': '/list.html',
		'icon': ''
	},
	'menu': {
		'title': 'Menu',
		'description': 'Menus allow users to take an action by selecting from a list of choices revealed upon opening a temporary, new sheet of material. Menus in material design can be simple, covering the first item, and cascading. ', 
		'url': '/menu.html',
		'icon': ''
	},
	'navigation': {
		'title': 'Navigation',
		'description': 'Navigation Drawers help your users browse the site. Here\'s an example similar to the one we use. Add it to your aplication and customize the menus.', 
		'url': '/navigation.html',
		'icon': ''
	},
	'paper': {
		'title': 'Paper',
		'description': 'In material design, every pixel drawn by an application resides on a sheet of paper. Paper has a flat background color and can be sized to serve a variety of purposes. A typical layout is composed of multiple sheets of paper. Here you have some examples in the most common shapes and states.', 
		'url': '/paper.html',
		'icon': ''
	},
	'progress': {
		'title': 'Progress',
		'description': 'Make loading content in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content. Each operation should only be represented by one activity indicator—for example, one refresh operation should not display both a refresh bar and an activity circle. Below you’ll find six variations of activity indicators. Use them wisely.', 
		'url': '/progress.html',
		'icon': ''
	},
	'slider': {
		'title': 'Slider',
		'description': 'slider description', 
		'url': '/slider.html',
		'icon': ''
	},
	'snackbar': {
		'title': 'Snackbar',
		'description': 'Remember those confirmation messages from long time ago? They’re now called snackbars and toasts and they come with rules. Head onto Google to check out how to use them. Then check out the below examples hot to integrate them from Essence.', 
		'url': '/snackbar.html',
		'icon': ''
	},
	'stepper': {
		'title': 'Steppers'
	},
	'switch': {
		'title': 'Switch',
		'description': 'Switches allow the user to select options. There are three kinds: checkboxes, radio buttons, and on/off switches. Here they are, in all their splendor.', 
		'url': '/switch.html',
		'icon': ''
	},
	'tab': {
		'title': 'Tab',
		'description': 'Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.', 
		'url': '/tab.html',
		'icon': ''
	},
	'toast': {
		'title': 'Toast',
		'description': 'Remember those confirmation messages from long time ago? They’re now called snackbars and toasts and they come with rules. Head onto Google to check out how to use them. Then check out the below examples hot to integrate them from Essence.', 
		'url': '/toast.html',
		'icon': ''
	},
	'tooltip': {
		'title': 'Tooltip',
		'description': 'Tooltips are labels that appear on hover and focus when the user hovers over an element with the cursor, focuses on an element using a keyboard (usually through the tab key), or, in a touch UI, upon touch (without releasing). ', 
		'url': '/tooltip.html',
		'icon': ''
	},
	'touchpad': {
		'title': 'Touchpad',
		'description': 'touchpad description', 
		'url': '/touchpad.html',
		'icon': ''
	}
};