src/widget-icons/docs/example.mustache
<div class="intro">
<p>
This example demonstrates how to create an {{displayName}}.
</p>
</div>
<div class="example">
<div style="position: relative; width: 300px; height: 200px;" id="layer"></div>
<style>
/* Standard Module Widget CSS */
.yui3-my-widget-hidden {
display:none;
}
.yui3-my-widget {
margin:10px;
}
.yui3-my-widget-content {
padding:3px;
border:1px solid #666;
}
.yui3-my-widget-content .yui3-widget-hd {
padding:5px;
border:2px solid #aa0000;
background-color:#fff;
overflow:auto;
}
.yui3-my-widget-content .yui3-widget-bd {
padding:5px;
border:2px solid #0000aa;
background-color:#fff;
overflow:auto;
}
.yui3-my-widget-content .yui3-widget-ft {
padding:5px;
border:2px solid #00aa00;
background-color:#fff;
overflow:auto;
}
.yui3-my-widget-icon {
float: right;
}
</style>
<script>
{{>example-code}}
</script>
</div>
<h2>HTML</h2>
```
<div style="position: relative; width: 300px; height: 200px;" id="layer"></div>
<style>
/* Standard Module Widget CSS */
.yui3-my-widget-hidden {
display:none;
}
.yui3-my-widget {
margin:10px;
}
.yui3-my-widget-content {
padding:3px;
border:1px solid #666;
}
.yui3-my-widget-content .yui3-widget-hd {
padding:5px;
border:2px solid #aa0000;
background-color:#fff;
overflow:auto;
}
.yui3-my-widget-content .yui3-widget-bd {
padding:5px;
border:2px solid #0000aa;
background-color:#fff;
overflow:auto;
}
.yui3-my-widget-content .yui3-widget-ft {
padding:5px;
border:2px solid #00aa00;
background-color:#fff;
overflow:auto;
}
.yui3-my-widget-icon {
float: right;
}
</style>
```
<h2>JavaScript</h2>
<h3>Implementation</h3>
```
{{>example-code}}
```