-
-
Save tonyeung/84f8c4147a9ad0cd1c66 to your computer and use it in GitHub Desktop.
funky speed dial ness
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| my markup | |
| <md-fab-speed-dial class="md-fling" md-open="false"> | |
| <md-fab-trigger> | |
| <md-button class="md-fab md-ward md-mini" aria-label="settings"> | |
| <md-icon md-font-library="material-icons">more_vert</md-icon> | |
| </md-button> | |
| </md-fab-trigger> | |
| <md-fab-actions> | |
| <md-button aria-label="Accounts" class="md-fab md-raised md-mini"> | |
| <md-icon md-font-library="material-icons" class="md-dark">person</md-icon> | |
| </md-button> | |
| <md-button aria-label="Claims" class="md-fab md-raised md-mini"> | |
| <md-icon md-font-library="material-icons" class="md-dark">lock_outline</md-icon> | |
| </md-button> | |
| </md-fab-actions> | |
| </md-fab-speed-dial> | |
| initial load | |
| <md-fab-speed-dial class="md-fling ng-isolate-scope md-animations-ready md-down" md-open="false"><div class="md-css-variables"></div> | |
| <md-fab-trigger aria-haspopup="true" aria-expanded="false"> | |
| <button class="md-fab md-ward md-mini md-button md-ink-ripple" type="button" ng-transclude="" aria-label="settings"> | |
| <md-icon md-font-library="material-icons" class="ng-scope ng-isolate-scope material-icons">more_vert</md-icon> | |
| </button> | |
| </md-fab-trigger> | |
| <md-fab-actions aria-hidden="true"> | |
| <div class="md-fab-action-item"><button class="md-fab md-raised md-mini md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Accounts"> | |
| <md-icon md-font-library="material-icons" class="md-dark ng-scope ng-isolate-scope material-icons">person</md-icon> | |
| </button></div> | |
| <div class="md-fab-action-item"><button class="md-fab md-raised md-mini md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Claims"> | |
| <md-icon md-font-library="material-icons" class="md-dark ng-scope ng-isolate-scope material-icons">lock_outline</md-icon> | |
| </button></div> | |
| </md-fab-actions> | |
| </md-fab-speed-dial> | |
| clicked once (still open) | |
| <md-fab-speed-dial class="md-fling ng-isolate-scope md-animations-ready md-down md-is-open" md-open="false"><div class="md-css-variables"></div> | |
| <md-fab-trigger aria-haspopup="true" aria-expanded="true" style="z-index: 23;"> | |
| <button class="md-fab md-ward md-mini md-button md-ink-ripple" type="button" ng-transclude="" aria-label="settings"> | |
| <md-icon md-font-library="material-icons" class="ng-scope ng-isolate-scope material-icons">more_vert</md-icon> | |
| <div class="md-ripple-container"></div> | |
| </button> | |
| </md-fab-trigger> | |
| <md-fab-actions aria-hidden="false"> | |
| <div class="md-fab-action-item" style="opacity: 1; z-index: 22;"><button class="md-fab md-raised md-mini md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Accounts"> | |
| <md-icon md-font-library="material-icons" class="md-dark ng-scope ng-isolate-scope material-icons">person</md-icon> | |
| </button></div> | |
| <div class="md-fab-action-item" style="opacity: 1; z-index: 21;"><button class="md-fab md-raised md-mini md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Claims"> | |
| <md-icon md-font-library="material-icons" class="md-dark ng-scope ng-isolate-scope material-icons">lock_outline</md-icon> | |
| </button></div> | |
| </md-fab-actions> | |
| </md-fab-speed-dial> | |
| click twice (close) | |
| <md-fab-speed-dial class="md-fling ng-isolate-scope md-animations-ready md-down" md-open="false"><div class="md-css-variables"></div> | |
| <md-fab-trigger aria-haspopup="true" aria-expanded="false" style="z-index: 23;"> | |
| <button class="md-fab md-ward md-mini md-button md-ink-ripple" type="button" ng-transclude="" aria-label="settings"> | |
| <md-icon md-font-library="material-icons" class="ng-scope ng-isolate-scope material-icons">more_vert</md-icon> | |
| <div class="md-ripple-container"></div></button> | |
| </md-fab-trigger> | |
| <md-fab-actions aria-hidden="true"> | |
| <div class="md-fab-action-item" style="opacity: 1; z-index: 22; transform: translateY(-52px);"><button class="md-fab md-raised md-mini md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Accounts"> | |
| <md-icon md-font-library="material-icons" class="md-dark ng-scope ng-isolate-scope material-icons">person</md-icon> | |
| </button></div> | |
| <div class="md-fab-action-item" style="opacity: 1; z-index: 21; transform: translateY(-104px);"><button class="md-fab md-raised md-mini md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Claims"> | |
| <md-icon md-font-library="material-icons" class="md-dark ng-scope ng-isolate-scope material-icons">lock_outline</md-icon> | |
| </button></div> | |
| </md-fab-actions> | |
| </md-fab-speed-dial> | |
| demo's initial load | |
| <md-fab-speed-dial md-open="demo.isOpen" md-direction="up" ng-class="demo.selectedMode" class="ng-isolate-scope md-fling md-up md-animations-ready"> | |
| <div class="md-css-variables"></div> | |
| <md-fab-trigger aria-haspopup="true" aria-expanded="false" style="z-index: 24;"> | |
| <button class="md-fab md-warn md-button md-ink-ripple" type="button" ng-transclude="" aria-label="menu"> | |
| <md-icon md-svg-src="img/icons/menu.svg" class="ng-scope ng-isolate-scope" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 18 18" fit="" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block;"> | |
| <path d="M0 0h18v18h-18z" fill="none"></path> | |
| <path d="M2 13.5h14v-1.5h-14v1.5zm0-4h14v-1.5h-14v1.5zm0-5.5v1.5h14v-1.5h-14z"></path> | |
| </svg></md-icon> | |
| </button> | |
| </md-fab-trigger> | |
| <md-fab-actions aria-hidden="true"> | |
| <div class="md-fab-action-item" style="opacity: 1; z-index: 23; transform: translateY(60px);"><button class="md-fab md-raised md-mini md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Twitter"> | |
| <md-icon md-svg-src="img/icons/twitter.svg" aria-label="Twitter" class="ng-scope ng-isolate-scope" aria-hidden="true"><svg version="1.1" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block;"><g><g><g><path fill="#7d7d7d" d="M40,4H8C5.8,4,4,5.8,4,8l0,32c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V8C44,5.8,42.2,4,40,4z M35.4,18.7c-0.1,9.2-6,15.6-14.8,16c-3.6,0.2-6.3-1-8.6-2.5c2.7,0.4,6-0.6,7.8-2.2c-2.6-0.3-4.2-1.6-4.9-3.8c0.8,0.1,1.6,0.1,2.3-0.1 | |
| c-2.4-0.8-4.1-2.3-4.2-5.3c0.7,0.3,1.4,0.6,2.3,0.6c-1.8-1-3.1-4.7-1.6-7.2c2.6,2.9,5.8,5.3,11,5.6c-1.3-5.6,6.1-8.6,9.2-4.9c1.3-0.3,2.4-0.8,3.4-1.3c-0.4,1.3-1.2,2.2-2.2,2.9c1.1-0.1,2.1-0.4,2.9-0.8C37.5,16.9,36.4,17.9,35.4,18.7z"></path></g><g><rect fill="none" width="48" height="48"></rect></g></g></g></svg></md-icon> | |
| </button></div> | |
| <div class="md-fab-action-item" style="opacity: 1; z-index: 22; transform: translateY(112px);"><button class="md-fab md-raised md-mini md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Facebook"> | |
| <md-icon md-svg-src="img/icons/facebook.svg" aria-label="Facebook" class="ng-scope ng-isolate-scope" aria-hidden="true"><svg version="1.1" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block;"><g><g><g><path fill="#7d7d7d" d="M40,4H8C5.8,4,4,5.8,4,8l0,32c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V8C44,5.8,42.2,4,40,4z M38,8v6h-4c-1.1,0-2,0.9-2,2v4h6v6h-6v14h-6V26h-4v-6h4v-5c0-3.9,3.1-7,7-7H38z"></path></g><g><rect fill="none" width="48" height="48"></rect></g></g></g></svg></md-icon> | |
| </button></div> | |
| <div class="md-fab-action-item" style="opacity: 1; z-index: 21; transform: translateY(164px);"><button class="md-fab md-raised md-mini md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Google Hangout"> | |
| <md-icon md-svg-src="img/icons/hangout.svg" aria-label="Google Hangout" class="ng-scope ng-isolate-scope" aria-hidden="true"><svg version="1.1" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block;"><g><g><path fill="#159F5C" d="M23,4C13.6,4,6,11.6,6,21s7.6,17,17,17h1v7c9.7-4.7,16-15,16-24C40,11.6,32.4,4,23,4z M22,22l-2,4h-3l2-4h-3v-6h6V22zM30,22l-2,4h-3l2-4h-3v-6h6V22z"></path><rect x="0" fill="none" width="48" height="48"></rect></g></g></svg></md-icon> | |
| </button></div> | |
| </md-fab-actions> | |
| </md-fab-speed-dial> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment