反应全页
官方反应包装 完整页.js 库
浏览器支持
 IE / 边缘 |  火花 |  颜色 |  萨法里 |  iOS 萨法里 |  三星,三星,三星,三星,三星 |  歌剧 |
|---|---|---|---|---|---|---|
| IE11,边缘 | 上两个版本 | 上两个版本 | 上两个版本 | 上两个版本 | 上两个版本 | 上两个版本 |
目录
安装
npm install @fullpage/react-fullpage
这将安装包装以及 完整页.js
许可证
非开源许可证
如果您想使用反应-全页来开发非开源网站,主题,项目和应用程序,商业许可证就是适当的许可证. 使用此选项, 您的源代码为专有 。 也就是说,你不必将整个应用程序的源代码更改为开源许可证. 购买全页商业许可证。 。 。 .
开源许可证
如果您正在创建一个与该许可兼容的开源应用程序 GNU GPL 许可证 v3,您可以根据GPLv3的规定使用全Page.
JavaScript 和 CSS 文件中的信用注释应当完整保存 (即使在合并或微分之后)
更多信息,请查看Page的驾照。 。 。 .
使用量
此包装器创建 <ReactFullpage /> 组件。 它暴露出一个渲染道具 API,所以在整页.js库中标记可以保持不变。 渲染道克接受其回调中包含组件反应属性状态,上下文等参数的1个参数.
UMD 图像
对于没有建设步骤的人,可提供UMD捆绑.
import ReactFullpage from '@fullpage/react-fullpage-umd'; // will return static version on server and "live" version on client
服务器侧面渲染( SSR)
SSR 被支持, 但是服务器发送的 html 将不会被样式化, 这是因为 window 必须在场才能正确设置 height + 键 width 幻灯片。 只要您在浏览器环境中将您的整页组件再加水,就会应用正则样式.
当使用 SSR 或 ext.js 等框架时,组件会根据存在的动态调整自身 window
import ReactFullpage from '@fullpage/react-fullpage'; // will return static version on server and "live" version on client
安全部门改革实例:
你可以找到一个 盖茨比 (单位:千美元) 下一个.js 实例 “实例”文件夹但这里还有其它的: 加兹比 下一个.js
实例
快速启动示例 :
import React from 'react';
import ReactDOM from 'react-dom/client';
import ReactFullpage from '@fullpage/react-fullpage';
const Fullpage = () => (
<ReactFullpage
//fullpage options
licenseKey = {'YOUR_KEY_HERE'}
scrollingSpeed = {1000} /* Options here */
render={({ state, fullpageApi }) => {
return (
<ReactFullpage.Wrapper>
<div className="section">
<p>Section 1 (welcome to fullpage.js)</p>
<button onClick={() => fullpageApi.moveSectionDown()}>
Click me to move down
</button>
</div>
<div className="section">
<p>Section 2</p>
</div>
</ReactFullpage.Wrapper>
);
}}
/>
);
const root = ReactDOM.createRoot(document.getElementById('react-root'));
root.render(<Fullpage />);
Fullpage.js 扩展示例 :
import React from 'react';
import ReactDOM from 'react-dom/client';
import ReactFullpage from '@fullpage/react-fullpage';
// NOTE: if using fullpage extensions/plugins put them here and pass it as props
const pluginWrapper = () => {
require('./statics/fullpage.scrollHorizontally.min');
};
const Fullpage = () => (
<ReactFullpage
pluginWrapper = {pluginWrapper}
//fullpage options
licenseKey = {'YOUR_KEY_HERE'}
scrollingSpeed = {1000} /* Options here */
scrollHorizontally = {true} /* Because we are using the extension */
scrollHorizontallyKey = {'YOUR KEY HERE'}
render={({ state, fullpageApi }) => {
return (
<ReactFullpage.Wrapper>
<div className="section">
<p>Section 1 (welcome to fullpage.js)</p>
<button onClick={() => fullpageApi.moveSectionDown()}>
Click me to move down
</button>
</div>
<div className="section">
<p>Section 2</p>
</div>
</ReactFullpage.Wrapper>
);
}}
/>
);
const root = ReactDOM.createRoot(document.getElementById('react-root'));
root.render(<Fullpage />);
通知在使用时 fullPage.js 扩展名 你会通过 pluginWrapper 函数道具,用于在 react-fullpage 组件已安装.
状态
包装机根据最新版本的fullpage.js保持状态 调用
引发状态变化的最新召回事件将作为 state.lastEvent
注:如果通过v2道具,状态将映射到v2 调用
道具
你可以使用任意 选项 由完整Page.js库作为反应道具支持.
道具对象可以包含标准 选项 以及全页.js 调用。 。 。 .
更多回调 这里
方法
fullPage.js 包含许多 方法。 。 。 .
你可以使用其中的任何一种。 这些物品作为进口物品提供 fullpage.js 一旦第一次渲染已经发生,则会创建库.
回电
每一个传入组件的回调名称将保持状态本身,这将通过 渲染道具 回调参数和由fullpage.js发射的最新回调将反映在 状态。 。 。 .
样式
所有满页.js样式均通过 a 从组件中加载 <style/> 用 Javascript 创建的标签。 要覆盖整页.js样式,您必须匹配特异性。 示例 这里 输入 overrides.css 文件
捐款
有问题吗? 有主意吗? 看看这个 捐款 引导和打开 PR
资源
- Wordpress 主题
- CSS Easing 动画工具 - 马修·莱恩 (有助于定义
easingcss3数值) - 全页.js jsDelivr CDN