feat(docs): add arrow-container slot example #16955

Author: SamVanini

docs/src/examples/QBtnDropdown/ArrowContainerSlot.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="q-pa-md">
+    <q-btn-dropdown
+      split
+      label="Dropdown Button"
+      color="cyan"
+      push
+      no-caps
+      @click="onMainClick"
+    >
+      <template v-slot:arrow-container>
+        <q-icon name="change_history" />
+      </template>
+
+      <q-list>
+        <q-item clickable v-close-popup @click="onItemClick">
+          <q-item-section avatar>
+            <q-avatar icon="folder" color="primary" text-color="white" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Photos</q-item-label>
+            <q-item-label caption>February 22, 2016</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="info" color="amber" />
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable v-close-popup @click="onItemClick">
+          <q-item-section avatar>
+            <q-avatar icon="assignment" color="secondary" text-color="white" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Vacation</q-item-label>
+            <q-item-label caption>February 22, 2016</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="info" color="amber" />
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-btn-dropdown>
+  </div>
+</template>
+
+<script>
+export default {
+  setup () {
+    return {
+      onMainClick () {
+        // console.log('Clicked on main button')
+      },
+
+      onItemClick () {
+        // console.log('Clicked on an Item')
+      }
+    }
+  }
+}
+</script>

docs/src/pages/vue-components/button-dropdown.md

@@ -27,6 +27,8 @@ In case you are looking for a dropdown "input" instead of "button" use [Select](
 
 <DocExample title="Label slot" file="LabelSlot" />
 
+<DocExample title="Arrow container slot" file="ArrowContainerSlot" />
+
 <DocExample title="Using v-model" file="Model" />
 
 <DocExample title="Disable" file="Disable" />