Merge pull request #134 from vuetifyjs/example/inline-checkbox

add inline checkbox example
vuetifyjs · Oct 28, 2018 · 3dd1f57 · 3dd1f57
1 parent 9fe88a1
commit 3dd1f57
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/packages/vuetifyjs.com/examples/selection-controls/checkboxesInlineTexfield.vue b/packages/vuetifyjs.com/examples/selection-controls/checkboxesInlineTexfield.vue
@@ -0,0 +1,44 @@
+<template>
+  <v-card>
+    <v-card-text>
+      <v-container fluid grid-list-md>
+        <v-layout align-center>
+          <v-flex class="shrink">
+            <v-checkbox
+              v-model="ex5"
+              hide-details
+            ></v-checkbox>
+          </v-flex>
+          <v-flex>
+            <v-text-field label="Include files"></v-text-field>
+          </v-flex>
+        </v-layout>
+        <v-layout align-center>
+          <v-flex class="shrink">
+            <v-checkbox
+              v-model="ex6"
+              hide-details
+            ></v-checkbox>
+          </v-flex>
+          <v-flex>
+            <v-text-field
+              label="I only work if you check the box"
+              :disabled="!ex6"
+            ></v-text-field>
+          </v-flex>
+        </v-layout>
+      </v-container>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        ex5: true,
+        ex6: false
+      }
+    }
+  }
+</script>
diff --git a/packages/vuetifyjs.com/i18n/en-US/components/SelectionControls.js b/packages/vuetifyjs.com/i18n/en-US/components/SelectionControls.js
@@ -1,6 +1,6 @@
 export default {
   header: 'Selection controls',
-  headerText: 'Selection control components allow a user to select options. These components **must** be used with the <code>v-model</code> prop as they do not maintain their own state.',
+  headerText: 'Selection control components allow a user to select options. These components **must** be used with the `v-model` prop as they do not maintain their own state.',
   components: ['v-radio-group', 'v-radio', 'v-checkbox', 'v-switch'],
   examples: [{
     example: {
@@ -23,6 +23,10 @@ export default {
       header: "Checkboxes - Colors",
       desc: 'Checkboxes can be colored by using any of the builtin colors and contextual names using the color prop.'
     },
+    checkboxesInlineTexfield: {
+      header: "Checkboxes - Inline with a textfield",
+      desc: ''
+    },
     radiosDefault: {
       header: "Radios - Default",
       desc: 'Radio-groups are by default mandatory. This can be changed with the <code>mandatory</code> prop.'