more generic Tips component
This commit is contained in:
parent
fd29b4ad2f
commit
4f2ecd14f4
1 changed files with 16 additions and 2 deletions
|
@ -2,7 +2,9 @@
|
||||||
<ul class="tip">
|
<ul class="tip">
|
||||||
<header>
|
<header>
|
||||||
Tips:
|
Tips:
|
||||||
<button @click="tipsShown = !tipsShown">{{ tipsShown ? 'close' : 'expand' }}</button>
|
<button @click="tipsShown = !tipsShown" v-if="collapsible">
|
||||||
|
{{ tipsShown ? 'collapse' : 'expand' }}
|
||||||
|
</button>
|
||||||
</header>
|
</header>
|
||||||
<template v-if="tipsShown">
|
<template v-if="tipsShown">
|
||||||
<slot />
|
<slot />
|
||||||
|
@ -12,5 +14,17 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
const tipsShown = ref(true)
|
|
||||||
|
const props = defineProps({
|
||||||
|
collapsible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
hiddenByDefault: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const tipsShown = ref(!props.hiddenByDefault)
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Add table
Reference in a new issue