React组件库
致力于在web移动端实现原生APP操作体验的React组件库
安装
npm i vin-rc -S
引入样式文件
import 'vin-rc/lib/index.css';
1. 抽屉
类似于高德地图中点击一个地物后从底部弹出的详情面板,可向上拖动展开,也可向下滑动收起。
使用方法:
import { Draw } from 'vin-rc';
const [drawVisible, setDrawVisible] = useState(false);
return (
<Draw
visible={drawVisible}
onClose={() => setDrawVisible(false)}
>
<div>
<p>这是里面的内容</p>
<p>添加更多内容来滚动试试吧</p>
</div>
</Draw>
);
API
minHeight : number
: 组件处于最低位置时的高度,为视口高度百分比,如30就是30%
maxHeight : number
: 组件处于最高位置时的高度
visiable : boolean
: 是否可见
onClose : () => void
: 当触发收起操作时的回调