All Projects → Tommertom → Svelte Ionic App

Tommertom / Svelte Ionic App

Licence: mit
Ionic UI showcase app - try Ionic UI and directly go to API or source code

Labels

Projects that are alternatives of or similar to Svelte Ionic App

Xsm
State Management made eXtraordinarily simple and effective for Angular, React, and Vue
Stars: ✭ 138 (-13.21%)
Mutual labels:  svelte
Musicplayer
A minimal music player built on electron.
Stars: ✭ 145 (-8.81%)
Mutual labels:  svelte
Palettes
A tool for creating nice, percerptually correct and colorblind-safe color palettes.
Stars: ✭ 155 (-2.52%)
Mutual labels:  svelte
Sb Admin Svelte
StartBootstrap SB Admin rebuilt using Svelte + Sveltestrap
Stars: ✭ 143 (-10.06%)
Mutual labels:  svelte
Notus Svelte
Notus Svelte: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 144 (-9.43%)
Mutual labels:  svelte
Cl Editor
Lightweight text editor built with svelte, typescript
Stars: ✭ 148 (-6.92%)
Mutual labels:  svelte
Tsparticles
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
Stars: ✭ 2,694 (+1594.34%)
Mutual labels:  svelte
Vim Svelte
Vim syntax highlighting and indentation for Svelte 3 components.
Stars: ✭ 158 (-0.63%)
Mutual labels:  svelte
Svelthree
Svelte components library for declarative construction of reactive and reusable three.js scene graphs utilizing three.js source in a slightly modified version.
Stars: ✭ 144 (-9.43%)
Mutual labels:  svelte
Hn.svelte.dev
Hacker News clone built with Svelte and Sapper
Stars: ✭ 154 (-3.14%)
Mutual labels:  svelte
Yrv
Your routing! (for Svelte)
Stars: ✭ 143 (-10.06%)
Mutual labels:  svelte
Magic Microservices
Write components in any way, use them everywhere.😘
Stars: ✭ 145 (-8.81%)
Mutual labels:  svelte
Svelte Css Vars
✨ Ever wanted to have reactive css variables in svelte? What if I told you there's a way?
Stars: ✭ 150 (-5.66%)
Mutual labels:  svelte
Svelte Data Grid
Lightweight and powerful data grid for svelte
Stars: ✭ 139 (-12.58%)
Mutual labels:  svelte
Kit
The fastest way to build Svelte apps
Stars: ✭ 6,010 (+3679.87%)
Mutual labels:  svelte
Routify Starter
Stars: ✭ 137 (-13.84%)
Mutual labels:  svelte
Svelte Notifications
Svelte toast notifications component that can be used in any JS application
Stars: ✭ 146 (-8.18%)
Mutual labels:  svelte
Ajari Koding
📚 Kumpulan berbagai sumber daya untuk belajar koding dari hasil karya para kreator lokal yang terpercaya dan telah dikurasi oleh komunitas PHPID
Stars: ✭ 156 (-1.89%)
Mutual labels:  svelte
Svelte Chota
Svelte UI components based on super lightweight chota CSS framework.
Stars: ✭ 157 (-1.26%)
Mutual labels:  svelte
Figmatocode
Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
Stars: ✭ 2,299 (+1345.91%)
Mutual labels:  svelte

Ionic Svelte UI demo

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 localhost:5000.

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

User requests

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:

  • Margin in the SourceViewer
  • Stop the begging for Rating

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 <script lang="ts">

(I just need to add some types to the IonicController.ts so you don't get red curls)

NEW FEATURE: JAVASCRIPT CODE ADDED!!!

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)

  • Rate me - popup to see hear what your user thinks (100%)
  • Configured for Typescript usage (100%)
  • Web Animations API (see Avatars - 100% done)
  • All Ionic Framework UI components showcased (100% done)
  • Run as SPA - Filesystem router via Routify (100% done)
  • Code splitting - lazy loading of routes (100%)
  • Service Worker setup via workbox (75% - not really doing much this way)
  • PWA compliance via Ligthouse score (80% - biggest issue: no 200 when offline)
  • RXJS usage (100%)
  • Localstorage via localforage (100%)
  • Firebase SDK - analytics/firestore (100%)
  • Capacitor for mobile native support (100%)
  • Ionic Theming in local styles and global CSS (100%)
  • REPLs for each element (100%)
  • Source code previewer (100%)
  • Cookie Popup (100%)
  • Ionic included as asset, not CDN (100%)
  • Setting global CSS variables - (https://ionicframework.com/docs/theming/css-variables (100%) - see App.svelte)
Screen1.PNG

And the source view with copy feature and you can select text with the mouse: Screen2.PNG

Do you like this work? Please star this project!

Known issues

Not an issue but good to note: Typescript full usage may require typings for some packages

These are not always available for all packages used in this project, and hence not applied.

Searchbar cancel ionCancel does not fire

I think I need to debug a bit more, because ionInput does fire..... And the show-cancel-button "never" also does not work.

REPLs are Ionic 4

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 show

Ion Back Button does not appear in the app. Neither in a REPL. Made a custom version.

Altdetails is not taking the route argument

Needing some debugging - A NAV in the TAB is not working properly

Capacitor Clipboard on iOS does not copy

Copy of sourcecode on iOS does not seem to work.

Pane integration is WIP

Pane needs ion-content to be set to scroll-y:false to avoid strange UI on some devices.

PWA no 200 when offline

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.

Navigation through href isn't as pretty

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?)

Remarks while working on Ionic - Svelte integration

Setting properties for Ionic Elements

If you want to set properties for Ionic elements, you need to use the attribute as defined in the docs. Example:

  • not ok: <ion-content scrollX="true">...</ion-content>
  • ok: <ion-content scroll-x="true>...</ion-content>

Nav needs customElement

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.

IonTabs selected Tab

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

IonNav does not work in tabs

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.

Want local install of Ionic lib?

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.

Todo's

A number of todo's:

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].