Hey there, friends! We’re back at it again with a new beta release of Ionic 4, Beta 15. This release includes several new changes that we thought would be great to talk about, so let’s jump right into it!

CSS Variables Stability

CSS Variables are at the core of design in Ionic 4. We can think of them as the standardized “public API” that developers use to customize Ionic’s components. With this in mind, we’re happy to share that we’ve stabilized the CSS Variable API across the Framework. Now that that’s finished, we will be working on improving our documentation to include more information on how Ionic components can be customized.

We recently added a new theming section in the docs to give folks a primer on CSS variables as well as a new blog post (expect that soon πŸŽ‰).

Material Design Refresh

Material Design is a visual design guide that outlines the standards that apps should follow. Every now and then the guide updates the standards to improve the user experience. In this release, we have begun upgrading our Material Design components to better adhere to the latest guidelines.

buttons

The design changes we are implementing are not drastic, but they provide a native-like experience when they match the specification. This way, your users will always feel at home on whatever platform Ionic is running. While this release does not include a refresh for every Ionic component, we’re working hard to update the rest for future releases.

Rethinking Tabs

One of the most valuable and complex components in Ionic’s toolkit is Tabs. Tabs started off as a simple component that would create a tabbed interface to allow users to switch between different views in a way that was consistent with native UX paradigms.

Over time, we started hearing people ask for more features to be added: “Can we have one tab button that is just a button?” “Can I customize how the tab buttons are displayed?” “Can I use a custom icon in the tab?”

Traditionally, these features, and many others, were difficult to accomplish because Tabs was doing a lot of magic behind the scenes to generate the Tab bar and buttons. With this in mind, we thought it was time for a refresh to offer as much flexibility as possible within Tabs.

In order to do this, we had to change how Tabs were written in an app. Prior to Beta 15, Tabs would look like this:

<ion-tabs>
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Here, we have an ion-tab element that accepts an icon, a label, and a link to navigate to as properties. This is pretty much how Tabs have worked all the way back to Ionic 1. In Beta 15, we’ve removed some of the magic from Tabs which allows for more customization:

<ion-tabs>
  <ion-tab tab=”home-view”>
    <ion-content></ion-content>
    <!-- or -->
    <ion-nav></ion-nav>
    <!-- or -->
    <ion-router-outlet></ion-router-outlet>
  </ion-tab>
  <ion-tab-bar slot="bottom">
    <!-- No ion-tab, just a link that looks like a tab -->
    <ion-tab-button href=”https://beta.ionicframework.com”>
      <!-- <a href=”https://beta.ionicframework.com”> -->
      <ion-icon name="globe"></ion-icon>
      <ion-label>Schedule</ion-label>
    </ion-tab-button>

    <!-- No ion-tab, just a button that looks like a tab -->
    <ion-tab-button (click)=”openCamera()”>
      <ion-icon name="camera"></ion-icon>
      <ion-label>Photo</ion-label>
    </ion-tab-button>

    <!-- Connected to ion-tab, on click will show the ion-tab with id home-view -->
    <ion-tab-button tab=”home-view”>
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
 </ion-tabs> 

There’s a lot going on here, so let’s break it down:

  1. A single parent ion-tabs wraps the entire layout. Same as before.
  2. A new element, ion-tab-bar, creates the Tab Bar which will contain buttons.
  3. A new element, ion-tab-button, is used to create each button in the Tab Bar. These could be static links to different routes, buttons with click handlers on them, or link to whole tab views.
  4. The ion-tab component becomes a separate container that has inline content (ion-content), a navigation component (ion-nav) or a router outlet (ion-router-outlet).To connect the ion-tab-button to the ion-tab, the tab property must be added to both of these components. For example:
<ion-tabs>
  <ion-tab-bar>
    <ion-tab-button tab=”home-view”></ion-tab-button>
  </ion-tab-bar>

  <ion-tab tab=”home-view”></ion-tab>
</ion-tabs>

Since the tab property is the same on the ion-tab-button and ion-tab, when the Tab Button is tapped, the home-view Tab will become active. This takes the magic out of Tabs while making the behavior between the tab buttons and the views much more explicit.

Some other benefits of this refactor include:

  • Can now be written as a standalone Tab Bar (with no attached Tab)
  • Works with a navigation component or a plain content element
  • Works with shadow DOM and allows easy customization of the Tab Bar
  • Gives full control over the elements inside of the Tab Bar
  • Integrates nicely with other frameworks that have different ways of rendering element nodes

With these change, we can now fully customize each tab button, creating the most advanced (and arguably the best) tab layout ever:

Thats a solid 13/10. Heckin’ good tabs.

Lastly, this change also fixes some outstanding issues with Tabs, so we’re excited to get this out to you all!

Screenshot Testing Tool

Building and maintaining a large UI library used by many developers isn’t an easy task, and even the simplest change can have drastic effects. Recently, our core team started to use a new tool that we built ourselves (we call it Screenshot) to help solve this problem, and to have the confidence in any and all CSS and JS changes.

With the introduction of Stencil using Puppeteer, we were able to build out a robust system specifically for team development.

Here’s how it works. On every pull request (PR), a bot is able to automatically take screenshots of each of our end-to-end tests and compare it to the master version. Before merging any PR, our team is asked to approve or deny the changes, so we’re always confident that our thousands of scenarios are passing. The Screenshot homepage always shows the latest master tests, and each PR provides links to specific commit comparisons: b2f493f/00544e9.

To the Next Beta (or RC?)…. and Beyond!

As we’ve progressed through each beta, we’ve gotten a clearer idea of where we want the framework to be by final. I’m happy to say that we’re super close to that, and you can expect it to be just around the corner. Happy hacking, y’all! πŸ€™πŸ»

-Mike, and the Ionic Team

Beta 15 Changelog
Beta Documentation
API Documentation
Theming Documentation
Tabs API Design

Signup for the Ionic Newsletter to get the latest news and updates!

  • MrSparklle

    Any expectation to lazy loading back to work in v4? https://github.com/ionic-team/ionic/issues/14566

    • Mike Hartington

      This is a big one and is taking a lot of time. We’re talking with the Angular team as the router API does not provide any external facing fixes that can work for us at the moment. We’re doing everything we can though and will make sure we have something by final.

  • Markonen

    Ionic blazes forward!

    • Mike Hartington

      ONWARD!!

  • http://lifestylebusinesstransformation.com/ Simon Grimm

    “super close” NICELA!

    Really liking the latest changes, but we are there v14 and v15 while both look thew same?

    • Mike Hartington

      ….Software happens Β―_(ツ)_/Β―

      Beta 14 had a sneaky little bug so we took care of it real quick before making things public.

  • Timo

    Are you considering to finally implement sliding tabs as well?

    • Mike Hartington

      This should be relatively easy to add, though it seems to be falling out of favor in the material design world.

      • Nathan

        What about sliding segments?

  • Mike Lallemont

    Looks great! Only one little issue I see and that is when using a router outlet for tabs, the first tab icon is never highlighted if the first route is from a redirect.

  • Phil Merrell

    Love v4. We are hoping to release our v4 app by January. Any updates you can give on approaches to retaining Tab stack history? Also any updates for swipe to go back on native iOS? 🀘

    I see these as the biggest barriers to releasing (for us anyway).

  • Nathan

    Are you working on or thinking about writing a roadmap for 2019? I think lots of people and companies would like your vision on Ionic 4. There are a lot of things I’m not sure about, watching several github issues to get some sort of clarification.
    Things like what you think will be your min Android and iOS version in the stable version. If, when and how the Android back button will be implemented, when will angular environments work with ionic cordova build command, how to mock ionic-native inside of unit tests and I can go on. But it would be get an official statement somewhere this year πŸ˜€

    • Phil Merrell

      Hi nathan… If I understand you correctly when you said “angular environments work with ionic cordova build command” you should be able to set up an object under the “configurations” property of your angular.json.

      Here’s a gist: https://gist.github.com/philmerrell/6e398739a289ce0e790add615203a9fa#file-angular-json-L64

      Once that entry is set up, you can then run ‘ionic cordova build ios –configuration=dev’ to build with a targeted environment file. This has been working for us. Hope it helps.

      • Nathan

        Thats exactly what I mean. Why I call them angular environments, because the ionic cordova build–env (prod) suggests the use of some environment file but its just the configuration in i think angular.json.
        Thanks for your gist, that helps a lot

  • Abu Nj

    is there any way to create non-angular project with v4 CLI ?

  • Naveed Ahmed
  • void brain

    There will be a v4 Super Starter Template?
    Best practices, complex layout and basic components..

  • Volodymyr Bilyachat

    Any chance to have weekly releases? You guys are doing absolutely the best job πŸ™‚ I was thinking to start upgrading some of mine application but changed my mind due to slow releases(I mean if there are major bugs they should be fixed asap).

  • http://harry.zone/ Harry Manchanda

    Hello there Team ionic,

    I am somewhat experienced web designer/developer and I was checking out ionic 4 docs… (I have never tried ionic)
    With ionic can I go fully monty with Material design on all platforms… I mean in iOS too??

    Source: https://material.io/develop/ios/docs/faq/

  • Douglas Garber

    Mike – in reference to your image of the new tab bar above, with what appears to be a fab button in the middle, how do we get the button to break out of the container? In some experimenting, I am able to place a fab button in a tab button yet the top of it is being hidden as what seems to be overflow control is hiding it. How can break out of the container and display as as your image above displays?

    https://uploads.disquscdn.com/images/52d01c69f6cfd11f8988163de84d0858dae7ed0a2fe0272a4b5c06c49766c8c2.png

  • redhabayu anggara

    im so excited to wait ionic 4 release candidate..

  • mohammedzamakhan

    Are you guys going to open source the screenshot tool?