Anchor-g NPM | npm.io

anchor-g

Anchor component based on antd with React

Screenshot

Demo

online example: https://favori.gitee.io/gantd-landing (CodePen)

install

Feature

Can switch to the top
Support magnetic absorption effect
Anchor item with completion status

Usage

import React from 'react';
import Anchor from 'anchor-g';

function BasicUse() {
  const list = [
    {
      id: 'horbasic1',
      title: 'title_1',
      complete: true
    },
    {
      id: 'horbasic2',
      title: 'title_2',
    },
    {
      id: 'horbasic3',
      title: 'title_3',
      complete: false
    }
  ]
  const style = {
    display: 'flex',
    justifyContent: 'center',
    alignItems:'center',
    height: 400,
    fontSize:24,
    border:'1px solid rgba(128,128,128,0.1)'
  }
  return (
    <>
      <Anchor
        list={list}
        minHeight={800}
        content={
          <div>
            <div id='horbasic1' style={style}>content_1</div>
            <div id='horbasic2' style={style}>content_2</div>
            <div id='horbasic3' style={style}>content_3</div>
          </div>
        }
      />
    </>
  )
}

React.render(<BasicUse/>, mountNode);