##=link##
##
examples.forEach(function(e1) {
var funcs = [];
var funcStrings = [];
e1.forEach(function(e2) {
var element = new Function((e2.code || '') + '; return ' + (e2.element || e2) + ';')();
var div = tmpl.br.Div({class: 'renderSpace', content: element});
funcs.push(div);
if (e2.style) {
funcStrings.push(tmpl.br.Div({content: '
' + e2.style + '
'}));
##
##
}
if (e2.code) {
funcStrings.push(tmpl.br.Div({content: '
' + (e2.code) + '
'}));
}
funcStrings.push(tmpl.br.Div({class: 'codeSpace', content: [
'<>
' + (e2.element || e2) + '
',
tmpl.mdldoc.PlayGroundButton({event: function() {
while (playGroundArea.firstChild) playGroundArea.removeChild(playGroundArea.firstChild);
var playGround = tmpl.mdldoc.PlayGround({runCode: runCode, style: e2.style});
playGroundArea.appendChild(playGround.element);
if (e2.lable) {
playGroundLabel.innerText = e2.lable;
playGroundLabel.style.display = '';
} else {
playGroundLabel.style.display = 'none';
}
tmplScope.element.classList.add('withPlayGround');
}})
]}));
var e2Code = (e2.code || '');
var runCode = (e2Code ? e2Code + ';\n' : '') + 'var component = ' + (e2.element || e2) + ';\n'
+ 'document.body.appendChild(component.element);'
})##
##%tmpl.mdl.Card({
shadow: 2,
title: {
type:'div',
content: funcs,
options: ['border']
},
supportingText: funcStrings,
})##
##});##