40 lines
1.8 KiB
Vue
40 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
const open = ref(false), username = ref(""), price = ref(750), disabled = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<Head>
|
|
<Title>Accueil</Title>
|
|
</Head>
|
|
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
|
|
<div class="w-1/2 flex flex-1 flex-col justify-center items-center">
|
|
<Loading />
|
|
<Collapsible label="Options">
|
|
<div class="flex flex-col">
|
|
<Switch label="Test" v-model="disabled" />
|
|
<SliderInput :disabled="disabled" :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25"
|
|
v-model="price" />
|
|
<TextInput label="Saisir un pseudonyme" :disabled="disabled" v-model="username" />
|
|
<NumberPicker label="Age" :disabled="disabled" />
|
|
</div>
|
|
</Collapsible>
|
|
<Separator decorative orientation="horizontal" class="h-px w-96 my-2 bg-light-30 dark:bg-dark-30" />
|
|
<HoverCard>
|
|
<span>Texte</span>
|
|
<template v-slot:content>
|
|
<div>
|
|
<Avatar src="public/logo.svg" icon="radix-icons:question-mark"/>
|
|
<span class="text-xl font-light px-4">Dice[any]</span>
|
|
</div>
|
|
</template>
|
|
</HoverCard>
|
|
<Dialog label="Open" title="Titre" description="Description courte de la popup">
|
|
<div class="flex flex-col items-start">
|
|
<Separator decorative orientation="horizontal" class="h-px w-96 my-2 bg-light-30 dark:bg-dark-30" />
|
|
<span>Contenu special</span>
|
|
<Switch label="Theme sombre ?" />
|
|
</div>
|
|
</Dialog>
|
|
</div>
|
|
</div>
|
|
</template> |