anchor-g
TypeScript icon, indicating that this package has built-in type declarations

0.1.32 • Public • Published

anchor-g


Anchor component based on antd with React

NPM version

Screenshot

Demo

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

install

rc-tabs

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);

API

Documentation

Contact

Anthor

GantFDT

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i anchor-g

Weekly Downloads

29

Version

0.1.32

License

MIT

Unpacked Size

41.3 kB

Total Files

13

Last publish

Collaborators

  • wujiaxian
  • liuyanlu
  • favori
  • eyelly
  • vvey
  • zhangdousang
  • solinma
  • yunfang