framework7-plugin-3d-panels, Framework7插件为侧面板添加 3d 效果

分享于 

3分钟阅读

GitHub

  繁體 雙語
Framework7 plugin to add 3d effect for side panels
  • 源代码名称:framework7-plugin-3d-panels
  • 源代码网址:http://www.github.com/framework7io/framework7-plugin-3d-panels
  • framework7-plugin-3d-panels源代码文档
  • framework7-plugin-3d-panels源代码下载
  • Git URL:
    git://www.github.com/framework7io/framework7-plugin-3d-panels.git
    Git Clone代码到本地:
    git clone http://www.github.com/framework7io/framework7-plugin-3d-panels
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/framework7io/framework7-plugin-3d-panels
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    devDependency Status [ Flattr this git repo ] ( https://flattr.com/submit/auto?user_id=nolimits4web&url=https://github.com/nolimits4web/framework7-3d-panels/&title=Framework7 3D Panels&language=JavaScript&tags=github&category=software)

    Framework7-3D-Panels

    Framework7插件为侧面板添加 3d 效果

    安装

    只需从 dist/ 文件夹中抓取插件文件或者使用 Bower:

    
    bower install framework7-3d-panels
    
    
    
    

    然后将它们链接到framework7和样式脚本之后的应用程序右侧:

    
    <link rel="stylesheet" href="path/to/framework7.ios.min.css">
    
    
    <link rel="stylesheet" href="path/to/framework7.ios.colors.min.css">
    
    
    <link rel="stylesheet" href="path/to/framework7.3dpanels.css">
    
    
    ...
    
    
    <script src="path/to/framework7.min.js"></script>
    
    
    <script src="path/to/framework7.3dpanels.js"></script>
    
    
    
    

    用法

    这个插件不会增加新的效果,它只是将"显示"-effect面板转换为 3d 个面板。 因此,请确保你的布局中有"显示"面板:

    
    <div class="panel panel-left panel-reveal">...</div>
    
    
    
    

    演示

    插件附带了演示示例,看看它是如何工作的。 要制作演示作品,你需要:

    • 安装 Bower 依赖项转到 demo/ 文件夹并在终端 bower install 中执行

    所有更改仅在 src/ 文件夹中完成。 这里项目使用 gulp 构建可以发布版本。

    首先,你需要安装所有依赖项:

     
    $ npm install
    
    
    
     

    然后构建用于测试运行的插件文件:

     
    $ gulp build
    
    
    
     

    如果你在开发时需要本地服务器,可以运行:

     
    $ gulp server
    
    
    
     

    工作演示将在 http://localhost:3000/demo/ 上提供


    plugin    framework  添加  SID  PAN  
    相关文章