在离子中创建浮动动作按钮

Question

我正在尝试使用离子框架构建一个动作浮动按钮。 我能够构建一个按钮，但想创建一些样式，例如效果，并且应该提示更多按钮。 我知道这可以使用 ionic-material 轻松完成，但我不想使用它，并且只能使用 AngularJS、Ionic 和 CSS 来完成。

HTML

<div class="float-button">
    <span class="height-fix">
        <a class="content" ui-sref="home">
            <i class="ion-ios-home"> </i>
        </a>
    </span>
</div>

CSS

.float-button {
    background-color:$heading-color;
    opacity: 0.9;
    color: white;
    border-radius: 50%;
    /*border-radius:15% 0 0 0;*/
    width: 30px;
    padding: 25px;
    font-size: 30px;
    position: fixed;
    bottom: 10%; /* Adjust height */
    right: 5%; /* Adjust position */
    z-index: 1000;
}
.float-button .height_fix {
    margin-top: 100%;
    border: 1px solid red;
}
.float-button .content {
    position: absolute;
    left: 0;
    top: 50%;
    height: 100%;
    width: 100%;
    text-align: center;
    margin-top: -20px;
    color: $app-background-color;
}

Answer 1

试试这个

  <ion-view view-title="Job List">
   <ion-content class="padding has-header has-subheader">
     <ion-item ng-repeat="jobs in jobsList">
       <h2>{{jobs.title}}</h2>
       <p>{{jobs.description}}</p>
     </ion-item>
   </ion-content>

   <div class="float-button">
     <span class="height-fix">
       <button id="fab-profile" ui-sref="app.jobAdd" class="button button-fab button-fab-bottom-right fab-fixed button-assertive pane" nav-view="active" style="opacity: 1; transform: translate3d(0%, 0px, 0px);">
         <i class="icon ion-plus"></i>
       </button>
     </span>
   </div>
 </ion-view>

还有css

.float-button {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 30px;
  padding: 30px;
  font-size: 40px;
  background: $warning;
  position: fixed;
  bottom: 20px; /* Adjust to where you want it */
  right: 20px; /* Adjust to where you want it */
  z-index: 9999;
 }

 .float-button .height_fix {
   margin-top: 100%;
 }

 .float-button .content {
   position: absolute;
   left: 0;
   top: 50%;
   height: 100%;
   width: 100%;
   text-align: center;
   margin-top: -20px; /* Note, this must be half the font size */
   color: $light;
   }

可能有帮助

Answer 2

在您的 html 页面中添加以下样式，例如 your_page_name.scss

.float-button {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 30px;
  padding: 30px;
  font-size: 16px;
  background: #32db64;
  background-color: #32db64 !important;
  color: #ffffff !important;
  position: fixed;
  bottom: 20px; /* Adjust to where you want it */
  right: 20px; /* Adjust to where you want it */
  z-index: 9999;
}
.float-button .height_fix {
  margin-top: 100%;
}
.float-button.content {
  position: absolute;
  left: 0;
  top: 50%;
  height: 100%;
  width: 100%;
  text-align: center;
  margin-top: -20px; /* Note, this must be half the font size */
  color:light;
} 
 Add below lines of code in your html page after end of ion-content tag 
 and create a method/function name newContact() in your .ts file to 
 display message /do something when click on float button Add text 
 <!-- float-button part start here -->
 <div class="float-button">
  <span class="height-fix">
    <a ui-sref="add-trip" class="content" >
      <i class="ion-plus-round" (click)="newContact()">Add</i>
    </a>
  </span>
 </div>
 <!-- float-button end here -->
 i hope this help you.