A showcase app for all Ionic UI elements. Supercharged by `ionic-svelte`, the unofficial Ionic Svelte integration.
With handy tool to see the actual code in all popular frameworks - Svelte, Vue, React, Stencil, VanillaJS and even Angular!
Click the PWA Launch button to see this app live in action - and install as PWA on your desktop or mobile!
- Introduction
- Want to start your own Ionic project?
- What is next - API
- Screenshots
- Ionic starters - the Ionic CLI standard projects
- How to contribute?
- REPLS
- Things to do maybe one day...
- Acknowledgements
A showcase app for all Ionic UI elements - up to Ionic 6!!! Use this app to try-out the elements you like for your app, and then navigate directly to the API docs or the source code.
Published as web app: https://ionicsvelte.firebaseapp.com
Open developer tools to see developer info in the console.log
Design objectives
- Use all Ionic 6 UI elements
- Integration with SvelteKit as framework (n.b. only SPA mode works, SSR won't fly with Ionic)
- Ease PWA configuration with good documentation - using zero-config Vite (https://vite-plugin-pwa.netlify.app/)
- Deployable as PWA
- File based router (using SvelteKit's router)
- aligned as much as possible to the Ionic documentation for other integrations
- supporting other framework developers through source-code viewing
As far as I can see now, the current new version is getting there pretty close!
The original Svelte-Vite-Routify repo will continue to exist as separate branch (ViteSvelteIonic6) once the migration is completed. But I don't think I will upgrade that one anymore.
Hint: try responsive design of the app and ionic UI magic by using various devices or the Chrome developer view: iOS, Android's material design and fullscreen desktop responsiveness guaranteed!
On the CLI just type npm create ionic-svelte-app@latest
to spin a SvelteKit project from the CLI. This will
do all the lifting for you to create a SvelteKit SPA app.
The aim of this project is to stay as close as possible to Ionic's documentation. https://ionicframework.com/docs/components
But in some cases, that won't work. Visit https://github.com/Tommertom/svelte-ionic-npm to get more info on how to develop with Ionic Svelte and some issues.
And special components such as IonPage
, IonNav
and IonTabs
which have their own APIs
Questions - find me on Ionic's discord server, with a separate Ionic Svelte Channel - https://discordapp.com/channels/520266681499779082/1049388501629681675
Intro | Component menu | Sourcecode |
---|---|---|
![]() |
![]() |
![]() |
Progress bar | Icons | PWA IOS install |
---|---|---|
![]() |
![]() |
![]() |
More screens: https://ionicsvelte.firebaseapp.com
If you want to get started with Ionic, Svelte and Vite, just use one of the starters that you can normally get when spinning a new Ionic project using the CLI
PLEASE NOTE - THESE ARE NOT IN SVELTEKIT, BUT IN SVELTE+VITE+ROUTIFY
-
Blank demo
- https://github.com/Tommertom/svelte-ionic-blank-demo
npx degit Tommertom/svelte-ionic-blank-demo svelte-ionic-blank-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-blank-demo
-
Tabs demo
- https://github.com/Tommertom/svelte-ionic-tabs-demo
npx degit Tommertom/svelte-ionic-tabs-demo svelte-ionic-tabs-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-tabs-demo
-
Sidemenu demo
- https://github.com/Tommertom/svelte-ionic-sidemenu-demo
npx degit Tommertom/svelte-ionic-sidemenu-demo svelte-ionic-sidemenu-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-sidemenu-demo
-
Mystarter demo - taking photo with Capacitor
- https://github.com/Tommertom/svelte-ionic-mystarter-demo
npx degit Tommertom/svelte-ionic-mystarter-demo svelte-ionic-mystarter-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-mystarter-demo
-
List demo
- https://github.com/Tommertom/svelte-ionic-list-demo
npx degit Tommertom/svelte-ionic-list-demo svelte-ionic-list-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-list-demo
-
Conference demo - (sort of...check its README)
- https://github.com/Tommertom/svelte-ionic-conference-demo
npx degit Tommertom/svelte-ionic-conference-demo svelte-ionic-conference-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-conference-demo
When using the online playground - make sure you pop-out the render window to see the demo in full size.
Would you like to start any of the above in your favorite framework (React, Vue or Angular), just use the Ionic CLI to start the app: ionic start --type=angular|vue|react
. Ionic CLI is easy to install: npm i -g @ionic/cli
. https://ionicframework.com/docs/cli/commands/start.
Or clone the repo of this full-demo-app to play with its code:
npx degit Tommertom/svelte-ionic-app svelte-ionic-app
cd svelte-ionic-app
npm i
npm run dev
Would you like to contribute to this project? Great!
First and foremost - share you feedback!!!!!
- For issues with
ionic-svelte
library - https://github.com/Tommertom/svelte-ionic-npm/issues - For issues related to this demo app - https://github.com/Tommertom/svelte-ionic-app/issues
- Or find me on Ionic's discord server, with a separate Ionic Svelte Channel - https://discordapp.com/channels/520266681499779082/1049388501629681675
And if you want to do more - what is there to do:
- EASY - fix typos (also great for your Github online profile - there are many), add examples for components
- MEDIUM - fix some minor bugs ( e.g. SvelteSpring), improve layout of pages (e.g. SvelteTransition)
- HARD - look at the open issues below
When you do a PR, make sure you explain what you did and why!
REPLS available for each component separately - https://github.com/Tommertom/svelte-ionic-app/blob/main/REPLS.md These are Ionic 4 components only.
- dark mode selector
Logo by Brett Peary: https://brettpeary.com/
Ionic UI code: https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api
README inspiration: https://github.com/gitpoint/git-point/blob/master/README.md
PWA logo: https://github.com/webmaxru/progressive-web-apps-logo
Borat logo: https://sapper.svelte.dev/
Raymondboswel's repo: https://github.com/raymondboswel/ionic-svelte-example
Code highlighting: https://github.com/metonym/svelte-highlight