43 lines
856 B
Vue
43 lines
856 B
Vue
<template>
|
|
<div class="card">
|
|
<header
|
|
class="card-header has-background-grey-lighter is-unselectable"
|
|
@click="is_open = !is_open"
|
|
>
|
|
<p class="card-header-title">{{ header }}</p>
|
|
<button class="card-header-icon">
|
|
<span class="icon">
|
|
<font-awesome-icon
|
|
:icon="'fa-solid fa-angle-' + (is_open ? 'down' : 'right')"
|
|
/>
|
|
</span>
|
|
</button>
|
|
</header>
|
|
|
|
<slot v-if="is_open" name="default" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Options, Vue } from "vue-class-component";
|
|
|
|
@Options({
|
|
props: {
|
|
header: {
|
|
type: String,
|
|
required: false,
|
|
default: "",
|
|
},
|
|
},
|
|
})
|
|
export default class extends Vue {
|
|
public is_open = false;
|
|
public header!: string;
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
div.card > .card-header {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|