Framework7 Custom Build
优质
小牛编辑
126浏览
2023-12-01
Since version 1.0.0 Framework7 comes with Gulp builder that allows to build custom library version where you may include only required components/modules. We need the following:
下载Framework7 GitHub repository,解压到本地目录
安装Node.js (如果没有安装的话)
Install Gulp (if not installed) by executing the following command in terminal:
$ npm install --global gulp
然后,我们需要安装需要的依赖,进入Framework7 repository解压的路径,在终端中执行如下命令:
$ npm install
现在,我们做好了构建定制版本Framework7的准备工作。我们需要执行
gulp custom
命令,传递我们想要添加的组件/模块作为参数。例如,如果我们只想要手风琴(Accordion )和标签页(Tabs)的话:
注意,在逗号和组件名之间不应有空格$ gulp custom -accordion,tabs
以上即为全部操作。现在,你应该可以看到
custom/
文件夹,它包含定制的JS和CSS文件,以及相应的压缩版本
可用的组件/模块
这里是你可以用来定制构建的核心组件列表:
accordion | 手风琴组件 |
searchbar | 搜索栏组件 |
messages | 包含消息和消息栏组件 |
modals | 包含所有遮罩组件:模态框, 上弹框, 弹出框, 操作表和登陆屏 |
swipeout | 滑动操作组件 |
sortable | 可排序列表组件 |
cards | Cards component |
smart-select | 智能选择组件 |
virtual-list | Virtual List component |
pull-to-refresh | 下拉刷新组件 |
infinite-scroll | 无限滚动组件 |
scroll-toolbars | Hide Bars On Scroll component |
tabs | Tabs component |
fast-clicks | 这个库用来去除在移动端浏览器中300ms的点击延时。如果你想要使用第三方的快速点击库,你无需添加它 |
forms | 表单逻辑。包含表单存储, 表单数据和Ajax表单提交 |
push-state | 添加浏览历史 |
swiper | 幻灯片 component |
photo-browser | 图片浏览器组件。幻灯片也会被安装,因为图片浏览器需要它 |
notifications | 通知组件 |
picker | Picker component |
calendar | Calendar / Datepicker component |
只有内核
如果你不添加任何组件,只需要执行 "gulp custom",而不添加任何参数:
$ gulp custom