How-To files generated with markdown spippet injector

apps/tests/gestures-tests.ts

@@ -1,226 +1,168 @@
 /* tslint:disable:no-unused-variable */
-// <snippet module="ui/gestures" title="gestures">
+// >> gestures-require
-// # Gestures
-// Detecting user gestures requires the "ui/gestures" module.
-// ``` JavaScript
 import gestures = require("ui/gestures");
-// ```
+// << gestures-require
-// </snippet>
 import labelModule = require("ui/label");
 
 export var test_DummyTestForSnippetOnly0 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-double-tap
-    // ### Double Tap
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.doubleTap, function (args: gestures.GestureEventData) { 
         console.log("Double Tap");
     });
-    // ```
+    // << gestures-double-tap
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly01 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-double-tap-alt
-    // ### Double Tap
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on("doubleTap", function (args: gestures.GestureEventData) {
         console.log("Double Tap");
     });
-    // ```
+    // << gestures-double-tap-alt
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly1 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-long-press
-    // ### Long Press
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.longPress, function (args: gestures.GestureEventData) {
         console.log("Long Press");
     });
-    // ```
+    // << gestures-long-press
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly11 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-long-press-alt
-    // ### Long Press
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on("longPress", function (args: gestures.GestureEventData) {
         console.log("Long Press");
     });
-    // ```
+    // << gestures-long-press-alt
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly2 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-pan
-    // ### Pan
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.pan, function (args: gestures.PanGestureEventData) {
         console.log("Pan deltaX:" + args.deltaX + "; deltaY:" + args.deltaY + ";");
     });
-    // ```
+    // << gestures-pan
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly22 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-pan-alt
-    // ### Pan
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on("pan", function (args: gestures.PanGestureEventData) {
         console.log("Pan deltaX:" + args.deltaX + "; deltaY:" + args.deltaY + ";");
     });
-    // ```
+    // << gestures-pan-alt
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly3 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-pan-pinch
-    // ### Pinch
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.pinch, function (args: gestures.PinchGestureEventData) {
         console.log("Pinch scale: " + args.scale);
     });
-    // ```
+    // << gestures-pan-pinch
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly33 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-pan-pinch-alt
-    // ### Pinch
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on("pinch", function (args: gestures.PinchGestureEventData) {
         console.log("Pinch scale: " + args.scale);
     });
-    // ```
+    // << gestures-pan-pinch-alt
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly4 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-rotation
-    // ### Rotation
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.rotation, function (args: gestures.RotationGestureEventData) {
         console.log("Rotation: " + args.rotation);
     });
-    // ```
+    // << gestures-rotation
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly44 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-rotation-alt
-    // ### Rotation
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on("rotation", function (args: gestures.RotationGestureEventData) {
         console.log("Rotation: " + args.rotation);
     });
-    // ```
+    // << gestures-rotation-alt
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly5 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-swipe
-    // ### Swipe
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.swipe, function (args: gestures.SwipeGestureEventData) {
         console.log("Swipe direction: " + args.direction);
     });
-    // ```
+    // << gestures-swipe
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly55 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-swipe-alt
-    // ### Swipe
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on("swipe", function (args: gestures.SwipeGestureEventData) {
         console.log("Swipe direction: " + args.direction);
     });
-    // ```
+    // << gestures-swipe-alt
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly6 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-tap
-    // ### Tap
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.tap, function (args: gestures.GestureEventData) {
         console.log("Tap");
     });
-    // ```
+    // << gestures-tap
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly66 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-tap-alt
-    // ### Tap
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on("tap", function (args: gestures.GestureEventData) {
         console.log("Tap");
     });
-    // ```
+    // << gestures-tap-alt
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly7 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-stop-observe
-    // ### Stop observing
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.tap, function (args: gestures.GestureEventData) {
         console.log("Tap");
     });
     observer.disconnect();
-    // ```
+    // << gestures-stop-observe
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly8 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-multiple
-    // ### Multiple gestures
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.tap | gestures.GestureTypes.doubleTap | gestures.GestureTypes.longPress, function (args: gestures.GestureEventData) {
         console.log("Event: " + args.eventName);
     });
-    // ```
+    // << gestures-multiple
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly88 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-string
-    // ### Multiple gestures as comma separated string
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on("tap, doubleTap, longPress", function (args: gestures.GestureEventData) {
         console.log("Event: " + args.eventName);
     });
-    // ```
+    // << gestures-string
-    // </snippet>
 }
 
 export var test_DummyTestForSnippetOnly9 = function () {
-    // <snippet module="ui/gestures" title="gestures">
+    // >> gestures-events-string
-    // ### Events combined with gestures as comma separated string
-    // ``` JavaScript
     var label = new labelModule.Label();
     var observer = label.on("loaded, tap, longPress", function (args: gestures.GestureEventData) {
         console.log("Event: " + args.eventName);
     });
-    // ```
+    // << gestures-events-string
-    // </snippet>
 }

apps/tests/gestures.md

@@ -0,0 +1,62 @@
+---
+nav-title: "gestures How-To"
+title: "How-To"
+description: "Examples for using gestures"
+---
+# Gestures
+Detecting user gestures requires the "ui/gestures" module.
+<snippet id='gestures-require'/>
+
+### Double Tap
+<snippet id='gestures-double-tap'/>
+
+### Double Tap
+<snippet id='gestures-double-tap-alt'/>
+
+### Long Press
+<snippet id='gestures-long-press'/>
+
+### Long Press
+<snippet id='gestures-long-press-alt'/>
+
+### Pan
+<snippet id='gestures-pan'/>
+
+### Pan
+<snippet id='gestures-pan-alt'/>
+
+### Pinch
+<snippet id='gestures-pan-pinch'/>
+
+### Pinch
+<snippet id='gestures-pan-pinch-alt'/>
+
+### Rotation
+<snippet id='gestures-rotation'/>
+
+### Rotation
+<snippet id='gestures-rotation-alt'/>
+
+### Swipe
+<snippet id='gestures-swipe'/>
+
+### Swipe
+<snippet id='gestures-swipe-alt'/>
+
+### Tap
+<snippet id='gestures-tap'/>
+
+### Tap
+<snippet id='gestures-tap-alt'/>
+
+### Stop observing
+<snippet id='gestures-stop-observe'/>
+
+### Multiple gestures
+<snippet id='gestures-multiple'/>
+
+### Multiple gestures as comma separated string
+<snippet id='gestures-string'/>
+
+### Events combined with gestures as comma separated string
+<snippet id='gestures-events-string'/>

apps/tests/ui/html-view/htm-view.md

@@ -0,0 +1,20 @@
+---
+nav-title: "HtmlView How-To"
+title: "How-To"
+description: "Examples for using HtmlView"
+---
+# HtmlView
+Using a HtmlView requires the html-view module.
+<snippet id='htmlview-require'/>
+
+### Declaring a HtmlView.
+``` XML
+ <Page>
+      {%raw%}<HtmlView html="{{ htmlString }}" />{%endraw%}
+ </Page>
+```
+### Creating a HtmlView
+<snippet id='htmlview-create'/>
+
+### Using HtmlView
+<snippet id='htmlview-using'/>

apps/tests/ui/html-view/html-view-tests.ts

@@ -2,31 +2,14 @@
 import helper = require("../helper");
 import types = require("utils/types");
 
-// <snippet module="ui/html-view" title="HtmlView">
+// >> htmlview-require
-// # HtmlView
-// Using a HtmlView requires the html-view module.
-// ``` JavaScript
 import htmlViewModule = require("ui/html-view");
-// ```
+// << htmlview-require
-// </snippet>
-
-// <snippet module="ui/html-view" title="HtmlView">
-// ### Declaring a HtmlView.
-//``` XML
-//  <Page>
-//       {%raw%}<HtmlView html="{{ htmlString }}" />{%endraw%}
-//  </Page>
-//```
-
-// </snippet>
 
 var _createHtmlViewFunc = function (): htmlViewModule.HtmlView {
-    // <snippet module="ui/html-view" title="HtmlView">
+    // >> htmlview-create
-    // ### Creating a HtmlView
-    // ``` JavaScript
     var htmlView = new htmlViewModule.HtmlView();
-    // ```
+    // << htmlview-create
-    // </snippet>
     return htmlView;
 }
 
@@ -35,12 +18,9 @@ export var testLoadHTMLString = function () {
     let htmlView = _createHtmlViewFunc();
     page.content = htmlView;
 
-    // <snippet module="ui/html-view" title="HtmlView">
+    // >> htmlview-using
-    // ### Using HtmlView
-    // ``` JavaScript
     htmlView.html = '<span><font color="#ff0000">Test</font></span>';
-    // ```
+    // << htmlview-using
-    // </snippet>
 
     if (htmlView.ios) {
         TKUnit.assert(!types.isNullOrUndefined(htmlView.ios.attributedText), "HTML string not loaded properly. Actual: " + htmlView.ios.attributedText);

apps/tests/ui/image-cache/image-cache-tests.ts

@@ -1,17 +1,11 @@
-// <snippet module="ui/image-cache" title="image-cache">
+// >> image-cache-require
-// # ImageCache
-// Using the ImageCache requires the "ui/image-cache" module.
-// ``` JavaScript
 import imageCacheModule = require("ui/image-cache");
 import imageSource = require("image-source");
 import fs = require("file-system");
-// ```
+// << image-cache-require
-// </snippet>
 
 export function test_DummyTestForSnippetOnly() {
-    // <snippet module="ui/image-cache" title="image-cache">
+    // >> image-cache-request-images
-    // ### Requesting Images
-    // ``` JavaScript
     var cache = new imageCacheModule.Cache();
     cache.placeholder = imageSource.fromFile(fs.path.join(__dirname, "res/no-image.png"));
     cache.maxRequests = 5;
@@ -42,6 +36,5 @@ export function test_DummyTestForSnippetOnly() {
 
     //// Disable download while scrolling
     cache.disableDownload();
-    // ```
+    // << image-cache-request-images
-    // </snippet>
 }

apps/tests/ui/image-cache/image-cache.md

@@ -0,0 +1,11 @@
+---
+nav-title: "image-cache How-To"
+title: "How-To"
+description: "Examples for using image-cache"
+---
+# ImageCache
+Using the ImageCache requires the "ui/image-cache" module.
+<snippet id='image-cache-require'/>
+
+### Requesting Images
+<snippet id='image-cache-request-images'/>

apps/tests/ui/image/image-tests.ts

@@ -1,28 +1,7 @@
 import TKUnit = require("../../TKUnit");
-// <snippet module="ui/image" title="Image">
+// >> img-require
-// # Image
-// Using an image requires the Image module to be loaded.
-// ``` JavaScript
 import ImageModule = require("ui/image");
-// ```
+// << img-require
-
-// Binding the image source property to a view-model property.
-//``` XML
-// <Page>
-//   <StackLayout>
-//      <!--Bind the image source property to view-model property -->
-//      {%raw%}<Image src="{{ thumbnailImageUrl }}" />{%endraw%}
-//      <!--Load form image from application -->
-//      <Image src="~/logo.png" stretch ="none" / > 
-//      <!--Load form image resource -->
-//      <Image src="res://logo.png" stretch ="none" / > 
-//      <!--Load form image URL-->
-//      <Image src="http://www.google.com/images/errors/logo_sm_2.png" stretch ="none" /> 
-//   </StackLayout>
-// </Page>
-//```
-
-// </snippet>
 
 import types = require("utils/types");
 import ImageSourceModule = require("image-source");
@@ -43,13 +22,10 @@ export var test_Image_Members = function () {
 
 /* TODO: We need a way to programmatically add an image to resources and then load it from, otherwise we do not know if there is such resource in the target native app.
 export var test_settingImageSource = function () {
-    // <snippet module="ui/image" title="Image">
+    // >> img-create
-    // ### How to create an image and set its source.
-    // ``` JavaScript
     var image = new ImageModule.Image();
     image.imageSource = ImageSourceModule.fromResource("logo");
-    // ```
+    // << img-create
-    // </snippet>
     
     var testFunc = function (views: Array<ViewModule.View>) {
         var testImage = <ImageModule.Image> views[0];
@@ -67,13 +43,10 @@ export var test_settingImageSource = function () {
 */
 
 export var test_SettingImageSrc = function (done) {
-    // <snippet module="ui/image" title="Image">
+    // >> img-create-src
-    // ### How to create an image and set its src.
-    // ``` JavaScript
     var image = new ImageModule.Image();
     image.src = "https://www.google.com/images/errors/logo_sm_2.png";
-    // ```
+    // << img-create-src
-    // </snippet>
 
     image.src = null;
 
@@ -108,13 +81,10 @@ export var test_SettingImageSrc = function (done) {
 }
 
 export var test_SettingImageSrcToFileWithinApp = function (done) {
-    // <snippet module="ui/image" title="Image">
+    // >> img-create-local
-    // ### How to create an image and set its src to file within the application.
-    // ``` JavaScript
     var image = new ImageModule.Image();
     image.src = "~/logo.png";
-    // ```
+    // << img-create-local
-    // </snippet>
 
     var testFunc = function (views: Array<ViewModule.View>) {
         var testImage = <ImageModule.Image> views[0];
@@ -132,13 +102,10 @@ export var test_SettingImageSrcToFileWithinApp = function (done) {
 }
 
 export var test_SettingImageSrcToDataURI = function (done) {
-    // <snippet module="ui/image" title="Image">
+    // >> img-create-datauri
-    // ### How to create an image and set its src to Data URI.
-    // ``` JavaScript
     var image = new ImageModule.Image();
     image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAAXNSR0IArs4c6QAAABxpRE9UAAAAAgAAAAAAAAACAAAAKAAAAAIAAAACAAAARiS4uJEAAAASSURBVBgZYvjPwABHSMz/DAAAAAD//0GWpK0AAAAOSURBVGNgYPiPhBgQAACEvQv1D5y/pAAAAABJRU5ErkJggg==";
-    // ```
+    // << img-create-datauri
-    // </snippet>
 
     var testFunc = function (views: Array<ViewModule.View>) {
         var testImage = <ImageModule.Image>views[0];
@@ -157,17 +124,14 @@ export var test_SettingImageSrcToDataURI = function (done) {
 }
 
 export var test_SettingStretch_AspectFit = function () {
-    // <snippet module="ui/image" title="Image">
+    // >> img-set-stretch
-    // ### How to set image stretching.
-    // ``` JavaScript
     var image = new ImageModule.Image();
     image.imageSource = ImageSourceModule.fromFile(imagePath);
     //// There are 4 modes of stretching none, fill, aspectFill, aspectFit
     //// The default value is aspectFit.
     //// Image stretch can be set by using ImageModule.stretch enum.
     image.stretch = enumsModule.Stretch.aspectFit;
-    // ```
+    // << img-set-stretch
-    // </snippet>
 
     var testFunc = function (views: Array<ViewModule.View>) {
         var testImage = <ImageModule.Image> views[0];

apps/tests/ui/image/image.md

@@ -0,0 +1,38 @@
+---
+nav-title: "Image How-To"
+title: "How-To"
+description: "Examples for using Image"
+---
+# Image
+Using an image requires the Image module to be loaded.
+<snippet id='img-require'/>
+
+Binding the image source property to a view-model property.
+``` XML
+<Page>
+  <StackLayout>
+     <!--Bind the image source property to view-model property -->
+     {%raw%}<Image src="{{ thumbnailImageUrl }}" />{%endraw%}
+     <!--Load form image from application -->
+     <Image src="~/logo.png" stretch ="none" / > 
+     <!--Load form image resource -->
+     <Image src="res://logo.png" stretch ="none" / > 
+     <!--Load form image URL-->
+     <Image src="http://www.google.com/images/errors/logo_sm_2.png" stretch ="none" /> 
+  </StackLayout>
+</Page>
+```
+### How to create an image and set its source.
+<snippet id='img-create'/>
+
+### How to create an image and set its src.
+<snippet id='img-create-src'/>
+
+### How to create an image and set its src to file within the application.
+<snippet id='img-create-local'/>
+
+### How to create an image and set its src to Data URI.
+<snippet id='img-create-datauri'/>
+
+### How to set image stretching.
+<snippet id='img-set-stretch'/>

apps/tests/ui/label/label-tests.ts

@@ -2,21 +2,10 @@
 import testModule = require("../../ui-test");
 import styling = require("ui/styling");
 
-// <snippet module="ui/label" title="Label">
+//>> label-require
-// # Label
-// Using a label requires the Label module.
-// ``` JavaScript
 import LabelModule = require("ui/label");
-// ```
+// << label-require
 
-// ### Binding the Label text property to a view-model property.
-//``` XML
-// <Page>
-//   {%raw%}<Label text="{{ title }}" />{%endraw%}
-// </Page>
-//```
-
-// </snippet>
 import types = require("utils/types");
 import colorModule = require("color");
 import utils = require("utils/utils");
@@ -43,24 +32,18 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
     }
 
     public snippet_Set_Text_TNS() {
-        // <snippet module="ui/label" title="Label">
+        // >> label-settext
-        // ### How to set label text content
-        // ``` JavaScript
         var label = new LabelModule.Label();
         var expectedValue = "Expected Value";
         label.text = expectedValue;
-        // ```
+        // << label-settext
-        // </snippet>
     }
 
     public snippet_Set_TextWrap_TNS() {
-        // <snippet module="ui/label" title="Label">
+        // >> label-textwrap
-        // ### How to turn on text wrapping for a label
-        // ``` JavaScript
         var label = new LabelModule.Label();
         label.textWrap = true;
-        // ```
+        // << label-textwrap
-        // </snippet>
     }
 
     public test_Set_Text_TNS() {
@@ -249,15 +232,12 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
             "color: ", color, "; ",
             "font-size: ", fontSize, ";}"].join("");
 
-        // <snippet module="ui/label" title="Label">
+        // >> label-cssclass
-        // ### How to style a label via css class
-        // ``` JavaScript
         label.text = "The quick brown fox jumps over the lazy dog.";
         label.className = "title";
         //// after that all we have to do is to set a similar css entry within parent page css property
         //// label.parentPage.css = ".title {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
-        // ```
+        // << label-cssclass
-        // </snippet>
 
         var actualTextSize;
         var expSize;
@@ -316,15 +296,12 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
         this.testPage.css = testCss;
         this.waitUntilTestElementIsLoaded();
 
-        // <snippet module="ui/label" title="Label">
+        // >> label-cssclass-type
-        // ### How to style a label via css type
-        // ``` JavaScript
         label.text = "The quick brown fox jumps over the lazy dog.";
         //// in order to style label with a "type style scope" just put a similar css entry
         //// testLabel.parentPage.css = "label {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
         //// all labels within the parent page will be styled according to css values
-        // ```
+        // << label-cssclass-type
-        // </snippet>
         var expectedBackgroundColor = new colorModule.Color(backgroundColor);
         var actualBackgroundColor = label.style.backgroundColor;
         TKUnit.assertEqual(expectedBackgroundColor.hex, actualBackgroundColor.hex);
@@ -349,15 +326,12 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
         this.testPage.css = testCss;
         this.waitUntilTestElementIsLoaded();
 
-        // <snippet module="ui/label" title="Label">
+        // >> label-css-identifier
-        // ### How to style a label via css control identifier
-        // ``` JavaScript
         label.text = "The quick brown fox jumps over the lazy dog.";
         label.id = "testLabel";
         //// after that all we have to do is to set a similar css entry within parent page css property
         //// label.parentPage.css = "#testLabel {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
-        // ```
+        // << label-css-identifier
-        // </snippet>
 
         var expectedBackgroundColor = new colorModule.Color(backgroundColor);
         var actualBackgroundColor = label.style.backgroundColor;
@@ -372,9 +346,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
     }
 
     public test_BindingToText() {
-        // <snippet module="ui/label" title="Label">
+        // >> label-observable
-        // ### How to bind text property of a label to an observable model
-        // ``` JavaScript
         var label = new LabelModule.Label();
         var expValue = "Expected Value";
         var sourceModel = new observableModule.Observable();
@@ -385,8 +357,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
         label.bind(bindingOptions, sourceModel);
         sourceModel.set("sourceProperty", expValue);
         //// console.log(label.text); --> prints: "Expected Value"
-        // ```
+        // << label-observable
-        // </snippet>
 
         TKUnit.assertEqual(label.text, expValue);
     }

apps/tests/ui/label/label.md

@@ -0,0 +1,32 @@
+---
+nav-title: "Label How-To"
+title: "How-To"
+description: "Examples for using Label"
+---
+# Label
+Using a label requires the Label module.
+<snippet id='label-require'/>
+
+### Binding the Label text property to a view-model property.
+``` XML
+<Page>
+  {%raw%}<Label text="{{ title }}" />{%endraw%}
+</Page>
+```
+### How to set label text content
+<snippet id='label-settext'/>
+
+### How to turn on text wrapping for a label
+<snippet id='label-textwrap'/>
+
+### How to style a label via css class
+<snippet id='label-cssclass'/>
+
+### How to style a label via css type
+<snippet id='label-cssclass-type'/>
+
+### How to style a label via css control identifier
+<snippet id='label-css-identifier'/>
+
+### How to bind text property of a label to an observable model
+<snippet id='label-observable'/>