add modal component example

yyx990803 · yyx990803 · commit 4cc58b46c0bf · 2015-08-01T16:49:30.000-04:00
diff --git a/examples/modal/index.html b/examples/modal/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Vue.js Modal Example</title>
+    <script src="../../dist/vue.js"></script>
+    <link rel="stylesheet" href="modal.css">
+  </head>
+  <body>
+    <!-- template for the modal component -->
+    <template id="modal-template">
+      <div class="modal-mask" v-show="show" v-transition="modal">
+        <div class="modal-wrapper">
+          <div class="modal-container">
+            <content select=".modal-header">
+              <div class="modal-header">
+                default header
+              </div>
+            </content>
+            <content select=".modal-body">
+              <div class="modal-body">
+                default body
+              </div>
+            </content>
+            <content select=".modal-footer">
+              <div class="modal-footer">
+                default footer
+                <button class="modal-default-button"
+                  v-on="click: show = false">
+                  OK
+                </button>
+              </div>
+            </content>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <script>
+      // register modal component
+      Vue.component('modal', {
+        template: '#modal-template',
+        props: {
+          show: {
+            type: Boolean,
+            required: true,
+            twoWay: true    
+          }
+        }
+      })
+    </script>
+
+    <!-- app -->
+    <div id="app">
+      <button v-on="click: showModal = true">Show Modal</button>
+      <!-- use the modal component, pass in the prop -->
+      <modal show="{{@showModal}}">
+        <!--
+          you can use custom content here to overwrite
+          default content
+        -->
+        <div class="modal-header">
+          <h3>custom header</h3>
+        </div>
+      </modal>
+    </div>
+
+    <script>
+      // start app
+      new Vue({
+        el: '#app',
+        data: {
+          showModal: false
+        }
+      })
+    </script>
+  </body>
+</html>
diff --git a/examples/modal/modal.css b/examples/modal/modal.css
@@ -0,0 +1,59 @@
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .5);
+  display: table;
+  transition: opacity .3s ease;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  width: 300px;
+  margin: 0px auto;
+  padding: 20px 30px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
+  transition: all .3s ease;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.modal-header h3 {
+  margin-top: 0;
+  color: #42b983;
+}
+
+.modal-body {
+  margin: 20px 0;
+}
+
+.modal-default-button {
+  float: right;
+}
+
+/*
+ * the following styles are auto-applied to elements with
+ * v-transition="modal" when their visiblity is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter, .modal-leave {
+  opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
