adui
Version:
<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>
47 lines (43 loc) • 1.03 kB
Markdown
order: 0
title:
zh-CN: 按钮类型
en-US: Type
设置 `getContainer`，使元素的位置既固定在页面上，又保持在 container 中。
```jsx
const wrapperTop = useRef(null)
const wrapperBottom = useRef(null)
return (
<React.Fragment>
<div
ref={wrapperTop}
style={{
padding: "1% 10% 0",
height: "200px",
backgroundColor: "var(--gray-100)",
}}
>
<Affix getContainer={() => wrapperTop.current} offsetTop={80}>
<Button intent="primary">保持在容器内，且使用 offsetTop</Button>
</Affix>
</div>
<div
ref={wrapperBottom}
style={{
padding: "19% 10% 0",
height: "200px",
backgroundColor: "var(--gray-800)",
}}
>
<Affix
offsetBottom={20}
getContainer={() => wrapperBottom.current}
onChange={(affixed) => console.log(affixed)}
>
<Button>保持在容器内，且使用 offsetBottom</Button>
</Affix>
</div>
</React.Fragment>
)
```