Anchor
Demo
Basic anchor
Use the container prop to set the container where scrolling occurs. When the Anchor component is not in the container (i.e. it does not scroll with the container), there's no need to set the sticky prop.
Infused
Boiled
Espresso
Milk coffee
<template>
<article class="anchor-offset-demo">
<div
ref="container"
class="anchor-wrapper"
>
<div
v-for="i in coffees"
:id="i.value.indexOf('#') >= 0 ? i.value.slice(1) : i.value"
:key="i.value"
class="block"
>
{{ i.label }}
</div>
</div>
<section class="anchor-two">
<veui-anchor
:items="coffees"
container="container"
/>
</section>
</article>
</template>
<script>
import { Anchor } from 'veui'
export default {
components: {
'veui-anchor': Anchor
},
data () {
return {
coffees: [
{
label: 'Infused',
value: '#infused',
children: [
{
label: 'Breadcrumb',
value: '/components/breadcrumb'
}
]
},
{
label: 'Boiled',
value: '#boiled',
children: [
{
label: 'Button',
value: '/components/button'
}
]
},
{
label: 'Espresso',
value: '#espresso'
},
{
label: 'Milk coffee',
value: '#milk-coffee'
}
]
}
}
}
</script>
<style lang="less" scoped>
.anchor-offset-demo {
position: relative;
.anchor-wrapper {
position: relative;
display: flex;
flex-direction: column;
height: 300px;
overflow: auto;
border: 1px dashed;
& > section {
position: absolute;
}
}
.block {
white-space: nowrap;
border-top: 1px solid #000;
width: 100px;
height: 150px;
flex: none;
& + .block {
margin-top: 20px;
}
}
.anchor-two {
position: absolute;
left: 250px;
top: 10px;
}
}
</style>
Sticky anchor
When the Anchor component is in the container (rolling with the container), the sticky prop can be set to control the attachment of the component when it scrolls out of the container.
<template>
<article class="anchor-demo">
<div class="line"/>
<div
ref="container"
class="anchor-wrapper"
>
<div
v-for="i in coffees"
:id="i.value.indexOf('#') >= 0 ? i.value.slice(1) : i.value"
:key="i.value"
class="block"
>
{{ i.label }}
</div>
<section class="anchor-two">
<veui-anchor
:items="coffees"
container="container"
/>
</section>
</div>
</article>
</template>
<script>
import { Anchor } from 'veui'
export default {
components: {
'veui-anchor': Anchor
},
data () {
return {
coffees: [
{
label: 'Infused',
value: '#infused2',
children: [
{
label: 'Breadcrumb',
value: '/components/breadcrumb'
}
]
},
{
label: 'Boiled',
value: '#boiled2',
children: [
{
label: 'Button',
value: '/components/button'
}
]
},
{
label: 'Espresso',
value: '#espresso2'
},
{
label: 'Milk coffee',
value: '#milk-coffee2'
}
]
}
}
}
</script>
<style lang="less" scoped>
.anchor-demo {
position: relative;
.anchor-wrapper {
position: relative;
display: flex;
flex-direction: column;
height: 300px;
overflow: auto;
border: 1px dashed;
& > section {
position: absolute;
}
}
.block {
white-space: nowrap;
border-top: 1px solid #000;
width: 100px;
height: 150px;
flex: none;
& + .block {
margin-top: 20px;
}
}
.anchor-one {
position: absolute;
left: 250px;
top: 50px;
}
.anchor-two {
position: absolute;
left: 250px;
top: 50px;
}
}
</style>
Specify Offset
Use the target-offset prop to control where the anchor scrolls into the container and becomes active.
Use the sticky-offset prop to control where in the container the Anchor starts to attach.
<template>
<article class="anchor-offset-demo">
<div class="target-offset-line"/>
<div class="sticky-offset-line"/>
<div
ref="container"
class="anchor-wrapper"
>
<div
v-for="i in coffees"
:id="i.value.indexOf('#') >= 0 ? i.value.slice(1) : i.value"
:key="i.value"
class="block"
>
{{ i.label }}
</div>
<section class="anchor-two">
<h3>吸附锚点</h3>
<veui-anchor
:items="coffees"
target-offset="20px"
sticky-offset="30px"
container="container"
/>
</section>
</div>
</article>
</template>
<script>
import { Anchor } from 'veui'
export default {
components: {
'veui-anchor': Anchor
},
data () {
return {
coffees: [
{
label: 'Infused',
value: '#infused1',
children: [
{
label: 'Breadcrumb',
value: '/components/breadcrumb'
}
]
},
{
label: 'Boiled',
value: '#boiled1',
children: [
{
label: 'Button',
value: '/components/button'
}
]
},
{
label: 'Espresso',
value: '#espresso1'
},
{
label: 'Milk coffee',
value: '#milk-coffee1'
}
]
}
}
}
</script>
<style lang="less" scoped>
.anchor-offset-demo {
position: relative;
.sticky-offset-line,
.target-offset-line {
position: absolute;
top: 20px;
width: 180px;
border-top: 1px solid red;
&::after {
content: "targetOffset（切换于此）";
position: absolute;
right: 0;
bottom: 0;
color: red;
font-size: 12px;
}
}
.sticky-offset-line {
top: 30px;
left: 250px;
&::after {
content: "stickyOffset（吸附于此）";
}
}
.anchor-wrapper {
position: relative;
display: flex;
flex-direction: column;
height: 300px;
overflow: auto;
border: 1px dashed;
& > section {
position: absolute;
}
}
.block {
white-space: nowrap;
border-top: 1px solid #000;
width: 100px;
height: 150px;
flex: none;
& + .block {
margin-top: 20px;
}
}
.anchor-two {
position: absolute;
left: 250px;
top: 50px;
}
}
</style>
API
Props
| Name | Types | Default | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
items | Array<{value, label, children}> | [] | The datasource array. The type of each item is
| ||||||||||||
sticky | boolean= | false | Whether to apply sticky effect. | ||||||||||||
container | string | HTMLElement | Window= | - | The container which the Anchor component attaches to and checks active state against. | ||||||||||||
target-offset | string | number= | 0 | When an anchor is at the target-offset position of the container, then the corresponding anchor link is active. The numeric type value is a px value, or a percentage string such as '10%' can also be used, which will be calculated based on the height of the container. | ||||||||||||
sticky-offset | string | number= | 0 | For a sticky Anchor, when the container scrolls to the sticky-offset position, then the Anchor starts to attach. Different value types have the same meaning as the target-offset prop. |
Slots
| Name | Description |
|---|---|
item | Renders each anchor link. Default content: anchor link. See the |
item-label | Renders the label of each anchor link. Default content: the See the |