浮动动作按钮离子应用程序

时间:2016-11-21 21:50:47

标签: android ionic-framework material-design floating-action-button

我想在我的应用程序中添加一个浮动操作按钮,每当我添加它时,我的localhost似乎都会显示它,但是当我在手机上调试时,它只是说“添加”值给它+符号。 / p>

我只导入我的index.html

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Itim|Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
<link rel="stylesheet" href="../mdl/material.min.css">
<script src="../mdl/material.js"></script>
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>    <link href="css/style.css" rel="stylesheet">




<ion-content>
    <ion-list>
      <ion-item ng-repeat="task in tasks" class="item-icon-right" ng-class="{complete: task.completed}" ng-click="task.completed = !task.completed">
        {{task.title}}
        <i class="icon ion-android-create"></i>
        <ion-option-button class="button-assertive" ng-click="tasks.splice($index, 1)">Delete</ion-option-button>
        <ion-option-button class="button-energized" ng-click="edit(task)">Edit</ion-option-button>
        </ion-item>
        <!--<ion-option-button ng-click="showAlert()">Alert</ion-option-button>-->
      <!--<ion-item>
        <select name="singleSelect" ng-model="data.headerColor">
          <option value="bar-positive">Blue</option>
          <option value="bar-calm">Light blue</option>
          <option value="bar-balanced">Green</option>
          <option value="bar-energized">Yellow</option>
          <option value="bar-assertive">Red</option>
          <option value="bar-royal">Purple</option>
          <option value="bar-dark">Black</option>
        </select><br>
      </ion-item>-->

    </ion-list>

      <!-- Real floating action button, fixed. It will not scroll with the content -->
      <ion-fab top right edge>
        <button ion-fab mini><ion-icon name="add"></ion-icon></button>
        <ion-fab-list>
          <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
          <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
          <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
          <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
        </ion-fab-list>
      </ion-fab>

      <ion-fab right bottom>
        <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
        <ion-fab-list side="left">
          <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
          <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
          <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
          <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
        </ion-fab-list>
      </ion-fab>




  </ion-content>

0 个答案:

没有答案