<script setup>
import { KsAnchor, KsAnchorLink } from "@ksconsole/components";
import { Affix } from "@king-design/vue";
import { ref } from 'vue'
const wrap = ref(null)

</script>

<template>
<div class="flex wrap" id="wrap">
  <div class="map">
    <div id="basic" class="sub flex-center">
      Basic
    </div>
    <div id="line-less" class="sub flex-center">
      LineLess Mode
    </div>
    <div id="affix" class="sub flex-center">
      Affix
    </div>
  </div>
  <div class="right">
    <Affix :top="87">
      <KsAnchor :change-hash="true" scroll-container="#wrap">
        <KsAnchorLink href="#basic">Basic</KsAnchorLink>
        <KsAnchorLink href="#line-less">LineLess Mode</KsAnchorLink>
        <KsAnchorLink href="#affix">
          Affix
        </KsAnchorLink>
      </KsAnchor>
    </Affix>
  </div>
</div>
</template>

<style scoped lang="less">
.wrap {
  height: 500px;
  overflow: auto;
}
.flex {
  display: flex;
  position: relative;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  font-weight: bold;
}
.map {
  flex: 1;
}
.right {
  flex: none;
  width: 300px;
}
.sub {
  height: 500px;
  margin-bottom: 30px;
}
</style>