docs(VNavigationDrawer): move nested list to list component

vuetifyjs · Jun 11, 2019 · cd69a51 · cd69a51
1 parent 72c563c
commit cd69a51
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 125 deletions.
diff --git a/packages/docs/src/data/pages/components/Lists.json b/packages/docs/src/data/pages/components/Lists.json
@@ -59,6 +59,7 @@
             "intermediate/iconTwoLinesAndAction",
             "intermediate/avatarThreeLines",
             "intermediate/avatarSubheaderTitleAndAction",
+            "intermediate/nested",
             "intermediate/subheadingsAndDividers",
             "intermediate/cardList",
             "intermediate/titleSubtitleActionsAndActionText",

diff --git a/packages/docs/src/data/pages/components/NavigationDrawers.json b/packages/docs/src/data/pages/components/NavigationDrawers.json
@@ -48,7 +48,6 @@
             "simple/expand-on-hover",
             "intermediate/background",
             "intermediate/combined",
-            "intermediate/nested",
             "complex/bottom-drawer"
           ]
         }

diff --git a/packages/docs/src/examples/lists/intermediate/nested.vue b/packages/docs/src/examples/lists/intermediate/nested.vue
@@ -0,0 +1,92 @@
+<template>
+  <v-card
+    class="mx-auto"
+    width="300"
+  >
+    <v-list>
+      <v-list-item>
+        <v-list-item-icon>
+          <v-icon>home</v-icon>
+        </v-list-item-icon>
+
+        <v-list-item-title>Home</v-list-item-title>
+      </v-list-item>
+
+      <v-list-group
+        prepend-icon="account_circle"
+        value="true"
+      >
+        <template v-slot:activator>
+          <v-list-item>
+            <v-list-item-title>Users</v-list-item-title>
+          </v-list-item>
+        </template>
+
+        <v-list-group
+          no-action
+          sub-group
+          value="true"
+        >
+          <template v-slot:activator>
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title>Admin</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+          </template>
+
+          <v-list-item
+            v-for="(admin, i) in admins"
+            :key="i"
+            link
+          >
+            <v-list-item-title v-text="admin[0]"></v-list-item-title>
+            <v-list-item-icon>
+              <v-icon v-text="admin[1]"></v-icon>
+            </v-list-item-icon>
+          </v-list-item>
+        </v-list-group>
+
+        <v-list-group
+          sub-group
+          no-action
+        >
+          <template v-slot:activator>
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title>Actions</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+          </template>
+          <v-list-item
+            v-for="(crud, i) in cruds"
+            :key="i"
+            @click=""
+          >
+            <v-list-item-title v-text="crud[0]"></v-list-item-title>
+            <v-list-item-action>
+              <v-icon v-text="crud[1]"></v-icon>
+            </v-list-item-action>
+          </v-list-item>
+        </v-list-group>
+      </v-list-group>
+    </v-list>
+  </v-card>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      admins: [
+        ['Management', 'people_outline'],
+        ['Settings', 'settings'],
+      ],
+      cruds: [
+        ['Create', 'add'],
+        ['Read', 'insert_drive_file'],
+        ['Update', 'update'],
+        ['Delete', 'delete'],
+      ],
+    }),
+  }
+</script>
diff --git a/packages/docs/src/examples/navigation-drawers/intermediate/nested.vue b/packages/docs/src/examples/navigation-drawers/intermediate/nested.vue
diff --git a/packages/docs/src/lang/en/components/Lists.json b/packages/docs/src/lang/en/components/Lists.json
@@ -25,6 +25,10 @@
       "header": "### Subheadings and dividers",
       "desc": "Lists can contain multiple subheaders and dividers."
     },
+    "nested": {
+      "header": "### Nested lists",
+      "desc": "Using the `v-list-group` component you can create up to **2** levels in depth using the **sub-group** prop."
+    },
     "cardList": {
       "header": "### Card image with toolbar and list",
       "desc": "A list can be combined with a card."

diff --git a/packages/docs/src/lang/en/components/NavigationDrawers.json b/packages/docs/src/lang/en/components/NavigationDrawers.json
@@ -25,10 +25,6 @@
       "header": "### Combined drawers",
       "desc": "In this example we define a custom width to accommodate our nested drawer. Using `v-layout` we ensure that the drawer and list stack horizontally next to each other."
     },
-    "nested": {
-      "header": "### Nested lists",
-      "desc": "Using the `v-list-group` component you can create up to **2** levels in depth using the **sub-group** prop. For more information on `v-list`, [navigate here](/components/lists)."
-    },
     "right": {
       "header": "### Right positioned",
       "desc": "Navigation drawers can also be positioned on the right side of your application (or an element). This is also useful for creating a side-sheet with auxillary information that may not have any navigation links. When using **RTL** you must explicitly define **right** for your drawer."