hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add collasible effect to withdraw component

Browse Source
This commit is contained in:
enzoggqs 2023-02-17 13:03:57 -03:00
parent ad15cbde53
commit 17b6366502
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/ListingComponent/ListingComponent.vue
View File

@ -19,6 +19,7 @@ const etherStore = useEtherStore();
const itemsToShow = ref<Event[]>([]); const itemsToShow = ref<Event[]>([]);
const withdrawAmount = ref<string>(""); const withdrawAmount = ref<string>("");
const isCollapsibleOpen = ref<boolean>(false);
const callWithdraw = async () => { const callWithdraw = async () => {
if (withdrawAmount.value) { if (withdrawAmount.value) {
@ -115,7 +116,16 @@ showInitialItems();
</div> </div>
</div> </div>
<div class="pt-5"> <div class="pt-5">
<div class="py-2 w-100"> <div v-show="!isCollapsibleOpen" class="flex justify-end items-center">
<div
class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
@click="[(isCollapsibleOpen = true)]"
>
<img alt="Withdraw image" src="@/assets/withdraw.svg" />
<span class="last-release-info">Sacar</span>
</div>
</div>
<div v-show="isCollapsibleOpen" class="py-2 w-100">
<p class="text-sm leading-5 font-medium">Valor do saque</p> <p class="text-sm leading-5 font-medium">Valor do saque</p>
<input <input
type="number" type="number"
@ -126,8 +136,17 @@ showInitialItems();
v-model="withdrawAmount" v-model="withdrawAmount"
/> />
</div> </div>
<hr class="pb-3" /> <hr v-show="isCollapsibleOpen" class="pb-3" />
<div class="flex justify-end items-center"> <div
v-show="isCollapsibleOpen"
class="flex justify-between items-center"
>
<h1
@click="[(isCollapsibleOpen = false)]"
class="text-black font-medium cursor-pointer"
>
Cancelar
</h1>
<div <div
class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md" class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
@click="callWithdraw" @click="callWithdraw"