deliteful-SwapView-decl

Sample using deliteful/SwapView in markup.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
<button is="d-button"         
    onclick="vs.showPrevious();">Previous</button>
<button is="d-button" onclick="vs.showNext();">Next</button>
<br/>
<d-swap-view id="vs" selectedChildId="bbb">
	<div style="background-color: honeydew; " id="aaa">
		<h1>View 1</h1>
	</div>
	<div style="background-color: whitesmoke;" id="bbb">
		<h1>View 2</h1>
	</div>
	<div style="background-color: powderblue;" id=ccc>
		<h1>View 3</h1>
	</div>
	<div style="background-color: oldlace;" id="ddd">
		<h1>View 4</h1>
	</div>	
</d-swap-view>

<d-view-indicator id="vi" viewstack="vs"></d-view-indicator>

<br/>

CSS

body {
	background-color: #eeeeee;
    margin: 2em;
}
button {
	width: 10em;
}
#vs > div {
	font-size: 20px;
	font-family: Helvetica;
	text-align: center;
	font-weight: bold;
}
#vs {
	width: 50%;
	height: 200px;
	border: 2px solid gold
}
#vi {
	width: 50%;
}

JavaScript

require.config({
  baseUrl: "http://ibm-js.github.io/libraries/master",     
});

require(["deliteful-build/layer"], function () {
  require(["deliteful/SwapView", 
           "deliteful/ViewIndicator", 
           "deliteful/Button",
           "delite/theme!delite/themes/{{theme}}/global.css", // page level CSS
		   "requirejs-domready/domReady!"],
    function () {
        document.body.style.display = "";
  });
});