CODEWITHSUNDEEP
cssangularjsionic-framework
Ussr11221122
Ussr11221122

Reputation: 43

Create float action button in ionic

I'm trying to build a action float button using ionic framework. I'm able to build a button but want to create some styles like effects and more buttons should prompt up. I know this can be easily done using ionic-material but i don't want to use that and this can be done using AngularJS, Ionic and CSS only.

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;
}

Upvotes: 1

Views: 9954

Answers (2)

mkumar0304
mkumar0304

Reputation: 697

Add below style in your html page like 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.

Upvotes: 0

Sam
Sam

Reputation: 149

Try this

  <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>

And 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;
   }

May be it helps

Upvotes: 3

Related Questions