JSFiddle - React, Tailwind, and code Playground
CSS
/* For sample only: Apply fixed 1080p body sizing/scaling */
body {
overflow: visible !important;
width: 1920px !important;
height: 1080px !important;
transform: scale3d(0.3, 0.3, 1);
transform-origin: 0 0;
-webkit-transform: scale3d(0.3, 0.3, 1);
-webkit-transform-origin: 0 0;
-moz-transform: scale3d(0.3, 0.3, 1);
-moz-transform-origin: 0 0;
-ms-transform: scale3d(0.3, 0.3, 1);
-ms-transform-origin: 0 0;
-o-transform: scale3d(0.3, 0.3, 1);
-o-transform-origin: 0 0;
}
JavaScript
// +----------------------------------------+
// | Step 5. Add a grid to the search panel |
// +----------------------------------------+
// source/views.js ========================================================
var kind = require('enyo/kind'),
Panels = require('moonstone/Panels'),
Panel = require('moonstone/Panel'),
DataGridList = require('moonstone/DataGridList'),
GridListImageItem = require('moonstone/GridListImageItem');
var SearchPanel = kind({
name: 'SearchPanel',
kind: Panel,
title: 'Search Flickr',
titleBelow: 'Enter search term above',
headerOptions: {inputMode: true, dismissOnEnter: true},
handlers: {
onInputHeaderChange: 'search'
},
components: [
{kind: DataGridList, fit: true, name: 'resultList', minWidth: 250, minHeight: 300, components: [
{kind: GridListImageItem, imageSizing: 'cover', useSubCaption: false, centered: false}
]}
],
search: function(sender, ev) {
alert(ev.originator.get('value'));
}
});
var MainView = kind({
name: 'MainView',
classes: 'moon enyo-fit',
components: [
{kind: Panels, classes: 'enyo-fit', pattern: 'alwaysviewing', popOnBack: true, components: [
{kind: SearchPanel} // Use our new SearchPanel
]}
]
});
// source/app.js =========================================================
require('enyo/options').accessibility = true;
var
ready = require('enyo/ready');
ready(function () {
new MainView().renderInto(document.body);
});