一,下载地址为:,下载后直接安装即可。图标如下图所示:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash

一,效果图。

 

或者

 

图片 1

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash

图片 2

 

之后 

 

二,打开ionicLab,如下图所示:

source ~/.bashrc

二,代码。index.html文件如下所示。

 

ok。

 

图片 3

图片 4

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件,由 Cordova/PhoneGap 提供,(开发过程中显示 404) -->
    <script src="js/app2.js"></script>
    <script src="cordova.js"></script>
</head>

<body>
    <!--默认情况下按钮显示样式为:display:inline-block-->
    <button class="button">Default</button>
    <button class="button button-light">button-light</button>
    <button class="button button-stable">button-stable</button>
    <button class="button button-positive">button-positive</button>
    <button class="button button-calm">button-calm</button>
    <button class="button button-balanced">button-balanced</button>
    <button class="button button-energized">button-energized</button>
    <button class="button button-assertive">button-assertive</button>
    <button class="button button-royal">button-royal</button>
    <button class="button button-dark">button-dark</button>
    <button class="button button-block button-positive">Block button</button>
    <button class="button button-full button-positive">Full width Block Button</button>
    <!--不同大小的按钮-->
    <button class="button button-small button-assertive">small button</button>
    <button class="button button-large button-positive">large button</button>
    <!--无背景按钮-->
    <button class="button button-outline button-positive">outlined Button</button>
    <!--无背景与边框按钮-->
    <button class="button button-clear button-positive">clear button</button>
    <!--图标按钮-->
    <button class="button">
        <i class="icon ion-loading-c"></i>loading---
    </button>
    <button class="button icon-left ion-home">Home</button>
    <button class="button icon-left ion-star button-positive">Favorites</button>
    <a class="button icon-right ion-chevron-right button-calm">learn more</a>
    <a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>
    <button class="button icon ion-gear-a"></button>
    <a class="button button-icon icon ion-settings"></a>
    <a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>
    <!--头部底部增加按钮-->
    <div class="bar bar-header">
        <button class="button icon ion-navicon"></button>
        <h1 class="title">Header Buttons</h1>
        <button class="button">Edit</button>

    </div>
    <div class="bar bar-header">
        <button class="button button-icon icon ion-navicon"></button>
        <div class="h1 title">Header Buttons</div>
        <button class="button button-clear button-positive">Edit</button>
    </div>
    <!--按钮栏-->
    <div class="button-bar">
        <a class="button">First</a>
        <a class="button">Second</a>
        <a class="button">Third</a>

    </div>

</body>

</html>

三,打开一个已有的文件,File–>Open
Existing  Application—>找到myApp–>如下图所示:

图片 5

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注