53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import { useState } from 'react'
|
||
import { ScrollTop } from '../../src'
|
||
import { Demo } from '../components/Demo'
|
||
import { PropsTable } from '../components/PropsTable'
|
||
import { Section } from '../components/Section'
|
||
|
||
export function ScrollTopSection() {
|
||
const [visible, setVisible] = useState(false)
|
||
|
||
return (
|
||
<Section
|
||
id="scrolltop"
|
||
title="回到顶部"
|
||
api="ScrollTop"
|
||
desc="固定在视口右侧中部的圆形按钮，可见性由页面根据滚动位置控制。真实位置在页面右侧，不在下面的预览区里。"
|
||
>
|
||
<Demo
|
||
title="显隐控制"
|
||
desc="桌面端滚的是内容容器（传 targetId），窄屏滚的是窗口（不传）；两种都支持，避免滚错了不生效。"
|
||
code={`<ScrollTop visible={scrolled} targetId="content-scroll" />`}
|
||
>
|
||
<button
|
||
type="button"
|
||
onClick={() => setVisible((current) => !current)}
|
||
style={{
|
||
padding: '6px 14px',
|
||
borderRadius: 6,
|
||
border: '1px solid var(--su-border-strong)',
|
||
background: 'var(--su-bg-card)',
|
||
cursor: 'pointer',
|
||
}}
|
||
>
|
||
{visible ? '隐藏' : '显示'}回到顶部按钮
|
||
</button>
|
||
<span style={{ alignSelf: 'center', color: 'var(--su-text-muted)', fontSize: 12 }}>
|
||
点左侧按钮，右下角会淡入 / 淡出
|
||
</span>
|
||
</Demo>
|
||
|
||
<ScrollTop visible={visible} />
|
||
|
||
<PropsTable
|
||
rows={[
|
||
{ name: 'visible', type: 'boolean', required: true, desc: '是否显示' },
|
||
{ name: 'targetId', type: 'string', desc: '滚动容器 id；不传则滚窗口' },
|
||
{ name: 'label', type: 'string', defaultValue: "'回到顶部'", desc: '无障碍名称与 title' },
|
||
{ name: 'offset', type: 'number', defaultValue: '24', desc: '距右侧距离（px）' },
|
||
]}
|
||
/>
|
||
</Section>
|
||
)
|
||
}
|