Updated example with 'beth-class' examples

rumd3x · Jun 16, 2018 · c9038ce · c9038ce
1 parent 7e3a34a
commit c9038ce
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/example/form.css b/example/form.css
@@ -0,0 +1,11 @@
+.pink-text {
+    color: pink;
+}
+
+.blue-text {
+    color: blue;
+}
+
+.grey-text {
+    color: grey;
+}
diff --git a/example/form.html b/example/form.html
@@ -6,6 +6,8 @@
     <meta name="author" content="RUMD3X">
     <meta name="description" content="Beth.js Example">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
+    <link rel="stylesheet" href="form.css">
     <script src="jquery-3.3.1.min.js"></script>
     <script src="../beth.js"></script>
   </head>
@@ -31,7 +33,7 @@ <h4>Beth Dynamic Inputs!</h4>
     <input beth-bind="instance.tests.radio" type="radio" name="gender" value="male"> Male<br>
     <input beth-bind="instance.tests.radio" type="radio" name="gender" value="female"> Female<br>
     <input beth-bind="instance.tests.radio" type="radio" name="gender" value="other"> Other<br>
-    Selected input value => {{instance.tests.radio}}
+    Selected input value => <span class="border" beth-class="instance.tests.radio === 'male' ? 'blue-text border-primary' : (instance.tests.radio === 'female' ? 'pink-text border-secondary' : 'grey-text')">{{instance.tests.radio}}</span>
 
     <br>
     <br>