logoMogu Design

⌘ K
  • Design
  • Development
  • Components
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
Basic
Horizontal Anchor
Static Anchor
Customize the onClick event
Customize the anchor highlight
Set Anchor scroll offset
Listening for anchor link change
API
Anchor Props
AnchorItem
Link Props
Design Token

Anchor

SpaceBreadcrumb

Hyperlinks to scroll on one page.

When To Use

For displaying anchor hyperlinks on page and jumping between them.

Notes for developers

After version 4.24.0, we rewrite Anchor use FC, Some methods of obtaining ref and calling internal instance methods will invalid.

Examples

API

Anchor Props

PropertyDescriptionTypeDefaultVersion
affixFixed mode of Anchorbooleantrue
boundsBounding distance of anchor areanumber5
getContainerScrolling container() => HTMLElement() => window
getCurrentAnchorCustomize the anchor highlight(activeLink: string) => string-
offsetTopPixels to offset from top when calculating position of scrollnumber0
showInkInFixedWhether show ink-square when affix={false}booleanfalse
targetOffsetAnchor scroll offset, default as offsetTop, examplenumber-
onChangeListening for anchor link change(currentActiveLink: string) => void
onClickSet the handler to handle click event(e: MouseEvent, link: object) => void-
itemsData configuration option content, support nesting through children{ key, href, title, target, children }[] see-5.1.0
directionSet Anchor directionvertical | horizontalvertical5.2.0

AnchorItem

PropertyDescriptionTypeDefaultVersion
keyThe unique identifier of the Anchor Linkstring | number-
hrefThe target of hyperlinkstring
targetSpecifies where to display the linked URLstring
titleThe content of hyperlinkReactNode
childrenNested Anchor Link, Attention: This attribute does not support horizontal orientationAnchorItem[]-

Link Props

We recommend using the items form instead.

PropertyDescriptionTypeDefaultVersion
hrefThe target of hyperlinkstring
targetSpecifies where to display the linked URLstring
titleThe content of hyperlinkReactNode

Design Token

Global Token

Basic

The simplest usage.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Anchor, Row, Col } from 'mogud';

const App: React.FC = () => (
  <Row>
    <Col span={16}>
      <div id="part-1" style={{ height: '100vh', background: 'rgba(255,0,0,0.02)' }} />
      <div id="part-2" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }} />
      <div id="part-3" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }} />
    </Col>
    <Col span={8}>
      <Anchor
        items={[
          {
            key: 'part-1',
            href: '#part-1',
            title: 'Part 1',
          },
          {
            key: 'part-2',
            href: '#part-2',
            title: 'Part 2',
          },
          {
            key: 'part-3',
            href: '#part-3',
            title: 'Part 3',
          },
        ]}
      />
    </Col>
  </Row>
);

export default App;
Horizontal Anchor

Horizontally aligned anchors

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Anchor } from 'mogud';

const App: React.FC = () => (
  <>
    <div style={{ padding: '20px' }}>
      <Anchor
        direction="horizontal"
        items={[
          {
            key: 'part-1',
            href: '#part-1',
            title: 'Part 1',
          },
          {
            key: 'part-2',
            href: '#part-2',
            title: 'Part 2',
          },
          {
            key: 'part-3',
            href: '#part-3',
            title: 'Part 3',
          },
          {
            key: 'part-4',
            href: '#part-4',
            title: 'Part 4',
          },
          {
            key: 'part-5',
            href: '#part-5',
            title: 'Part 5',
          },
          {
            key: 'part-6',
            href: '#part-6',
            title: 'Part 6',
          },
        ]}
      />
    </div>
    <div>
      <div
        id="part-1"
        style={{
          width: '100vw',
          height: '100vh',
          textAlign: 'center',
          background: 'rgba(0,255,0,0.02)',
        }}
      />
      <div
        id="part-2"
        style={{
          width: '100vw',
          height: '100vh',
          textAlign: 'center',
          background: 'rgba(0,0,255,0.02)',
        }}
      />
      <div
        id="part-3"
        style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#FFFBE9' }}
      />
      <div
        id="part-4"
        style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#F4EAD5' }}
      />
      <div
        id="part-5"
        style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#DAE2B6' }}
      />
      <div
        id="part-6"
        style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#CCD6A6' }}
      />
    </div>
  </>
);

export default App;
Static Anchor

Do not change state when page is scrolling.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Anchor } from 'mogud';

const App: React.FC = () => (
  <Anchor
    affix={false}
    items={[
      {
        key: '1',
        href: '#components-anchor-demo-basic',
        title: 'Basic demo',
      },
      {
        key: '2',
        href: '#components-anchor-demo-static',
        title: 'Static demo',
      },
      {
        key: '3',
        href: '#api',
        title: 'API',
        children: [
          {
            key: '4',
            href: '#anchor-props',
            title: 'Anchor Props',
          },
          {
            key: '5',
            href: '#link-props',
            title: 'Link Props',
          },
        ],
      },
    ]}
  />
);

export default App;
Customize the onClick event

Clicking on an anchor does not record history.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Anchor } from 'mogud';

const handleClick = (
  e: React.MouseEvent<HTMLElement>,
  link: {
    title: React.ReactNode;
    href: string;
  },
) => {
  e.preventDefault();
  console.log(link);
};

const App: React.FC = () => (
  <Anchor
    affix={false}
    onClick={handleClick}
    items={[
      {
        key: '1',
        href: '#components-anchor-demo-basic',
        title: 'Basic demo',
      },
      {
        key: '2',
        href: '#components-anchor-demo-static',
        title: 'Static demo',
      },
      {
        key: '3',
        href: '#api',
        title: 'API',
        children: [
          {
            key: '4',
            href: '#anchor-props',
            title: 'Anchor Props',
          },
          {
            key: '5',
            href: '#link-props',
            title: 'Link Props',
          },
        ],
      },
    ]}
  />
);

export default App;
Customize the anchor highlight

Customize the anchor highlight.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Anchor } from 'mogud';

const getCurrentAnchor = () => '#components-anchor-demo-static';

const App: React.FC = () => (
  <Anchor
    affix={false}
    getCurrentAnchor={getCurrentAnchor}
    items={[
      {
        key: '1',
        href: '#components-anchor-demo-basic',
        title: 'Basic demo',
      },
      {
        key: '2',
        href: '#components-anchor-demo-static',
        title: 'Static demo',
      },
      {
        key: '3',
        href: '#api',
        title: 'API',
        children: [
          {
            key: '4',
            href: '#anchor-props',
            title: 'Anchor Props',
          },
          {
            key: '5',
            href: '#link-props',
            title: 'Link Props',
          },
        ],
      },
    ]}
  />
);

export default App;
Set Anchor scroll offset

Anchor target scroll to screen center.

expand codeexpand code
TypeScript
JavaScript
import React, { useEffect, useState } from 'react';
import { Anchor, Row, Col } from 'mogud';

const App: React.FC = () => {
  const topRef = React.useRef<HTMLDivElement>(null);
  const [targetOffset, setTargetOffset] = useState<number>();

  useEffect(() => {
    setTargetOffset(topRef.current?.clientHeight);
  }, []);

  return (
    <div>
      <Row>
        <Col span={18}>
          <div
            id="part-1"
            style={{ height: '100vh', background: 'rgba(255,0,0,0.02)', marginTop: '30vh' }}
          >
            Part 1
          </div>
          <div id="part-2" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }}>
            Part 2
          </div>
          <div id="part-3" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }}>
            Part 3
          </div>
        </Col>
        <Col span={6}>
          <Anchor
            targetOffset={targetOffset}
            items={[
              {
                key: 'part-1',
                href: '#part-1',
                title: 'Part 1',
              },
              {
                key: 'part-2',
                href: '#part-2',
                title: 'Part 2',
              },
              {
                key: 'part-3',
                href: '#part-3',
                title: 'Part 3',
              },
            ]}
          />
        </Col>
      </Row>

      <div
        style={{
          height: '30vh',
          background: 'rgba(0,0,0,0.85)',
          position: 'fixed',
          top: 0,
          left: 0,
          width: '75%',
          color: '#FFF',
        }}
        ref={topRef}
      >
        <div>Fixed Top Block</div>
      </div>
    </div>
  );
};

export default App;
Listening for anchor link change

Listening for anchor link change.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Anchor } from 'mogud';

const onChange = (link: string) => {
  console.log('Anchor:OnChange', link);
};

const App: React.FC = () => (
  <Anchor
    affix={false}
    onChange={onChange}
    items={[
      {
        key: '1',
        href: '#components-anchor-demo-basic',
        title: 'Basic demo',
      },
      {
        key: '2',
        href: '#components-anchor-demo-static',
        title: 'Static demo',
      },
      {
        key: '3',
        href: '#api',
        title: 'API',
        children: [
          {
            key: '4',
            href: '#anchor-props',
            title: 'Anchor Props',
          },
          {
            key: '5',
            href: '#link-props',
            title: 'Link Props',
          },
        ],
      },
    ]}
  />
);

export default App;
Basic demo
Static demo
API
Anchor Props
Link Props
Basic demo
Static demo
API
Anchor Props
Link Props
Basic demo
Static demo
API
Anchor Props
Link Props
Basic demo
Static demo
API
Anchor Props
Link Props