{tech.description}
20 |{tech.description}
30 |
38 |
40 | 23 |
24 |
25 |
26 | 27 |
28 | {#key show}
29 | 
33 |
34 |
37 |
33 |
34 | Great success!
35 | {/key}
36 | Contents
22 | 23 |
35 |
37 | Contents
22 | 23 |
37 |
39 |
--------------------------------------------------------------------------------
/demo-app/src/lib/components/SourceButton.svelte:
--------------------------------------------------------------------------------
1 |
22 |
23 |
24 |
26 |
27 | Explanation of TABS
23 | 24 |25 | Tabs are a real joy working within Svelte since we are now able to use SvelteKit routing and 26 | layouts to create nested routeroutlets. This demo app itself has not yet been upgraded to this, 27 | but there is a HOWTO-you can look at to see how it works. 28 |
29 | 30 |31 | Use a href to navigate to other tabs 32 | explain 33 |
34 | 35 |This also solves some earlier issues and eases the DX.
36 |37 | https://github.com/Tommertom/ionic-svelte-tabs-howto 39 |
40 |Contents
20 | 21 |
39 |
41 |
--------------------------------------------------------------------------------
/demo-app/static/assets/src/components/tabs/[tab]/+page.svelte:
--------------------------------------------------------------------------------
1 |
32 |
33 | 31 |
32 |
33 |
34 |
35 |
39 |
40 |
42 |
39 | 40 |
Great success!
41 | 31 |
32 |
33 |
34 |
35 |
39 |
40 |
42 |
39 | 40 |
Great success!
41 | Contents
20 | 21 |Contents
27 | 28 |Contents
27 | 28 |Contents
25 | 26 |Contents
27 | 28 |Contents
25 | 26 |Contents
25 | 26 |Lorem ipsum dolor sit amet, consectetur adipiscing elit.
22 |Nam rutrum justo massa, maximus elementum leo dignissim ac.
26 |Vestibulum eleifend lorem nec neque interdum varius.
30 |Sed in neque at nibh congue tincidunt.
34 |38 | Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 39 |
40 |Suspendisse potenti.
44 |
47 | Donec magna odio,
48 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
22 |Nam rutrum justo massa, maximus elementum leo dignissim ac.
26 |Vestibulum eleifend lorem nec neque interdum varius.
30 |Sed in neque at nibh congue tincidunt.
34 |38 | Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 39 |
40 |Suspendisse potenti.
44 |
47 | Donec magna odio,
48 |
%sveltekit.body%
47 |
48 |
49 |
--------------------------------------------------------------------------------
/demo-app/static/assets/src/components/Badge/+page.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 | Contents
27 | 28 |Gollum
41 |Sneaky little hobbitses!
42 |Frodo
50 |Go back, Sam! I'm going to Mordor alone!
51 |Samwise
59 |What we need is a few good taters.
60 |Contents
22 | 23 |Contents
27 | 28 |32 | Svelte tweened is part of Svelte's nifty runtime features to easily add animation to DOM 33 | elements.This code comes from the Svelte Tutorial on https://svelte.dev/tutorial/tweened 37 | 38 |
39 | "Setting values and watching the DOM update automatically is cool. Know what's even cooler? Tweening 40 | those values. Svelte includes tools to help you build slick user interfaces that use animation to 41 | communicate changes." 42 |Click the percentages to see the transition 43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |
Contents
29 | 30 |Contents
27 | 28 |32 | Svelte tweened is part of Svelte's nifty runtime features to easily add animation to DOM 33 | elements.This code comes from the Svelte Tutorial on https://svelte.dev/tutorial/tweened 37 | 38 |
39 | "Setting values and watching the DOM update automatically is cool. Know what's even cooler? Tweening 40 | those values. Svelte includes tools to help you build slick user interfaces that use animation to 41 | communicate changes." 42 |Click the percentages to see the transition 43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |
Contents
22 | 23 |API specs for IonPage
57 |
58 | ionViewWillEnter 59 | ionViewDidEnter 60 | ionViewWillLeave 61 | ionViewDidLeave 62 |63 | You can bind the hook using simple function binding. 64 |
65 | {ionPageSyntax}
66 |
67 |
68 | Easy does it!
69 | API specs for IonPage
57 |
58 | ionViewWillEnter 59 | ionViewDidEnter 60 | ionViewWillLeave 61 | ionViewDidLeave 62 |63 | You can bind the hook using simple function binding. 64 |
65 | {ionPageSyntax}
66 |
67 |
68 | Easy does it!
69 | 38 |
39 | Hey there!
40 | {#if !isSafari} 41 |42 |
You are not running safari.
43 |Open this site again with Safari.
44 |45 |
Why? Safari on iPhone does the Add-to-Home-Screen correctly
46 |47 |
Great! The next step is to add this site to your home screen.
52 | 53 |Select the share option in Safari and then select Add to Home Screen
54 |
55 | 56 |
57 |
{tech.title}
72 |Contents
25 | 26 |Contents
29 | 30 |1 of 2
27 | 2 of 2
30 | 1 of 3
35 | 2 of 3
38 | 3 of 3
41 | 1 of 3
46 | 2 of 3
49 | 3 of 3
52 | 1 of 3
57 | 2 of 3
60 | 3 of 3
63 | 1 of 2
68 | 2 of 2
71 | 1 of 2
76 | 2 of 2
79 | 1 of 4
84 | 2 of 4
87 | 3 of 4
90 | 4 of 4
93 | 1 of 2
27 | 2 of 2
30 | 1 of 3
35 | 2 of 3
38 | 3 of 3
41 | 1 of 3
46 | 2 of 3
49 | 3 of 3
52 | 1 of 3
57 | 2 of 3
60 | 3 of 3
63 | 1 of 2
68 | 2 of 2
71 | 1 of 2
76 | 2 of 2
79 | 1 of 4
84 | 2 of 4
87 | 3 of 4
90 | 4 of 4
93 | 36 | Svelte spring is part of Svelte's nifty runtime features to easily add animation to DOM 37 | elements.This code comes from the Svelte Tutorial on https://svelte.dev/tutorial/spring 41 | 42 |
43 | "The spring function is an alternative to tweened that often works better for values that are frequently 44 | changing. In this example we have two stores — one representing the circle's coordinates, and one 45 | representing its size. Let's convert them to springs." 46 |Waggle your mouse around, and try dragging the sliders to get a feel for how they 47 | affect the spring's behaviour. Notice that you can adjust the values while the spring is still 48 | in motion. 49 |
50 | 51 |
52 |
56 |
57 |
61 |
62 |
63 |
72 | 36 | Svelte spring is part of Svelte's nifty runtime features to easily add animation to DOM 37 | elements.This code comes from the Svelte Tutorial on https://svelte.dev/tutorial/spring 41 | 42 |
43 | "The spring function is an alternative to tweened that often works better for values that are frequently 44 | changing. In this example we have two stores — one representing the circle's coordinates, and one 45 | representing its size. Let's convert them to springs." 46 |Waggle your mouse around, and try dragging the sliders to get a feel for how they 47 | affect the spring's behaviour. Notice that you can adjust the values while the spring is still 48 | in motion. 49 |
50 | 51 |
52 |
56 |
57 |
61 |
62 |
63 |
72 |