锚点 Anchor - Mogu Design

最简单的用法。

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;

横向 Anchor

横向 Anchor。

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;

不浮动，状态不随页面滚动变化。

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;

点击锚点不记录历史。

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;

自定义锚点高亮。

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;

设置锚点滚动偏移量

锚点目标滚动到屏幕正中间。

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;

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;

参数	说明	类型	默认值	版本
affix	固定模式	boolean	true
bounds	锚点区域边界	number	5
getContainer	指定滚动的容器	() => HTMLElement	() => window
getCurrentAnchor	自定义高亮的锚点	(activeLink: string) => string	-
offsetTop	距离窗口顶部达到指定偏移量后触发	number
showInkInFixed	`affix={false}` 时是否显示小方块	boolean	false
targetOffset	锚点滚动偏移量，默认与 offsetTop 相同，例子	number	-
onChange	监听锚点链接改变	(currentActiveLink: string) => void	-
onClick	`click` 事件的 handler	(e: MouseEvent, link: object) => void	-
items	数据化配置选项内容，支持通过 children 嵌套	{ key, href, title, target, children }[] 具体见	-	5.1.0
direction	设置导航方向	`vertical` \| `horizontal`	`vertical`	5.2.0

参数	说明	类型	默认值
key	唯一标志	string \| number	-
href	锚点链接	string	-
target	该属性指定在何处显示链接的资源	string	-
title	文字内容	ReactNode	-
children	嵌套的 Anchor Link，`注意：水平方向该属性不支持`	AnchorItem[]	-

参数	说明	类型	默认值	版本
affix	固定模式	boolean	true
bounds	锚点区域边界	number	5
getContainer	指定滚动的容器	() => HTMLElement	() => window
getCurrentAnchor	自定义高亮的锚点	(activeLink: string) => string	-
offsetTop	距离窗口顶部达到指定偏移量后触发	number
showInkInFixed	`affix={false}` 时是否显示小方块	boolean	false
targetOffset	锚点滚动偏移量，默认与 offsetTop 相同，例子	number	-
onChange	监听锚点链接改变	(currentActiveLink: string) => void	-
onClick	`click` 事件的 handler	(e: MouseEvent, link: object) => void	-
items	数据化配置选项内容，支持通过 children 嵌套	{ key, href, title, target, children }[] 具体见	-	5.1.0
direction	设置导航方向	`vertical` \| `horizontal`	`vertical`	5.2.0

参数	说明	类型	默认值
key	唯一标志	string \| number	-
href	锚点链接	string	-
target	该属性指定在何处显示链接的资源	string	-
title	文字内容	ReactNode	-
children	嵌套的 Anchor Link，`注意：水平方向该属性不支持`	AnchorItem[]	-

Mogu Design

Anchor锚点

Mogu Design

Anchor锚点

何时使用

代码演示

API

Anchor Props

AnchorItem

Link Props

Design Token

Global Token

何时使用

代码演示

API

Anchor Props

AnchorItem

Link Props

Design Token

Global Token