mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
started pull to refresh
This commit is contained in:
17
dist/framework-with-theme.css
vendored
17
dist/framework-with-theme.css
vendored
@ -66,6 +66,18 @@ main > * {
|
|||||||
.show {
|
.show {
|
||||||
display: block; }
|
display: block; }
|
||||||
|
|
||||||
|
.ptr-capable {
|
||||||
|
-webkit-user-drag: element; }
|
||||||
|
|
||||||
|
.ptr-content {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: auto;
|
||||||
|
height: 0; }
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
@ -129,7 +141,7 @@ main > * {
|
|||||||
|
|
||||||
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
|
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
|
||||||
Note: For these to work, content must come after both bars in the markup */
|
Note: For these to work, content must come after both bars in the markup */
|
||||||
.bar-header ~ main {
|
.bar-header ~ main, .has-header {
|
||||||
top: 50px; }
|
top: 50px; }
|
||||||
|
|
||||||
.has-footer {
|
.has-footer {
|
||||||
@ -487,3 +499,6 @@ a.list-item {
|
|||||||
|
|
||||||
a.list-item {
|
a.list-item {
|
||||||
color: #333333; }
|
color: #333333; }
|
||||||
|
|
||||||
|
.ptr-content {
|
||||||
|
background: #eee; }
|
||||||
|
|||||||
@ -17,10 +17,15 @@
|
|||||||
<h1 class="title">Pull To Refresh</h1>
|
<h1 class="title">Pull To Refresh</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main class="ptr-capable">
|
||||||
|
<p>Pull the content down to refresh.</p>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<section class="ptr-content has-header">
|
||||||
|
<div class="pulling">KEEP GOING</div>
|
||||||
|
<div class="refreshing">REFRESHING!</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -9,12 +9,13 @@
|
|||||||
"framework/structure/alerts",
|
"framework/structure/alerts",
|
||||||
"framework/structure/base",
|
"framework/structure/base",
|
||||||
|
|
||||||
|
"framework/structure/pull-to-refresh",
|
||||||
|
|
||||||
"framework/structure/button",
|
"framework/structure/button",
|
||||||
|
|
||||||
"framework/structure/bar",
|
"framework/structure/bar",
|
||||||
"framework/structure/tabs",
|
"framework/structure/tabs",
|
||||||
|
|
||||||
|
|
||||||
"framework/structure/button-group",
|
"framework/structure/button-group",
|
||||||
|
|
||||||
"framework/structure/form",
|
"framework/structure/form",
|
||||||
|
|||||||
@ -10,4 +10,5 @@
|
|||||||
"framework/theme/default/button",
|
"framework/theme/default/button",
|
||||||
"framework/theme/default/icon",
|
"framework/theme/default/icon",
|
||||||
"framework/theme/default/listview",
|
"framework/theme/default/listview",
|
||||||
|
"framework/theme/default/pull-to-refresh",
|
||||||
"framework/theme/default/table";
|
"framework/theme/default/table";
|
||||||
|
|||||||
@ -75,7 +75,7 @@
|
|||||||
|
|
||||||
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
|
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
|
||||||
Note: For these to work, content must come after both bars in the markup */
|
Note: For these to work, content must come after both bars in the markup */
|
||||||
.bar-header ~ main {
|
.bar-header ~ main, .has-header {
|
||||||
top: $barHeight;
|
top: $barHeight;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
22
scss/framework/structure/_pull-to-refresh.scss
Normal file
22
scss/framework/structure/_pull-to-refresh.scss
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
|
||||||
|
.ptr-capable {
|
||||||
|
-webkit-user-drag: element;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptr-content {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: auto;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptr-content .pulling {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptr-content .refreshing {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
4
scss/framework/theme/default/_pull-to-refresh.scss
Normal file
4
scss/framework/theme/default/_pull-to-refresh.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
|
||||||
|
.ptr-content {
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user