-
-
-
-
-
-
-
-
-
-
-
-
Components
-
General
-
Layout
-
Navigation
-
Data Entry
-
Data Display
-
Feedback
-
Other
-
-
-
-
Anchor 锚点
用于跳转到页面指定位置。
何时使用
需要展现当前页面上可供跳转的锚点链接,以及快速在锚点之间跳转。
代码演示
最简单的用法。
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);
不浮动,状态不随页面滚动变化。
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 | 固定模式 | boolean | true |
bounds | 锚点区域边界 | number | 5(px) |
getContainer | 指定滚动的容器 | () => HTMLElement | () => window |
offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
Link Props
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
href | 锚点链接 | string | |
title | 文字内容 | string|ReactNode |