docs(limel-dialog and limel-collapsible-section): add limel-slider to…

… hidden areas in examples #192
Lundalogik · Nov 14, 2018 · d933eb5 · d933eb5
1 parent a841e6f
commit d933eb5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/examples/collapsible-section/collapsible-section.tsx b/src/examples/collapsible-section/collapsible-section.tsx
@@ -8,6 +8,9 @@ export class CollapsibleSectionExample {
     @State()
     private secondExampleIsOpen = false;
 
+    @State()
+    private percentage = 34;
+
     public render() {
         return [
             <section>
@@ -33,7 +36,10 @@ export class CollapsibleSectionExample {
                     onClose={this.secondExampleOnClose.bind(this)}
                 >
                     <h5 slot="header">Click me or click the button</h5>
-                    <p slot="body">Either way, the section will toggle!</p>
+                    <p slot="body">
+                        Either way, the section will toggle!
+                        <limel-slider unit="%" value={this.percentage} />
+                    </p>
                 </limel-collapsible-section>
             </section>,
         ];

diff --git a/src/examples/dialog/dialog.tsx b/src/examples/dialog/dialog.tsx
@@ -21,6 +21,9 @@ export class DialogExample {
     @State()
     private age: string;
 
+    @State()
+    private percentage = 45;
+
     public render() {
         return [
             <section>
@@ -88,6 +91,9 @@ export class DialogExample {
                                 }}
                             />
                         </p>
+                        <p>
+                            <limel-slider unit="%" value={this.percentage} />
+                        </p>
                     </form>
                     <limel-button-group class="reverse-order" slot="button">
                         <limel-button