mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
fix(fab): fix styling on fab button and standalone
This commit is contained in:
Brandy Carney
@ -16,6 +16,8 @@
|
||||
width: $fab-size;
|
||||
height: $fab-size;
|
||||
|
||||
border: none;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: $fab-size;
|
||||
text-overflow: ellipsis;
|
||||
@ -41,6 +43,19 @@
|
||||
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
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@ -9,35 +9,117 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-fab top right id="fab1">
|
||||
<ion-fab-button onclick="toggleList('fab1')" mini><ion-icon name="add"></ion-icon></ion-fab-button>
|
||||
<f></f>
|
||||
<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-button onclick="toggleList('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="toggleList('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('facebook', 'fab1')"><ion-icon name="logo-facebook"></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="openSocial('vimeo', 'fab1')"><ion-icon name="logo-vimeo"></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>
|
||||
|
||||
<ion-fab bottom left id="fab2">
|
||||
<ion-fab-button onclick="toggleList('fab2')">More</ion-fab-button>
|
||||
<ion-fab-list side="right">
|
||||
<ion-fab-button onclick="toggleList('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="toggleList('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 bottom right id="fab2" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="left">
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></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="openSocial('vimeo', 'fab2')"><ion-icon name="logo-vimeo"></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>
|
||||
|
||||
<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>
|
||||
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');
|
||||
|
||||
for (var i = 0; i < fabLists.length; i++) {
|
||||
var activated = fabLists[i].activated;
|
||||
fabLists[i].activated = activated ? false : true;
|
||||
fabLists[i].activated = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
f {
|
||||
display: block;
|
||||
margin: 15px auto;
|
||||
max-width: 150px;
|
||||
height: 150px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
f:last-of-type {
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user