mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
3 Commits
ionic-modu
...
st/5454-fa
| Author | SHA1 | Date | |
|---|---|---|---|
|
99a305b864 | ||
|
|
2db10c055a | ||
|
|
4ba2b121a0 |
2
core/src/components.d.ts
vendored
2
core/src/components.d.ts
vendored
@@ -768,6 +768,7 @@ export namespace Components {
|
||||
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
|
||||
*/
|
||||
"color"?: Color;
|
||||
"fixedSlotPlacement": 'afterContent' | 'beforeContent';
|
||||
/**
|
||||
* If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
|
||||
*/
|
||||
@@ -5475,6 +5476,7 @@ declare namespace LocalJSX {
|
||||
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
|
||||
*/
|
||||
"color"?: Color;
|
||||
"fixedSlotPlacement"?: 'afterContent' | 'beforeContent';
|
||||
/**
|
||||
* If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
|
||||
*/
|
||||
|
||||
@@ -238,7 +238,6 @@
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
|
||||
// Content: Fixed
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@@ -75,6 +75,8 @@ export class Content implements ComponentInterface {
|
||||
*/
|
||||
@Prop() fullscreen = false;
|
||||
|
||||
@Prop() fixedSlotPlacement: 'afterContent' | 'beforeContent' = 'afterContent';
|
||||
|
||||
/**
|
||||
* If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.
|
||||
* If the content exceeds the bounds of ionContent, nothing will change.
|
||||
@@ -423,7 +425,7 @@ export class Content implements ComponentInterface {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isMainContent, scrollX, scrollY, el } = this;
|
||||
const { fixedSlotPlacement, isMainContent, scrollX, scrollY, el } = this;
|
||||
const rtl = isRTL(el) ? 'rtl' : 'ltr';
|
||||
const mode = getIonMode(this);
|
||||
const forceOverscroll = this.shouldForceOverscroll();
|
||||
@@ -446,6 +448,9 @@ export class Content implements ComponentInterface {
|
||||
}}
|
||||
>
|
||||
<div ref={(el) => (this.backgroundContentEl = el)} id="background-content" part="background"></div>
|
||||
|
||||
{fixedSlotPlacement === 'beforeContent' ? <slot name="fixed"></slot> : null}
|
||||
|
||||
<TagType
|
||||
class={{
|
||||
'inner-scroll': true,
|
||||
@@ -467,7 +472,7 @@ export class Content implements ComponentInterface {
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<slot name="fixed"></slot>
|
||||
{fixedSlotPlacement !== 'beforeContent' ? <slot name="fixed"></slot> : null}
|
||||
</Host>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -22,127 +22,66 @@
|
||||
</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" fixed-slot-placement="beforeContent">
|
||||
<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>
|
||||
<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="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-button id="fixed-button" slot="fixed">Fixed Button</ion-button>
|
||||
|
||||
<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-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>
|
||||
<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 +103,9 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
f {
|
||||
display: block;
|
||||
margin: 15px auto;
|
||||
max-width: 150px;
|
||||
height: 150px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
f:last-of-type {
|
||||
background: yellow;
|
||||
#fixed-button {
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
}
|
||||
</style>
|
||||
</ion-app>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-content fixed-slot-placement="beforeContent">
|
||||
<ion-refresher id="refresher" slot="fixed">
|
||||
<ion-refresher-content
|
||||
pulling-icon="arrow-down-outline"
|
||||
|
||||
Reference in New Issue
Block a user