Skip to content

Commit 8298d90

Browse files
brandyscarneycamwiegert
brandyscarney
authored and
camwiegert
committed
docs(demos): update skeleton text to latest usage (ionic-team#505)
1 parent df02e1b commit 8298d90

3 files changed

Lines changed: 30 additions & 60 deletions

File tree

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"watch-pages": "ts-node -P scripts/tsconfig.json scripts/watch-pages"
1919
},
2020
"dependencies": {
21-
"@ionic/core": "4.0.2",
21+
"@ionic/core": "4.1.0-dev.201902272232.d66b12b",
2222
"@ionic/docs": "^4.0.2",
2323
"@stencil/core": "^0.18.0",
2424
"@stencil/router": "^0.3.3",

‎src/demos/api/skeleton-text/index.html‎

Lines changed: 26 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</style>
1717
</head>
1818

19-
<body onLoad="onLoad()">
19+
<body>
2020
<ion-app>
2121
<ion-header translucent>
2222
<ion-toolbar>
@@ -114,21 +114,21 @@ <h3>Primal Heart</h3>
114114
</ion-list>
115115
<ion-list id="skeleton">
116116
<ion-list-header>
117-
<ion-skeleton-text width="80px"></ion-skeleton-text>
117+
<ion-skeleton-text animated style="width: 80px"></ion-skeleton-text>
118118
</ion-list-header>
119119
<ion-item>
120120
<ion-thumbnail slot="start">
121121
<ion-skeleton-text></ion-skeleton-text>
122122
</ion-thumbnail>
123123
<ion-label>
124124
<h3>
125-
<ion-skeleton-text width="80%"></ion-skeleton-text>
125+
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
126126
</h3>
127127
<p>
128-
<ion-skeleton-text width="60%"></ion-skeleton-text>
128+
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
129129
</p>
130130
<p>
131-
<ion-skeleton-text width="30%"></ion-skeleton-text>
131+
<ion-skeleton-text animated style="width: 30%"></ion-skeleton-text>
132132
</p>
133133
</ion-label>
134134
</ion-item>
@@ -138,13 +138,13 @@ <h3>
138138
</ion-thumbnail>
139139
<ion-label>
140140
<h3>
141-
<ion-skeleton-text width="80%"></ion-skeleton-text>
141+
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
142142
</h3>
143143
<p>
144-
<ion-skeleton-text width="60%"></ion-skeleton-text>
144+
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
145145
</p>
146146
<p>
147-
<ion-skeleton-text width="30%"></ion-skeleton-text>
147+
<ion-skeleton-text animated style="width: 30%"></ion-skeleton-text>
148148
</p>
149149
</ion-label>
150150
</ion-item>
@@ -154,13 +154,13 @@ <h3>
154154
</ion-thumbnail>
155155
<ion-label>
156156
<h3>
157-
<ion-skeleton-text width="80%"></ion-skeleton-text>
157+
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
158158
</h3>
159159
<p>
160-
<ion-skeleton-text width="60%"></ion-skeleton-text>
160+
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
161161
</p>
162162
<p>
163-
<ion-skeleton-text width="30%"></ion-skeleton-text>
163+
<ion-skeleton-text animated style="width: 30%"></ion-skeleton-text>
164164
</p>
165165
</ion-label>
166166
</ion-item>
@@ -170,13 +170,13 @@ <h3>
170170
</ion-thumbnail>
171171
<ion-label>
172172
<h3>
173-
<ion-skeleton-text width="80%"></ion-skeleton-text>
173+
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
174174
</h3>
175175
<p>
176-
<ion-skeleton-text width="60%"></ion-skeleton-text>
176+
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
177177
</p>
178178
<p>
179-
<ion-skeleton-text width="30%"></ion-skeleton-text>
179+
<ion-skeleton-text animated style="width: 30%"></ion-skeleton-text>
180180
</p>
181181
</ion-label>
182182
</ion-item>
@@ -186,13 +186,13 @@ <h3>
186186
</ion-thumbnail>
187187
<ion-label>
188188
<h3>
189-
<ion-skeleton-text width="80%"></ion-skeleton-text>
189+
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
190190
</h3>
191191
<p>
192-
<ion-skeleton-text width="60%"></ion-skeleton-text>
192+
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
193193
</p>
194194
<p>
195-
<ion-skeleton-text width="30%"></ion-skeleton-text>
195+
<ion-skeleton-text animated style="width: 30%"></ion-skeleton-text>
196196
</p>
197197
</ion-label>
198198
</ion-item>
@@ -202,13 +202,13 @@ <h3>
202202
</ion-thumbnail>
203203
<ion-label>
204204
<h3>
205-
<ion-skeleton-text width="80%"></ion-skeleton-text>
205+
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
206206
</h3>
207207
<p>
208-
<ion-skeleton-text width="60%"></ion-skeleton-text>
208+
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
209209
</p>
210210
<p>
211-
<ion-skeleton-text width="30%"></ion-skeleton-text>
211+
<ion-skeleton-text animated style="width: 30%"></ion-skeleton-text>
212212
</p>
213213
</ion-label>
214214
</ion-item>
@@ -218,13 +218,13 @@ <h3>
218218
</ion-thumbnail>
219219
<ion-label>
220220
<h3>
221-
<ion-skeleton-text width="80%"></ion-skeleton-text>
221+
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
222222
</h3>
223223
<p>
224-
<ion-skeleton-text width="60%"></ion-skeleton-text>
224+
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
225225
</p>
226226
<p>
227-
<ion-skeleton-text width="30%"></ion-skeleton-text>
227+
<ion-skeleton-text animated style="width: 30%"></ion-skeleton-text>
228228
</p>
229229
</ion-label>
230230
</ion-item>
@@ -234,13 +234,13 @@ <h3>
234234
</ion-thumbnail>
235235
<ion-label>
236236
<h3>
237-
<ion-skeleton-text width="80%"></ion-skeleton-text>
237+
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
238238
</h3>
239239
<p>
240-
<ion-skeleton-text width="60%"></ion-skeleton-text>
240+
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
241241
</p>
242242
<p>
243-
<ion-skeleton-text width="30%"></ion-skeleton-text>
243+
<ion-skeleton-text animated style="width: 30%"></ion-skeleton-text>
244244
</p>
245245
</ion-label>
246246
</ion-item>
@@ -257,39 +257,9 @@ <h3>
257257
#skeleton {
258258
display: block;
259259
}
260-
261-
/* TODO temporary hack for skeleton */
262-
ion-skeleton-text {
263-
display: inline;
264-
height: 100%;
265-
width: auto;
266-
}
267-
268-
#skeleton h3,
269-
#skeleton p {
270-
margin-top: 7px;
271-
margin-bottom: 6px;
272-
}
273-
274-
#skeleton p:last-child {
275-
margin-bottom: 5px;
276-
}
277260
</style>
278261

279262
<script>
280-
/* TODO temporary hack for skeleton */
281-
async function onLoad() {
282-
const skeletonTexts = document.querySelectorAll('ion-skeleton-text');
283-
284-
for (i = 0; i < skeletonTexts.length; ++i) {
285-
const skel = await skeletonTexts[i].componentOnReady();
286-
287-
const childSpan = skel.shadowRoot.querySelector('span');
288-
childSpan.style.height = '100%';
289-
childSpan.style.display = 'block';
290-
}
291-
}
292-
293263
function toggleSkeleton() {
294264
const skeletonEl = document.getElementById('skeleton'),
295265
skeletonStyle = window.getComputedStyle(skeletonEl),

0 commit comments

Comments
 (0)