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

FAB slot demo

Browse Source
This commit is contained in:
Shawn Taylor
2023-12-12 12:47:04 -05:00
parent 8f66acdffb
commit 4ba2b121a0
3 changed files with 69 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/content/content.scss
View File

@@ -238,11 +238,11 @@
transform: scaleX(-1);
}
// Content: Fixed
// --------------------------------------------------
::slotted([slot="fixed"]) {
::slotted([slot="fixed"]),
::slotted([slot="new"]) {
position: absolute;
/**

3
core/src/components/content/content.tsx
View File

@@ -446,6 +446,9 @@ export class Content implements ComponentInterface {
}}
>
<div ref={(el) => (this.backgroundContentEl = el)} id="background-content" part="background"></div>
<slot name="new"></slot>
<TagType
class={{
'inner-scroll': true,

186
core/src/components/fab/test/basic/index.html
View File

@@ -22,127 +22,72 @@
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding" id="content" fullscreen>
<f></f>
<f></f>
<ion-button>Test</ion-button>
<ion-fab-button disabled href="#path" onclick="throw 'no clickable'">FAB</ion-fab-button>
<ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
<ion-fab-button size="small" class="e2eFabTopRight">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
<ion-fab-list>
<ion-fab-button>
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-content class="ion-padding">
<ion-fab slot="fixed" vertical="top" horizontal="start">
<ion-fab-button> "fixed"<br />slot </ion-fab-button>
</ion-fab>
<ion-fab vertical="bottom" horizontal="start" edge id="fab2" slot="fixed">
<ion-fab-button color="dark" class="e2eFabBottomRight" disabled>
<ion-icon name="arrow-up-circle"></ion-icon>
</ion-fab-button>
<ion-fab-list side="start">
<ion-fab-button>
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab slot="new" vertical="bottom" horizontal="end">
<ion-fab-button> new<br />slot </ion-fab-button>
</ion-fab>
<ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
<ion-fab-button color="secondary" class="e2eFabTopLeft">
<ion-icon name="arrow-forward-circle"></ion-icon>
</ion-fab-button>
<ion-fab-list side="end">
<ion-fab-button>
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-list>
<ion-item button>List</ion-item>
<ion-item button>List</ion-item>
<ion-item button>List</ion-item>
</ion-list>
<ion-fab vertical="center" horizontal="center" id="fab5" slot="fixed">
<ion-fab-button class="e2eFabCenter">
<ion-icon name="share"></ion-icon>
</ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button color="primary">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button color="light">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="bottom">
<ion-fab-button color="secondary">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button color="dark">
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button color="light">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
<ion-fab-button color="primary">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end">
<ion-fab-button color="dark">
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button color="secondary">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-button id="fixed-button-new" slot="new">Fixed Button in new slot</ion-button>
<ion-fab horizontal="end" vertical="bottom" slot="fixed">
<ion-fab-button color="danger" onclick="add()">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-button id="fixed-button-fixed" slot="fixed">Fixed Button in "fixed" slot</ion-button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia
mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere
pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut,
aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut,
pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida
malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
</p>
<p>
Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
Etiam lobortis tristique maximus.
</p>
<p>
Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
molestie sed, pretium vitae turpis.
</p>
<p>
Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan
condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt
libero finibus at. Mauris condimentum fermentum rutrum.
</p>
<p>
Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse
enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin
justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur
libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum,
vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam
neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
</p>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button onclick="closeLists()">Close</ion-button>
</ion-buttons>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
<script>
function insertAfter(el, referenceNode) {
referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
@@ -164,16 +109,13 @@
</script>
<style>
f {
display: block;
margin: 15px auto;
max-width: 150px;
height: 150px;
background: blue;
#fixed-button-new {
right: 0px;
top: 50%;
}
f:last-of-type {
background: yellow;
#fixed-button-fixed {
bottom: 0px;
left: 50%;
}
</style>
</ion-app>