BVB Source Codes

ionic Show root-page.html Source code

Return Download ionic: download root-page.html Source code - Download ionic Source code - Type:.html
  1. <ion-header>
  2.   <ion-toolbar>
  3.     <ion-title>Floating Action Buttons</ion-title>
  4.   </ion-toolbar>
  5. </ion-header>
  6.  
  7. <ion-content padding fullscreen>
  8.   <div f></div>
  9.   <div f></div>
  10.  
  11.   <pre ion-fixed style="right:10px; bottom:20px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.24);">{{log}}</pre>
  12.   <button ion-button>Test</button>
  13.   <div f *ngFor="let a of array"></div>
  14.  
  15.   <ion-fab top right edge #fab1>
  16.     <button ion-fab mini (click)="clickMainFAB()" class="e2eFabTopRight"><ion-icon name="add"></ion-icon></button>
  17.     <ion-fab-list>
  18.       <button ion-fab (click)="openSocial('facebook', fab1)"><ion-icon name="logo-facebook"></ion-icon></button>
  19.       <button ion-fab (click)="openSocial('twitter', fab1)"><ion-icon name="logo-twitter"></ion-icon></button>
  20.       <button ion-fab (click)="openSocial('vimeo', fab1)"><ion-icon name="logo-vimeo"></ion-icon></button>
  21.       <button ion-fab (click)="openSocial('googleplus', fab1)"><ion-icon name="logo-googleplus"></ion-icon></button>
  22.     </ion-fab-list>
  23.   </ion-fab>
  24.  
  25.   <ion-fab bottom right edge #fab2>
  26.     <button ion-fab color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></button>
  27.     <ion-fab-list side="left">
  28.       <button ion-fab (click)="openSocial('facebook', fab2)"><ion-icon name="logo-facebook"></ion-icon></button>
  29.       <button ion-fab (click)="openSocial('twitter', fab2)"><ion-icon name="logo-twitter"></ion-icon></button>
  30.       <button ion-fab (click)="openSocial('vimeo', fab2)"><ion-icon name="logo-vimeo"></ion-icon></button>
  31.       <button ion-fab (click)="openSocial('googleplus', fab2)"><ion-icon name="logo-googleplus"></ion-icon></button>
  32.     </ion-fab-list>
  33.   </ion-fab>
  34.  
  35.   <ion-fab top left #fab3>
  36.     <button ion-fab color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></button>
  37.     <ion-fab-list side="right">
  38.       <button ion-fab (click)="openSocial('facebook', fab3)"><ion-icon name="logo-facebook"></ion-icon></button>
  39.       <button ion-fab (click)="openSocial('twitter', fab3)"><ion-icon name="logo-twitter"></ion-icon></button>
  40.       <button ion-fab (click)="openSocial('vimeo', fab3)"><ion-icon name="logo-vimeo"></ion-icon></button>
  41.       <button ion-fab (click)="openSocial('googleplus', fab3)"><ion-icon name="logo-googleplus"></ion-icon></button>
  42.     </ion-fab-list>
  43.   </ion-fab>
  44.  
  45.   <ion-fab bottom left #fab4>
  46.     <button ion-fab color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></button>
  47.     <ion-fab-list side="top">
  48.       <button ion-fab (click)="openSocial('facebook', fab4)"><ion-icon name="logo-facebook"></ion-icon></button>
  49.       <button ion-fab (click)="openSocial('twitter', fab4)"><ion-icon name="logo-twitter"></ion-icon></button>
  50.       <button ion-fab (click)="openSocial('vimeo', fab4)"><ion-icon name="logo-vimeo"></ion-icon></button>
  51.       <button ion-fab (click)="openSocial('googleplus', fab4)"><ion-icon name="logo-googleplus"></ion-icon></button>
  52.     </ion-fab-list>
  53.   </ion-fab>
  54.  
  55.   <ion-fab center middle #fab5>
  56.     <a ion-fab color="danger" (click)="clickMainFAB()" class="e2eFabCenter"><ion-icon name="md-share"></ion-icon></a>
  57.     <ion-fab-list side="top">
  58.       <button ion-fab (click)="openSocial('vimeo', fab5)" color="primary"><ion-icon name="logo-vimeo"></ion-icon></button>
  59.     </ion-fab-list>
  60.     <ion-fab-list side="bottom">
  61.       <button ion-fab (click)="openSocial('facebook', fab5)" color="secondary"><ion-icon name="logo-facebook"></ion-icon></button>
  62.     </ion-fab-list>
  63.     <ion-fab-list side="left">
  64.       <button ion-fab (click)="openSocial('googleplus', fab5)" color="light"><ion-icon name="logo-googleplus"></ion-icon></button>
  65.     </ion-fab-list>
  66.     <ion-fab-list side="right">
  67.       <button ion-fab (click)="openSocial('twitter', fab5)" color="dark"><ion-icon name="logo-twitter"></ion-icon></button>
  68.     </ion-fab-list>
  69.   </ion-fab>
  70.  
  71.   <ion-fab right middle>
  72.     <a ion-fab color="danger" (click)="add()"><ion-icon name="add"></ion-icon></a>
  73.   </ion-fab>
  74.  
  75. </ion-content>
  76.  
  77. <ion-footer>
  78.   <ion-toolbar>
  79.     <ion-title>Footer</ion-title>
  80.   </ion-toolbar>
  81. </ion-footer>
  82.  
downloadroot-page.html Source code - Download ionic Source code
Related Source Codes/Software:
requests - Python HTTP Requests for Humans  ... 2017-06-06
vue2-elm - Based on vue2 + vuex to build a large single-page ... 2017-06-05
localstack - A fully functional local AWS cloud stack. Develop ... 2017-06-05
mithril.js - A Javascript Framework for Building Brilliant Appl... 2017-06-05
moby - Moby Project - a collaborative project for the con... 2017-06-06
coding-interview-university - A complete computer science study plan to become a... 2017-06-06
nylas-mail - 2017-06-06
developer-roadmap - Roadmap to becoming a web developer in 2017 2017-06-06
design-patterns-for-humans - Design Patterns for Humans - An ultra-simplified e... 2017-06-06
CRYENGINE - CRYENGINE is a powerful real-time game development... 2017-06-11
postal - 2017-06-11
reactide - Reactide is the first dedicated IDE for React web ... 2017-06-11
rkt - rkt is a pod-native container engine for Linux. It... 2017-06-11
uWebSockets - Tiny WebSockets https://for... 2017-06-11
realworld - TodoMVC for the RealWorld - Exemplary fullstack Me... 2017-06-11
goreplay - GoReplay is an open-source tool for capturing and ... 2017-06-10
pyenv - Simple Python version management 2017-06-10
redux-saga - An alternative side effect model for Redux apps ... 2017-06-10
angular-starter - 2017-06-10

 Back to top