Adam Bem
c45d1ee83d
Reviewed-on: #268 Reviewed-by: Mikolaj Widla <widlam@noreply.example.com> Co-authored-by: Adam Bem <adam.bem@zoho.eu> Co-committed-by: Adam Bem <adam.bem@zoho.eu>
28 lines
967 B
Vue
28 lines
967 B
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
const isActive = ref(true);
|
|
|
|
function switchHiddenElement(){
|
|
isActive.value = !isActive.value;
|
|
}
|
|
|
|
const props = defineProps(
|
|
{
|
|
categoryName: {required : true}
|
|
}
|
|
)
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<div class="w-full mb-4 p-2 rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900">
|
|
<button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-1 text-lg font-normal text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100 dark:hover:bg-slate-600">
|
|
<span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
|
|
</button>
|
|
<div class="flex flex-col w-full mt-2 py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-light overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template> |