Rumah > hujung hadapan web > tutorial js > ionic之样式bar-light

ionic之样式bar-light

黄舟
Lepaskan: 2017-02-17 14:08:13
asal
1101 orang telah melayarinya

1、实例背景

     ionic头部可以利用bar-header,设置样式bar-light


2、实现源码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

        <title>ionic之样式bar-light</title>

        <link rel="stylesheet" href="../css/ionic.css" />

        <script type="text/javascript" src="../js/ionic.bundle.js" ></script>

        <script>

            var app = angular.module("tagApp",["ionic"]);

            app.controller("tagController",function($scope){

                $scope.username = "李海";

            });

        </script>

    </head>

    <body ng-app="barApp" ng-controller="barController">

        <p class="bar bar-header bar-light">

            <label class="title">查询</label>

        </p>

    </body>

</html>

Salin selepas log masuk


3、实现结果

1148.png


 以上就是ionic之样式bar-light的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan