Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 0427478

Browse files
authored
Add isOpen to Vue data object and use to conditionally render chevron icon
Add isOpen to Vue data object and used to conditionally render chevron icon when <c-menu-button> toggled
1 parent 1a24aa8 commit 0427478

File tree

1 file changed

+5
-1
lines changed

1 file changed

+5
-1
lines changed

website/pages/menu.mdx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ the Menu component. `isOpen` reflects the current open or closed state of the `C
7070
```vue live=true
7171
<template>
7272
<c-menu v-slot="{ isOpen }">
73-
<c-menu-button :is-active="isOpen" right-icon="chevron-down">
73+
<c-menu-button :is-active="isOpen" :right-icon="isOpen ? 'chevron-up' : 'chevron-down'" right-icon="chevron-down">
7474
{{ isOpen ? 'Close' : 'Open' }}
7575
</c-menu-button>
7676
<c-menu-list>
@@ -86,6 +86,10 @@ the Menu component. `isOpen` reflects the current open or closed state of the `C
8686
8787
<script>
8888
export default {
89+
data() {
90+
return {
91+
isOpen: false,
92+
},
8993
methods: {
9094
alert(value) {
9195
return alert(value)

0 commit comments

Comments
 (0)