fix(ui): use button component in TOC
This commit is contained in:
parent
999bbcd559
commit
248ea9aa31
|
@ -3,6 +3,8 @@ import { computed, ref, watchEffect } from 'vue'
|
|||
import { slugify } from 'transliteration'
|
||||
import { useScroll } from '@vueuse/core'
|
||||
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
|
||||
const { heading = 'h1' } = defineProps<{heading?:'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>()
|
||||
|
||||
const toc = ref()
|
||||
|
@ -39,14 +41,14 @@ watchEffect(() => {
|
|||
|
||||
<div class="toc-toc">
|
||||
<div class="toc-links">
|
||||
<button
|
||||
<Button
|
||||
v-for="h of headings"
|
||||
:key="h.id"
|
||||
:class="{ 'is-active': activeLink === h.id }"
|
||||
@click.prevent="h.scrollIntoView({ behavior: 'smooth' })"
|
||||
>
|
||||
{{ h.textContent }}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -33,9 +33,9 @@
|
|||
|
||||
padding-left: 8px;
|
||||
|
||||
@include docs {
|
||||
/* @include docs {
|
||||
top: 72px;
|
||||
}
|
||||
} */
|
||||
|
||||
> button {
|
||||
position: relative;
|
||||
|
|
Loading…
Reference in New Issue