|
13 | 13 | let holidaysStart = new Date(); |
14 | 14 | let appointment = new Date(); |
15 | 15 | let number = 0; |
| 16 | + let skeletonBalance = 0; |
| 17 | + let skeletonPercentageVal = 0; |
| 18 | + let skeletonMeasurementMeterVal = 0; |
| 19 | + let skeletonCompactVal = 5000; |
| 20 | + let skeletonScientificVal = 123456789; |
16 | 21 | let interpolationKey = "Your favorite color is {chosen}"; |
17 | 22 | let simplePlural = "Your have {numCats, plural, one {one cat} other {# cats}}"; |
18 | 23 | let complexPlural = "Your have {numCats, plural, \n =0 {no cats at all} \n =1 {one single cat} \n =2 {a couple cats} \n =3 {a trio of cats} \n =12 {a dozen cats} \n other {exactly # cats}}"; |
|
21 | 26 | let dateString = "Your next holidays start on {holidayStart, date, full}"; |
22 | 27 | let timeString = "Your doctor's appointment is today at {appointment, time, short}"; |
23 | 28 | let numberString = "Your account balance is {num, number}"; |
| 29 | + let skeletonCurrency = "Your account balance is {num, number, ::currency/EUR}"; |
| 30 | + let skeletonCurrencySigned = "Your account balance is {num, number, ::currency/EUR sign-always}"; |
| 31 | + let skeletonPercentage = "Game progress {num, number, ::percent}"; |
| 32 | + let skeletonPercentageTwoDecimals = "Game progress {num, number, ::percent .00}"; |
| 33 | + let skeletonMeasurementMeter = "Your destination is {num, number, ::unit/meter} away"; |
| 34 | + let skeletonMeasurementMeterLong = "Your destination is {num, number, ::unit/meter unit-width-full-name} away"; |
| 35 | + let skeletonCompactShort = "Are you sure you want to bid {num, number, ::K} over asking?"; |
| 36 | + let skeletonCompactLong = "Are you sure you want to bid {num, number, ::KK} over asking?"; |
| 37 | + let skeletonScientific = "The chances of winning the lottery are 1 in {num, number, ::scientific/*ee}?"; |
24 | 38 |
|
25 | 39 | function onDateChange(e) { |
26 | 40 | holidaysStart = new Date(e.srcElement.value) |
|
247 | 261 | </tbody> |
248 | 262 | </table> |
249 | 263 |
|
250 | | -<h2 class="text-2xl font-semibold">{$t('icu-crash-course.subsection.number')}</h2> |
| 264 | +<h2 class="text-2xl font-semibold" id="crash-course-numbers">{$t('icu-crash-course.subsection.number')}</h2> |
251 | 265 |
|
252 | 266 | <p>{$t('icu-crash-course.paragraph.number')}</p> |
253 | 267 |
|
|
271 | 285 | </tr> |
272 | 286 | </tbody> |
273 | 287 | </table> |
| 288 | + |
| 289 | +<p>{@html $t('icu-crash-course.paragraph.number-2')}</p> |
| 290 | + |
| 291 | +<table class="table-auto w-full text-left"> |
| 292 | + <thead> |
| 293 | + <tr> |
| 294 | + <th>{$t('icu-crash-course.table-heads.definition')}</th> |
| 295 | + <th>{$t('icu-crash-course.table-heads.values')}</th> |
| 296 | + <th>{$t('icu-crash-course.table-heads.output')}</th> |
| 297 | + </tr> |
| 298 | + </thead> |
| 299 | + <tbody> |
| 300 | + <tr class="bg-gray-50"> |
| 301 | + <td> |
| 302 | + <pre><code>{skeletonCurrency}</code></pre> |
| 303 | + </td> |
| 304 | + <td> |
| 305 | + <input type="number" bind:value={skeletonBalance}> |
| 306 | + </td> |
| 307 | + <td>{$t('icu-crash-course.table-cells.skeletonCurrency', { values: { num: skeletonBalance } })}</td> |
| 308 | + </tr> |
| 309 | + <tr> |
| 310 | + <td> |
| 311 | + <pre><code>{skeletonCurrencySigned}</code></pre> |
| 312 | + </td> |
| 313 | + <td> |
| 314 | + <input type="number" bind:value={skeletonBalance}> |
| 315 | + </td> |
| 316 | + <td>{$t('icu-crash-course.table-cells.skeletonCurrencySigned', { values: { num: skeletonBalance } })}</td> |
| 317 | + </tr> |
| 318 | + <tr class="bg-gray-50"> |
| 319 | + <td> |
| 320 | + <pre><code>{skeletonPercentage}</code></pre> |
| 321 | + </td> |
| 322 | + <td> |
| 323 | + <input type="number" step="0.1" bind:value={skeletonPercentageVal}> |
| 324 | + </td> |
| 325 | + <td>{$t('icu-crash-course.table-cells.skeletonPercentage', { values: { num: skeletonPercentageVal } })}</td> |
| 326 | + </tr> |
| 327 | + <tr> |
| 328 | + <td> |
| 329 | + <pre><code>{skeletonPercentageTwoDecimals}</code></pre> |
| 330 | + </td> |
| 331 | + <td> |
| 332 | + <input type="number" step="0.1" bind:value={skeletonPercentageVal}> |
| 333 | + </td> |
| 334 | + <td>{$t('icu-crash-course.table-cells.skeletonPercentageTwoDecimals', { values: { num: skeletonPercentageVal } })}</td> |
| 335 | + </tr> |
| 336 | + <tr class="bg-gray-50"> |
| 337 | + <td> |
| 338 | + <pre><code>{skeletonMeasurementMeter}</code></pre> |
| 339 | + </td> |
| 340 | + <td> |
| 341 | + <input type="number" bind:value={skeletonMeasurementMeterVal}> |
| 342 | + </td> |
| 343 | + <td>{$t('icu-crash-course.table-cells.skeletonMeasurementMeter', { values: { num: skeletonMeasurementMeterVal } })}</td> |
| 344 | + </tr> |
| 345 | + <tr> |
| 346 | + <td> |
| 347 | + <pre><code>{skeletonMeasurementMeterLong}</code></pre> |
| 348 | + </td> |
| 349 | + <td> |
| 350 | + <input type="number" bind:value={skeletonMeasurementMeterVal}> |
| 351 | + </td> |
| 352 | + <td>{$t('icu-crash-course.table-cells.skeletonMeasurementMeterLong', { values: { num: skeletonMeasurementMeterVal } })}</td> |
| 353 | + </tr> |
| 354 | + <tr class="bg-gray-50"> |
| 355 | + <td> |
| 356 | + <pre><code>{skeletonCompactShort}</code></pre> |
| 357 | + </td> |
| 358 | + <td> |
| 359 | + <input type="number" step="100" bind:value={skeletonCompactVal}> |
| 360 | + </td> |
| 361 | + <td>{$t('icu-crash-course.table-cells.skeletonCompactShort', { values: { num: skeletonCompactVal } })}</td> |
| 362 | + </tr> |
| 363 | + <tr> |
| 364 | + <td> |
| 365 | + <pre><code>{skeletonCompactLong}</code></pre> |
| 366 | + </td> |
| 367 | + <td> |
| 368 | + <input type="number" step="100" bind:value={skeletonCompactVal}> |
| 369 | + </td> |
| 370 | + <td>{$t('icu-crash-course.table-cells.skeletonCompactLong', { values: { num: skeletonCompactVal } })}</td> |
| 371 | + </tr> |
| 372 | + <tr class="bg-gray-50"> |
| 373 | + <td> |
| 374 | + <pre><code>{skeletonScientific}</code></pre> |
| 375 | + </td> |
| 376 | + <td> |
| 377 | + <input type="number" step="100" bind:value={skeletonScientificVal}> |
| 378 | + </td> |
| 379 | + <td>{$t('icu-crash-course.table-cells.skeletonScientific', { values: { num: skeletonScientificVal } })}</td> |
| 380 | + </tr> |
| 381 | + </tbody> |
| 382 | +</table> |
| 383 | + |
| 384 | +<p>The possibilities of number skeletons are limitless.</p> |
| 385 | +<p>{$t('icu-crash-course.paragraph.number-3')}</p> |
0 commit comments