Anchor
Demo
Basic Anchor
Use container property to set the container in which scrolling occurs. When the Anchor component is not in the container (that is, it does not scroll with the container), you do not need to set sticky property.
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>
Adsorption Anchor
When Anchor component is in the container (rolling with the container), you can set sticky property to control the adsorption of the component when it rolls 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 target-offset property to control where the anchor point scrolls to the container to start to be active.
Use sticky-offset property to control where the Anchor is in the container to start the adsorption.
<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>Adsorption Anchor</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 (Switch) ";
position: absolute;
right: 0;
bottom: 0;
color: red;
font-size: 12px;
}
}
.sticky-offset-line {
top: 30px;
left: 250px;
&::after {
content: "stickyOffset (Adsorbed) ";
}
}
.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
Anchor Props
| Name | Types | Default | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
items | Array<{value, label, children}> | [] | Data source array, item type is
| ||||||||||||
sticky | boolean= | false | Produce adsorption effect. | ||||||||||||
container | string | HTMLElement | Window= | - | Anchor adsorption and determine the container referenced by the anchor point activation. | ||||||||||||
target-offset | string | number= | 0 | When an anchor point is in the target-offset position to the container, then the corresponding anchor point link is active. The numeric type value is a px, and a string such as '10%' can also be passed in. The calculation will be based on the proportion of the height of the container corresponding to the container. | ||||||||||||
sticky-offset | string | number= | 0 | sticky Anchor, when the container rolls to the position of sticky-offset, then the Anchor starts to adsorb. Different value types have the same meaning as target-offset property. |
Anchor Slots
| Name | Description |
|---|---|
item | Render each anchor link. Default content: anchor link. Scope parameters, see |
item-label | Render the text of each anchor link. Default content: the description text Scope parameters, see |