fix(splitter): fixed and improved dev example (#173)

positive-js · Jul 17, 2019 · c027191 · c027191
1 parent d9add6c
commit c027191
Showing 1 changed file with 12 additions and 12 deletions.
diff --git a/packages/mosaic-dev/splitter/template.html b/packages/mosaic-dev/splitter/template.html
@@ -9,19 +9,19 @@ <h1 class="mc-h1">Splitter examples</h1>
 
     <h2 class="mc-h2">Horizontal</h2>
 
-    <mc-splitter class="horizontal-block" direction="horizontal">
+    <mc-splitter class="horizontal-block" [direction]="'horizontal'">
         <div mc-splitter-area>first</div>
-        <div mc-splitter-area>second</div>
+        <div mc-splitter-area class="flex">second</div>
         <div mc-splitter-area>third</div>
     </mc-splitter>
 
     <br>
 
     <h2 class="mc-h2">Vertical</h2>
 
-    <mc-splitter class="vertical-block" direction="vertical">
+    <mc-splitter class="vertical-block" [direction]="'vertical'">
         <div mc-splitter-area>first</div>
-        <div mc-splitter-area>second</div>
+        <div mc-splitter-area class="flex">second</div>
         <div mc-splitter-area>third</div>
     </mc-splitter>
 
@@ -31,17 +31,17 @@ <h2 class="mc-h2">Default direction</h2>
 
     <mc-splitter class="horizontal-block">
         <div mc-splitter-area>first</div>
-        <div mc-splitter-area>second</div>
+        <div mc-splitter-area class="flex">second</div>
         <div mc-splitter-area>third</div>
     </mc-splitter>
 
     <br>
 
     <h2 class="mc-h2">Disabled</h2>
 
-    <mc-splitter class="horizontal-block" direction="horizontal" disabled>
+    <mc-splitter class="horizontal-block" [direction]="'horizontal'" disabled>
         <div mc-splitter-area>first</div>
-        <div mc-splitter-area>second</div>
+        <div mc-splitter-area class="flex">second</div>
         <div mc-splitter-area>third</div>
     </mc-splitter>
 
@@ -51,7 +51,7 @@ <h2 class="mc-h2">min-width for the first area</h2>
 
     <mc-splitter class="horizontal-block">
         <div mc-splitter-area class="min-width-enabled">first (with min-width)</div>
-        <div mc-splitter-area>second</div>
+        <div mc-splitter-area class="flex">second</div>
         <div mc-splitter-area class="min-width-enabled">third (with min-width)</div>
     </mc-splitter>
 
@@ -61,8 +61,8 @@ <h2 class="mc-h2">Nested</h2>
 
     <mc-splitter class="horizontal-block">
         <div mc-splitter-area>first</div>
-        <div mc-splitter-area>
-            <mc-splitter direction="vertical">
+        <div mc-splitter-area class="flex">
+            <mc-splitter [direction]="'vertical'">
                 <div mc-splitter-area>top</div>
                 <div mc-splitter-area>center</div>
                 <div mc-splitter-area>bottom</div>
@@ -77,7 +77,7 @@ <h2 class="mc-h2">With custom color</h2>
 
     <mc-splitter class="horizontal-block custom-color">
         <div mc-splitter-area>first</div>
-        <div mc-splitter-area>second</div>
+        <div mc-splitter-area class="flex">second</div>
         <div mc-splitter-area>third</div>
     </mc-splitter>
 
@@ -87,7 +87,7 @@ <h2 class="mc-h2">With custom gutter image</h2>
 
     <mc-splitter class="horizontal-block custom-gutter">
         <div mc-splitter-area>first</div>
-        <div mc-splitter-area>second</div>
+        <div mc-splitter-area class="flex">second</div>
         <div mc-splitter-area>third</div>
     </mc-splitter>