ionic-toast, 用于离子框架应用的'ionic toast'Bower 组件

分享于 

5分钟阅读

GitHub

  繁體 雙語
'ionic-toast' bower component for ionic framework applications
  • 源代码名称:ionic-toast
  • 源代码网址:http://www.github.com/rajeshwarpatlolla/ionic-toast
  • ionic-toast源代码文档
  • ionic-toast源代码下载
  • Git URL:
    git://www.github.com/rajeshwarpatlolla/ionic-toast.git
    Git Clone代码到本地:
    git clone http://www.github.com/rajeshwarpatlolla/ionic-toast
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/rajeshwarpatlolla/ionic-toast
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    bitHound Score

    简介:

    这是一个 ionic-toast Bower 组件,可以与框架的任何ionic应用一起使用。

    视图演示插件

    先决条件。

    1 ) node.js,Bower 和 gulp。

    如何使用:

    用 Bower 在项目仓库中安装 1 )

    
    bower install ionic-toast --save
    
    
    
    

    这将安装最新版本的发布。 如果你希望安装特定版本,请使用 bower install ionic-toast#<version number>

    ) Give在你的index.html 文件中给出 ionic-toast.bundle.min.js 路径。

    <!-- path to ionic/angularjs files--><scriptsrc="lib/ionic-toast/dist/ionic-toast.bundle.min.js"></script>

    在你的应用程序模块中 ) 注入依赖项 ionic-toast,以便使用ionic toast。

    angular.module('mainModuleName', ['ionic', 'ionic-toast']){
     //}

    4 ) 在控制器中插入'ionictoast'。

    .controller('HomeCtrl', ['$scope', 'ionicToast', function($scope, ionicToast) {
     //code here}])

    你的模板中的 ),你可以使用如下所示

    <buttonclass="button button-block"ng-click="showToast()">Show Toast at top with close</button>

    你的控制器中的 ) 必须定义一个类似 below的函数来显示 toast

    $scope.showToast=function(){<!--ionicToast.show(message, position, stick, time); -->ionicToast.show('This is a toast at the top.', 'top', true, 2500);
    };

    这些参数如下所示。 不应更改参数的顺序。

    a ) message 是第一个参数,它接受任何字符串消息。

    b position ( 可选) 是第二个参数,它接受三个值( 顶部,中间,底部)。 默认位置为 top

    c ) stick ( 可选) 是第三个参数,它采用 true 或者 false。 默认值为 false。

    • 如果该值为 true,则toast不会自动关闭。 点击关闭按钮后,它将被关闭。
    • 如果值为 false,则toast将自动关闭,在给定时间之后。

    d ) timeout ( 可选) 是第四个参数,它以毫秒为单位。 如果该值大于 5000,则将该值视为 5000 ( 5秒)。 默认值为 4000秒秒。

    e ) background ( 可选) 是第五个参数,采用十六进制,rgb() 或者 rgba()的background 颜色。 如果值为空,则 background 颜色为 rgba(0, 0, 0, 0.75)

    你的控制器中的7 ) 必须定义一个像 below 这样的函数来隐藏 toast

    $scope.hideToast=function(){
     ionicToast.hide();
    };

    屏幕快照:

    成功完成 上面 步骤后,你应该能够看到 below 屏幕快照。 我在这里用了三个按钮。

    第一个屏幕快照只显示按钮,然后单击它们。 点击按钮后,你会看到剩下的屏幕截图。

    ionic-toast buttonsionic-toast topionic-toast middleionic-toast bottom

    版本:

    1 ) v0.1.0

    整个 ionic-toast 组件功能已经实现,并且可以与命令一起安装 bower install ionic-toast --save

    2 ) v0.1.1

    Bug 修复

    3 ) v0.2.0

    Lint问题修复,npm软件包更新,在 package.json, 中添加的主要文件在gulp任务中更改。

    4 ) v0.3.0

    代码模块化实现,npm软件包更新。

    JS和CSS文件被合并到dist文件夹中的一个 ionic-toast.bundle.min.js 文件中。

    5 ) v0.4.0

    Bug 修复。

    6 ) v0.4.1

    Issue#21

    许可证:

    联系人:

    gmail: rajeshwar.patlolla@gmail.com

    github: https://github.com/rajeshwarpatlolla

    Twitter: https://twitter.com/rajeshwar_9032

    facebook: https://www.facebook.com/rajeshwarpatlolla

    paypal: rajeshwar.patlolla@gmail.com

    速率/评论:http://market.ionic.io/plugins/ionictoast


    COM    framework  component  ION  Ionic  
    相关文章