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.

Edit this page on GitHubEdit
<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.

Edit this page on GitHubEdit
<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.

Edit this page on GitHubEdit
<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

NameTypesDefaultDescription
itemsArray<{value, label, children}>[]

Data source array, item type is {label, value, children, ...}.

NameTypeDescription
labelstringText description of the node.
valuestringValue corresponding to the node is generally an in-page hash, such as #button.
childrenArray<Object>=Child node array of the node, Array item type is the same as the items array item.
stickyboolean=falseWhether produce adsorption effect.
containerstring | HTMLElement | Window=-Anchor adsorption and determine the container referenced by the anchor point activation.
target-offsetstring | number=0When 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-offsetstring | number=0sticky 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.

Slots

NameDescription
item

Render each anchor link.

Default content: anchor link.

Scope parameters, see items property details.

item-label

Render the text of each anchor link.

Default content: the description text label of the anchor link.

Scope parameters, see item slots.

Edit this page on GitHubEdit