• Anchor 锚点

    用于跳转到页面指定位置。

    何时使用

    需要展现当前页面上可供跳转的锚点链接,以及快速在锚点之间跳转。

    代码演示

    最简单的用法。
    expand code expand code
    import { Anchor } from 'choerodon-ui';
    const { Link } = Anchor;
    
    ReactDOM.render(
      <Anchor>
        <Link href="#anchor-demo-basic" title="Basic demo" />
        <Link href="#anchor-demo-location" title="Fixed demo" />
        <Link href="#api" title="API">
          <Link href="#anchor-props" title="Anchor Props" />
          <Link href="#link-props" title="Link Props" />
        </Link>
      </Anchor>,
      mountNode);
    
    不浮动,状态不随页面滚动变化。
    expand code expand code
    import { Anchor } from 'choerodon-ui';
    const { Link } = Anchor;
    
    ReactDOM.render(
      <Anchor affix={false}>
        <Link href="#anchor-demo-basic" title="Basic demo" />
        <Link href="#anchor-demo-location" title="Fixed demo" />
        <Link href="#api" title="API">
          <Link href="#anchor-props" title="Anchor Props" />
          <Link href="#link-props" title="Link Props" />
        </Link>
      </Anchor>,
      mountNode);
    

    API

    Anchor Props

    成员说明类型默认值
    affix固定模式booleantrue
    bounds锚点区域边界number5(px)
    getContainer指定滚动的容器() => HTMLElement() => window
    offsetBottom距离窗口底部达到指定偏移量后触发number
    offsetTop距离窗口顶部达到指定偏移量后触发number
    showInkInFixed固定模式是否显示小圆点booleanfalse
    成员说明类型默认值
    href锚点链接string
    title文字内容string|ReactNode