[Question] How to implement router with IonTabs?

[KiddoV]

I have an app with IonTabs, and the navigation seems to work fine.
How can I implement a router so that when a user clicks <ion-item href="/some/link">, it will navigate to the desired page on each tab, it should also can be able to press the back button and remain on the same current tab?

Is it possible in the current state?
Are there any tutorials available for implementation?

This feature seems to be fundamental for every mobile app. If we can't navigate normally, that would be a significant omission.

Thanks,

[briznad]

@KiddoV here's an example:
https://github.com/briznad/telescope/blob/5c9618d5ef3ffde92e5cffaad19f29a8a95682f7/src/routes/(protected)/%2Blayout.svelte#L69

Apologies that this isn't a trivial example. This was intended as a proof of concept that has since been abandoned and has a lot going on. However, you can see how you can mix Ionic's ion-tabs, ion-tab-bar, and ion-tab-button with Svelte's generic slot and routing to achieve a tabbed navigation. The 1 downside I'll call out is you don't get any animation with tabbed views sliding left/right like you would with plain Ionic.

[KiddoV]

Thanks, I will check that out.

I think missing animations on tab navigation are a big deal since it's a must-have feature in mobile apps nowadays. Without the transition, it doesn't feel like mobile app. I hope we can find a workaround to replicate this.

[briznad]

It's a tough call. I agree that replicating smooth, native app-like navigation animation is compelling, but everything else about Ionic with SvelteKit is so elegant from a user and dev perspective, that I'm inclined to ignore that detail for a little while until someone can figure out a decent solution.

In any case, I created a trivial tab example app, which should be much easier to make sense of:
https://github.com/briznad/svelte-ionic-app-tabs-example

@Tommertom you may want to check this out and weigh in ^

[briznad]

This is slightly tangential, but I just learned about the View Transitions API. This seems like the clean solution to add animation to route transitions without all of the heaving lifting of modifying Ionic. Just needs wider support.

[Tommertom]

Interesting - the important point here is that the page animations in ionic are actually quite complex - parts animating differently

I am aware of the api - never used it

Worth keeping eye on! Thx

[briznad]

Interesting - the important point here is that the page animations in ionic are actually quite complex - parts animating differently

I am aware of the api - never used it

Worth keeping eye on! Thx

From what little I've read, it does seem that targeting parts of the page with different animations is supported.

@Tommertom I'd love to get your feedback as to the approach combining Ionic tabs with SvelteKit routing in my svelte-ionic-app-tabs-example repo if you're able to review.

[Tommertom]

@briznad - thanks for setting up the demo

So just to be sure I am on the same page as you are - you basically use the ion-tabs component out of the box, making the IonTabs.svelte component actually not necessary?

That would be an absolute great insight - and I haven't tested it thoroughly - but I definitely love the idea of getting rid of IonTabs.svelte

The only thing that kinda-keeps hanging with me is that this ion-tabs implementation requires a bit of duplication of code for the href & selected part - what do you think?

Edit - copilot suggests to add a function isTabSelected:

I wonder if we can simplify further... I suppose it requires a change within ion-tabs-button or a wrapper over it - which kinda takes us back to square one.

[Tommertom]

I think missing animations on tab navigation are a big deal since it's a must-have feature in mobile apps nowadays. Without the transition, it doesn't feel like mobile app. I hope we can find a workaround to replicate this.

I'd think you can still add svelte native animations to pages that are being displayed, correct? so saying NO animations possible I believe is a bit steep conclusion. Agree?

[briznad]

@Tommertom totally agree that my demo is not optimized, which was on purpose. I wanted to keep things very simple, so avoided creating any helper functions, such as isTabSelected, that would be wanted in a prod setup. When I've used this pattern for real apps, I've created an array of tab properties that I'd iterate over to output the tab markup. Something like this:

<script lang='ts'>
	type Tab = {
		title : string;
		href : string;
		icon? : string;
		matchPath? : RegExp;
	}

	const tabs : Tab[] = [
		…
		{
			title     : 'Apples',
			href      : '/apples',
			matchPath : /^\/apples\//,
		},
		…
	];
</script>

<ion-tabs>
	<slot />

	<ion-tab-bar slot="bottom">
		{#each tabs as tab }
			<ion-tab-button
				selected={ isTabSelected($page.url.pathname, tab.href, tab.matchPath) }
				href={ tab.href }
			>
				{#if tab.icon }
					<ion-icon
						icon={ tab.icon }
					></ion-icon>

				{/if}

				{ tab.title }
			</ion-tab-button>
		{/each }
	</ion-tab-bar>
</ion-tabs>

Following this pattern, it would be possible to create a tabs component that accepted a Tab array as input. However, I don't think this is a good idea. Creating such a helper component is too much of a departure from the core purpose of svelte-ionic, which is simply to create a compatibility layer between Ionic and Svelte, ideally which strays as little from Ionic's solid documentation as possible. Obviously this is my own interpretation of the purpose of the library you created, so feel free to disagree.

[Tommertom]

@briznad agree - the design principle is indeed to stay as close to Ionic's docs as possible. Otherwise we burden ourselves with extra maintenance.

For now, there are two options - the one with a separate non-standard Tabs component. Or the coding example you showed, which has its merits as well. Developers can choose themselves.

As to ionic-svelte the biggest challenges imho is that the overlay components like Modal, Nav, Popover do not work properly when being nested. There is something wrong inthe component generation and CSS assignment (this issue is already logged #81)

Let's keep the issue open.