欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【代码笔记】Web-ionic-按钮

程序员文章站 2022-10-04 16:07:07
一,效果图。 二,代码。index.html文件如下所示。 Todo

一,效果图。

 

【代码笔记】Web-ionic-按钮

 

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

 

【代码笔记】Web-ionic-按钮
<!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>
【代码笔记】Web-ionic-按钮

 

参考资料:《菜鸟教程》