JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<link rel="stylesheet" href="http://flamejs.github.com/flame-address-book/css/flame.css">
<script src="http://flamejs.github.com/flame-address-book/js/libs/flame_with_github_image_urls.min.js"></script>
<script type="text/x-handlebars">
{{view App.RootView}}
</script>
JavaScript
// An example of using Flame.Panel and Flame.Popover.
App = Ember.Application.create();
App.TestPanel = Flame.Panel.extend({
layout: { width: 400, height: 200, centerX: 0, centerY: -50 },
// Controls whether all other controls are obscured (i.e. blocked
// from any input while the panel is shown)
isModal: true,
// This controls the visual effect only, and works only if
// isModal is set to true
dimBackground: true,
// Set to false if you want to e.g. allow closing the panel only
// by clicking some button on the panel (has no effect if isModal
// is false)
allowClosingByClickingOutside: true,
// Allow moving by dragging on the title bar - default is false
allowMoving: true,
// Title is optional - if not defined, no title bar is shown
title: 'Test Panel',
// A Panel must have exactly one child view named contentView
contentView: Flame.LabelView.extend({
layout: { left: 20, top: 90, right: 20, bottom: 20 },
textAlign: Flame.ALIGN_CENTER,
value: 'This is a panel.'
})
});
// You can use the same options for a Popover that a Panel takes,
// although not all of them might make sense here.
App.TestPopover = Flame.Popover.extend({
layout: { width: 200, height: 100 },
// A Popover must have exactly one child view named contentView
contentView: Flame.View.extend({
childViews: ['labelView'],
labelView: Flame.LabelView.extend({
layout: { left: 20, centerY: -5, right: 20, bottom: 20 },
textAlign: Flame.ALIGN_CENTER,
value: 'This is a popover.'
})
})
});
App.RootView = Flame.RootView.extend({
childViews: ['button1', 'button2'],
button1: Flame.ButtonView.extend({
layout: { left: 20, top: 20, width: 100 },
title: 'Show Panel',
action: function() {
// Note that also panel supports same anchor & position
// options as a Popover. If they're not...