javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 13:01:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(fab): fix styling on fab button and standalone

Browse Source
This commit is contained in:
Brandy Carney
2018-01-25 14:55:57 -05:00
parent 8549e7696c
commit aa7fcf1953
2 changed files with 113 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/core/src/components/fab-button/fab-button.scss
View File

@ -16,6 +16,8 @@
width: $fab-size; width: $fab-size;
height: $fab-size; height: $fab-size;
border: none;
font-size: 14px; font-size: 14px;
line-height: $fab-size; line-height: $fab-size;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -41,6 +43,19 @@
line-height: 1; line-height: 1;
} }
.button-inner {
display: flex;
flex-flow: row nowrap;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
// FAB Mini // FAB Mini
// -------------------------------------------------- // --------------------------------------------------

114
packages/core/src/components/fab/test/standalone/index.html
View File

@ -9,35 +9,117 @@
</head> </head>
<body> <body>
<ion-fab top right id="fab1"> <f></f>
<ion-fab-button onclick="toggleList('fab1')" mini><ion-icon name="add"></ion-icon></ion-fab-button> <f></f>
<ion-fab-button>FAB</ion-fab-button>
<ion-fab top right id="fab1" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
<ion-fab-list> <ion-fab-list>
<ion-fab-button onclick="toggleList('fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button> <ion-fab-button onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="toggleList('fab1')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button> <ion-fab-button onclick="openSocial('twitter', 'fab1')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="toggleList('fab1')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button> <ion-fab-button onclick="openSocial('vimeo', 'fab1')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="toggleList('fab1')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button> <ion-fab-button onclick="openSocial('googleplus', 'fab1')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list> </ion-fab-list>
</ion-fab> </ion-fab>
<ion-fab bottom left id="fab2"> <ion-fab bottom right id="fab2" slot="fixed">
<ion-fab-button onclick="toggleList('fab2')">More</ion-fab-button> <ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
<ion-fab-list side="right"> <ion-fab-list side="left">
<ion-fab-button onclick="toggleList('fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button> <ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="toggleList('fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button> <ion-fab-button onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="toggleList('fab2')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button> <ion-fab-button onclick="openSocial('vimeo', 'fab2')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="toggleList('fab2')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button> <ion-fab-button onclick="openSocial('googleplus', 'fab2')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list> </ion-fab-list>
</ion-fab> </ion-fab>
<ion-fab top left id="fab3" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
<ion-fab-list side="right">
<ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab3')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab3')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab bottom left id="fab4" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab4')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab4')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab4')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab center middle id="fab5" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab5')" class="e2eFabCenter"><ion-icon name="md-share"></ion-icon></ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button onclick="openSocial('vimeo', 'fab5')" color="primary"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="bottom">
<ion-fab-button onclick="openSocial('facebook', 'fab5')" color="secondary"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="left">
<ion-fab-button onclick="openSocial('googleplus', 'fab5')" color="light"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="right">
<ion-fab-button onclick="openSocial('twitter', 'fab5')" color="dark"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab right middle slot="fixed">
<ion-fab-button color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
</ion-fab>
<script> <script>
function toggleList(container) { function insertAfter(el, referenceNode) {
referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}
function add() {
var newEle = document.createElement('f');
var ref = document.querySelector('f');
insertAfter(newEle, ref);
console.log('add');
}
function clickMainFAB(container) {
let message = 'Clicked open social menu';
console.log(message);
openLists(container);
}
function openSocial(network, container) {
let message = 'Share in ' + network;
console.log(message);
openLists(container);
}
function openLists(container) {
var fabLists = document.getElementById(container).querySelectorAll('ion-fab-list'); var fabLists = document.getElementById(container).querySelectorAll('ion-fab-list');
for (var i = 0; i < fabLists.length; i++) { for (var i = 0; i < fabLists.length; i++) {
var activated = fabLists[i].activated; fabLists[i].activated = true;
fabLists[i].activated = activated ? false : true;
} }
} }
</script> </script>
<style>
f {
display: block;
margin: 15px auto;
max-width: 150px;
height: 150px;
background: blue;
}
f:last-of-type {
background: yellow;
}
</style>
</body> </body>
</html> </html>