Search code examples
web-componentstenciljs

stenciljs webcomponents : ion-router for a simple step-by-step wizard?

my stencil app is a step-by-step wizard. In app-root.tsx I have

render() {
    return (
      <ion-app>
        <ion-router useHash={false}>
          <ion-route component="app-home" >
            <ion-route url="/" component="step-one" />
            <ion-route url="/two/:data" component="step-two" />
            <ion-route url="/three/:data" component="step-three" />
          </ion-route>
        </ion-router>
        <ion-nav />
      </ion-app>
    );
  }

in app-home.tsx I have

<ion-navbar>
  <ion-tabs>
    <ion-tab tab="tab1" component="step-one" />
    <ion-tab tab="tab2" component="step-two" />
    <ion-tab tab="tab3" component="step-three" />

    <ion-tab-bar slot="top" selectedTab={this.selectedTab)}>
      <ion-tab-button tab="tab1">Step One</ion-tab-button>
      <ion-tab-button tab="tab2">Step Two</ion-tab-button>
      <ion-tab-button tab="tab3">Step Three</ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-navbar>

at some point I would like to diable the ion-tab-buttons and use them only to display the active tab, but now they are active since I have several problems :

  1. the app doesn't start with the content of "step-one" (a form). I see the tabs at the top and I can click on any tab to select it, but how to make it start at step-one ? ( this.selectedTab = 'tab1' in componentWillLoad)
  2. in step-one I put a <ion-button disabled={!this.valid} routerDirection = 'forward'>Next</ion-button> that shows up, is enabled when the form is filled, but when I click on it, nothing happens (I tried href="/two" without success...)
  3. how to pass the form data to the next steps, by the way ?

Any help appreciated... Thanks !

Solution

  • In the route definitions the component should be the name of the tab (the tab property) and not the component inside of the tab (see Router integration in the ion-tabs docs).

    <ion-route component="app-home">
  <ion-route url="/" component="tab1" />
  <ion-route url="/two/:data" component="tab2" />
  <ion-route url="/three/:data" component="tab3" />
</ion-route>

    The reason that the button doesn't work with the href attribute is probably the missing :data parameter.

    I suggest not passing the data through the URL but to use a central data store, for example Stencil Store. That way you don't have to worry about URL encoding etc.