Skip to content

Commit 4a982f7

Browse files
brandyscarneycamwiegert
brandyscarney
authored and
camwiegert
committed
docs(demos): adds infinite scroll demo and updates input demo (ionic-team#602)
closes ionic-team#463
1 parent 24812d7 commit 4a982f7

18 files changed

Lines changed: 293 additions & 67 deletions

File tree

‎src/demos/api/action-sheet/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<ion-title>Action Sheet</ion-title>
2121
</ion-toolbar>
2222
</ion-header>
23-
<ion-content fullscreen padding>
23+
<ion-content fullscreen class="ion-padding">
2424
<ion-action-sheet-controller></ion-action-sheet-controller>
2525
<ion-button expand="block">Show Action Sheet</ion-button>
2626
</ion-content>

‎src/demos/api/alert/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<ion-title>Alert</ion-title>
2121
</ion-toolbar>
2222
</ion-header>,
23-
<ion-content fullscreen padding>
23+
<ion-content fullscreen class="ion-padding">
2424
<ion-alert-controller></ion-alert-controller>
2525
<ion-button expand="block">Show Alert</ion-button>
2626
</ion-content>

‎src/demos/api/anchor/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
</ion-toolbar>
2424
</ion-header>
2525

26-
<ion-content fullscreen padding>
26+
<ion-content fullscreen class="ion-padding">
2727
<ion-list-header>Colors</ion-list-header>
2828
<ion-grid>
2929
<ion-row>

‎src/demos/api/back-button/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
<ion-title>Page Two</ion-title>
5757
</ion-toolbar>
5858
</ion-header>
59-
<ion-content fullscreen padding>
59+
<ion-content fullscreen class="ion-padding">
6060
<p>Back-Button is displayed when there is history</p>
6161
</ion-content>
6262
`;

‎src/demos/api/fab/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</ion-toolbar>
2222
</ion-header>
2323

24-
<ion-content fullscreen padding>
24+
<ion-content fullscreen class="ion-padding">
2525
<ion-fab horizontal="end" vertical="top" slot="fixed" edge>
2626
<ion-fab-button>
2727
<ion-icon name="add"></ion-icon>

‎src/demos/api/icon/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
</ion-toolbar>
2525
</ion-header>
2626

27-
<ion-content fullscreen padding>
27+
<ion-content fullscreen class="ion-padding">
2828
<ion-list>
2929
<ion-item>
3030
<ion-icon name="home" id="dynamicColor" slot="start"></ion-icon>

‎src/demos/api/infinite-scroll/data.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
const users =
2+
[{
3+
"name": "Aline Grover",
4+
"created": "November 28, 2012"
5+
}, {
6+
"name": "Nevada Anders",
7+
"created": "January 18, 2014"
8+
}, {
9+
"name": "Nicholas Morissette",
10+
"created": "November 11, 2014"
11+
}, {
12+
"name": "Rusty Umland",
13+
"created": "January 8, 2019"
14+
}, {
15+
"name": "Amada Cerulli",
16+
"created": "July 22, 2009"
17+
}, {
18+
"name": "Harriette Garcia",
19+
"created": "July 29, 2018"
20+
}, {
21+
"name": "Erminia Marotz",
22+
"created": "September 29, 2016"
23+
}, {
24+
"name": "Shanelle Parodi",
25+
"created": "May 26, 2018"
26+
}, {
27+
"name": "Roger Leite",
28+
"created": "August 6, 2015"
29+
}, {
30+
"name": "Latina Faulcon",
31+
"created": "February 5, 2014"
32+
}, {
33+
"name": "Jerrie Hoekstra",
34+
"created": "June 2, 2016"
35+
}, {
36+
"name": "Domonique Byam",
37+
"created": "December 30, 2010"
38+
}, {
39+
"name": "Monnie Bonar",
40+
"created": "December 20, 2018"
41+
}, {
42+
"name": "Chu Kahle",
43+
"created": "November 17, 2017"
44+
}, {
45+
"name": "Allan Passman",
46+
"created": "November 12, 2015"
47+
}, {
48+
"name": "Conrad Caliendo",
49+
"created": "February 10, 2016"
50+
}, {
51+
"name": "Elma Chenier",
52+
"created": "August 13, 2011"
53+
}, {
54+
"name": "Wendi Hirano",
55+
"created": "July 27, 2018"
56+
}, {
57+
"name": "Loren Wordlaw",
58+
"created": "December 20, 2014"
59+
}, {
60+
"name": "Hubert Frum",
61+
"created": "January 21, 2013"
62+
}, {
63+
"name": "Rueben Basil",
64+
"created": "December 2, 2013"
65+
}, {
66+
"name": "Krystyna Hardiman",
67+
"created": "February 11, 2016"
68+
}, {
69+
"name": "Micki Murch",
70+
"created": "December 17, 2009"
71+
}, {
72+
"name": "Allene Knight",
73+
"created": "November 3, 2010"
74+
}, {
75+
"name": "Davis Lunsford",
76+
"created": "October 17, 2011"
77+
}, {
78+
"name": "Elin Conte",
79+
"created": "June 23, 2015"
80+
}, {
81+
"name": "Yasuko Hites",
82+
"created": "August 25, 2017"
83+
}, {
84+
"name": "Gerri Pinon",
85+
"created": "May 21, 2014"
86+
}, {
87+
"name": "Caryl Hawker",
88+
"created": "April 13, 2018"
89+
}, {
90+
"name": "Savannah Hoard",
91+
"created": "October 31, 2009"
92+
}, {
93+
"name": "Carolyn Knutsen",
94+
"created": "July 16, 2015"
95+
}, {
96+
"name": "Shantay Mckissack",
97+
"created": "July 9, 2010"
98+
}, {
99+
"name": "Vertie Pinales",
100+
"created": "November 20, 2010"
101+
}, {
102+
"name": "Gidget Stuck",
103+
"created": "August 17, 2017"
104+
}, {
105+
"name": "Drew Crownover",
106+
"created": "August 30, 2017"
107+
}, {
108+
"name": "Vashti Krajewski",
109+
"created": "January 25, 2018"
110+
}, {
111+
"name": "Candice Dike",
112+
"created": "November 19, 2018"
113+
}, {
114+
"name": "Dorthey Buhler",
115+
"created": "October 22, 2012"
116+
}, {
117+
"name": "Hailey Deluna",
118+
"created": "September 13, 2012"
119+
}, {
120+
"name": "Richard Aaron",
121+
"created": "April 27, 2016"
122+
}];

‎src/demos/api/infinite-scroll/index.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Infinite Scroll</title>
8+
<link rel="stylesheet" href="/docs/assets/ionic/css/ionic.bundle.css" />
9+
<script src="/docs/assets/ionic/dist/ionic.js"></script>
10+
<style>
11+
:root {
12+
--ion-safe-area-top: 20px;
13+
--ion-safe-area-bottom: 22px;
14+
}
15+
16+
</style>
17+
</head>
18+
19+
<body>
20+
<ion-app>
21+
<ion-header translucent>
22+
<ion-toolbar>
23+
<ion-title>Accounts</ion-title>
24+
</ion-toolbar>
25+
</ion-header>
26+
27+
<ion-content fullscreen>
28+
<ion-list id="list"></ion-list>
29+
30+
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
31+
<ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more data...">
32+
</ion-infinite-scroll-content>
33+
</ion-infinite-scroll>
34+
</ion-content>
35+
</ion-app>
36+
37+
<script type="text/javascript" src="data.js"></script>
38+
39+
<script>
40+
let length = 0;
41+
const list = document.getElementById('list');
42+
const infiniteScroll = document.getElementById('infinite-scroll');
43+
44+
infiniteScroll.addEventListener('ionInfinite', async function () {
45+
if (length < users.length) {
46+
console.log('Loading data...');
47+
await wait(500);
48+
infiniteScroll.complete();
49+
appendItems(10);
50+
console.log('Done');
51+
} else {
52+
console.log('No More Data');
53+
infiniteScroll.disabled = true;
54+
}
55+
});
56+
57+
function appendItems(number) {
58+
console.log('length is', length);
59+
const originalLength = length;
60+
for (var i = 0; i < number; i++) {
61+
const el = document.createElement('ion-item');
62+
el.innerHTML = `
63+
<ion-avatar slot="start">
64+
<img src="https://www.gravatar.com/avatar/${i + originalLength}?d=monsterid&f=y">
65+
</ion-avatar>
66+
<ion-label>
67+
<h2>${users[i + originalLength].name}</h2>
68+
<p>Created ${users[i + originalLength].created}</p>
69+
</ion-label>
70+
`;
71+
list.appendChild(el);
72+
length++;
73+
}
74+
}
75+
76+
function wait(time) {
77+
return new Promise(resolve => {
78+
setTimeout(() => {
79+
resolve();
80+
}, time);
81+
});
82+
}
83+
84+
appendItems(20);
85+
</script>
86+
</body>
87+
88+
</html>

‎src/demos/api/input/index.html‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,40 @@
1717
<ion-app>
1818
<ion-header translucent>
1919
<ion-toolbar>
20-
<ion-title>Input</ion-title>
20+
<ion-title>Create Account</ion-title>
2121
</ion-toolbar>
2222
</ion-header>
2323

24-
<ion-content fullscreen padding>
24+
<ion-content fullscreen>
2525
<form onsubmit="processForm(event)">
26-
<ion-list>
26+
<ion-list lines="full" class="ion-no-margin ion-no-padding">
2727
<ion-item>
28-
<ion-input required type="text" placeholder="First Name" oninput="handleFirstNameValue(event)"></ion-input>
28+
<ion-label position="stacked">First Name <ion-text color="danger">*</ion-text></ion-label>
29+
<ion-input required type="text" oninput="handleFirstNameValue(event)"></ion-input>
2930
</ion-item>
3031

3132
<ion-item>
32-
<ion-input required type="text" placeholder="Last Name" oninput="handleLastNameValue(event)"></ion-input>
33+
<ion-label position="stacked">Last Name <ion-text color="danger">*</ion-text></ion-label>
34+
<ion-input required type="text" oninput="handleLastNameValue(event)"></ion-input>
35+
</ion-item>
36+
37+
<ion-item>
38+
<ion-label position="stacked">Address</ion-label>
39+
<ion-input placeholder="Address Line 1"></ion-input>
40+
<ion-input placeholder="Address Line 2"></ion-input>
41+
<ion-input placeholder="City"></ion-input>
42+
<ion-input placeholder="State"></ion-input>
43+
<ion-input placeholder="Zip Code"></ion-input>
44+
</ion-item>
45+
46+
<ion-item>
47+
<ion-label position="stacked">Notes</ion-label>
48+
<ion-textarea></ion-textarea>
3349
</ion-item>
3450
</ion-list>
3551

36-
<div>
37-
<ion-button expand="block" type="submit">Create Account</ion-button>
52+
<div class="ion-padding">
53+
<ion-button expand="block" type="submit" class="ion-no-margin">Create account</ion-button>
3854
</div>
3955
</form>
4056
</ion-content>
@@ -49,7 +65,7 @@
4965
event.preventDefault();
5066
controller.create({
5167
header: 'Account Created',
52-
message: `Created account for: ${firstName} ${lastName}`,
68+
message: `Created account for: <b>${firstName} ${lastName}</b>`,
5369
buttons: [{
5470
text: 'OK'
5571
}]

0 commit comments

Comments
 (0)