A showcase app for all Ionic UI elements - up to Ionic 5!!! 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.
Secondly, it is a boilerplate to start developing an Ionic/Svelte/PWA supercharged app (WIP)
Published as web app: https://ionicsvelte.firebaseapp.com
Hint: try reactivity of the app by using various devices or the Chrome developer view: iOS, Android's material design and fullscreen desktop responsiveness guaranteed!
If you want to run it locally:
npm install -g degit degit Tommertom/svelte-ionic-app svelte-ionic-app cd svelte-ionic-app npm i npm run dev
Why npm run build sometimes while developing? -> there is a copy script copying many assets to build folder. Having this script run in dev-mode slows down development flow. So strictly spoken, you only need to run this once for this project. So, if you run npm run dev, your assets will be copied. If you want this standard behavior, change rollup.config.js.
The app will be served on
Please note: livereload not enabled (see
rollup.config.js) because of issue in development environment.
All items also available as individual REPLs: https://github.com/Tommertom/svelte-ionic-app/blob/master/REPLS.md
If you have user requests, please raise an issue @ github, or drop a note using the "RateMe" feature in the menu. Some of these comments received and resolved:
Please check the issue list for other issues resolved.
I am very happy to get feedback and to make it more usefull to all!
NEW FEATURE: click to view source! For all components (except tab) you can click the lower right source button to view the source and copy/paste in your app. If you use fullscreen view, the menu will be a sidepanel instead of a hamburger!
NEW FEATURE: click on share button in source view to link directly to the Ionic API docs
NEW FEATURE: almost all UI elements have a separate REPL (coding playground)
NEW FEATURE: Web Animations API included (see Avatars)
NEW FEATURE: TYPESCRIPT ARRIVED!!!!! Configuration done and usable via
(I just need to add some types to the IonicController.ts so you don't get red curls)
NEW FEATURE: RATE ME FEATURE ADDED
Yes, I like to get your feedback! And I do wonder why I cant get the navigated URL as a store, so I had to make a separate one...
All features (vision/realised)
Do you like this work? Please star this project!
These are not always available for all packages used in this project, and hence not applied.
I think I need to debug a bit more, because ionInput does fire..... And the show-cancel-button "never" also does not work.
The REPLs are Ionic 4. I think they still sufficiently serve purpose to play around with the UI, so for now I won't bother too much updating them.
Ion Back Button does not appear in the app. Neither in a REPL. Made a custom version.
Needing some debugging - A NAV in the TAB is not working properly
Copy of sourcecode on iOS does not seem to work.
Pane needs ion-content to be set to
scroll-y:false to avoid strange UI on some devices.
This is something that requires a bit more work on my end - finding the right toolbox to do 200 when offline and at the same time a developer friendly implementation for changes. Probably it exists already, but just need to research a bit more.
In Cards there is a link that navigates away from the current page. It does not nicely replace the page, as it fully reloads. That is not very nice if you ask me, so you have to use a
navigate method instead of href. That is a bit unfortunate if you ask me (from SEO perspective - correct?)
If you want to set properties for Ionic elements, you need to use the
attribute as defined in the docs. Example:
Not necessarily an issue, but still a bit undesireable to make a custom element to be using a IonNav (as in
<ion-nav root="my-element">). Therefore made IonNav.svelte to handle this and developers can include svelte component instead of manually registering a customElement.
I raised an issue @ Ionic for selected-tab not selecting te default tab as per Ionic's documentation. https://github.com/ionic-team/ionic/issues/20060
This seems to be related to the ionic router that is not working for me. IonPage.svelte could be a replacement for a flyin type of animation.
Local install (in index.html):
<script type="module" src='/assets/libs/@ionic/core/dist/ionic/ionic.js'></script> <link rel="stylesheet" href="/assets/libs/@ionic/core/css/ionic.bundle.css" />
Obviously you need to put the NPM lib of @ionic in the assets folder.
A number of todo's: