docs(comp:dropdown): add rotate animation to demos (#1671)

IDuxFE · Aug 28, 2023 · d81b1c5 · d81b1c5
1 parent 0a055d7
commit d81b1c5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/packages/components/dropdown/demo/Basic.vue b/packages/components/dropdown/demo/Basic.vue
@@ -1,6 +1,6 @@
 <template>
   <IxDropdown v-model:visible="visible">
-    <a class="ix-dropdown-trigger">Hover me <IxIcon :name="visible ? 'up' : 'down'"></IxIcon></a>
+    <a class="ix-dropdown-trigger">Hover me <IxIcon name="down" :rotate="visible ? 0 : -180"></IxIcon></a>
     <template #overlay>
       <IxMenu :dataSource="dataSource" :selectable="false" @click="onClick"></IxMenu>
     </template>

diff --git a/packages/components/dropdown/demo/Button.vue b/packages/components/dropdown/demo/Button.vue
@@ -11,16 +11,21 @@
     </IxButtonGroup>
     <IxButtonGroup>
       <IxButton @click="onClick">Button</IxButton>
-      <IxDropdown>
-        <IxButton icon="setting" shape="square"></IxButton>
+      <IxDropdown v-model:visible="settingDropdownVisible">
+        <IxButton shape="square">
+          <IxIcon name="setting" :rotate="settingDropdownVisible ? 0 : -180" size="16px" />
+        </IxButton>
         <template #overlay>
           <IxMenu :dataSource="dataSource" :selectable="false"></IxMenu>
         </template>
       </IxDropdown>
     </IxButtonGroup>
 
-    <IxDropdown>
-      <IxButton>Button <IxIcon name="down" size="16px" style="margin-left: 4px"></IxIcon></IxButton>
+    <IxDropdown v-model:visible="arrowDropdownVisible">
+      <IxButton>
+        Button
+        <IxIcon name="down" :rotate="arrowDropdownVisible ? 0 : -180" size="16px" style="margin-left: 4px"></IxIcon>
+      </IxButton>
       <template #overlay>
         <IxMenu :dataSource="dataSource" :selectable="false"></IxMenu>
       </template>
@@ -29,8 +34,13 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
 import { MenuData } from '@idux/components/menu'
 
+const settingDropdownVisible = ref(false)
+const arrowDropdownVisible = ref(false)
+
 const dataSource: MenuData[] = [
   { type: 'item', key: 'one', label: 'One' },
   { type: 'item', key: 'two', label: 'Two' },